DOM属性节点加其他节点的操作

原创

阿里CTO 2022-07-22 15:40:05 博主文章分类：DOM ©著作权

文章标签 数组 html 元素节点 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者阿里CTO的原创作品，请联系作者获取转载授权，否则将追究法律责任

节点属性 nodeType 返回值为数值

节点类型(nodeType) 节点名字(nodeName) 节点值(nodeValue)

元素节点 1 标签名 null

文本节点 3 #text 文本

注释节点 8 #comment 注释的文字

文档节点 9 #document null

属性节点 2 属性名属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box" a="10" b=20 id="cont" title="这是一个div">hello<!--这是一个注释-->></div>

</body>
<script>

    var obox = document.querySelector(".box")//通过元素属性操作
    console.log(obox.attributes);//显示元素的内置属性
    console.log(obox.attributes[0].class); //undefined
    console.log(obox.attributes[1].a);  //undefined
    console.log(obox.attributes[2]);  //b="20"
    console.log(obox.attributes[3]);   //id="cont"
    console.log(typeof obox.attributes[3]);  object

     console.log(obox.attributes[2]);  //b="20"
     console.log(obox.attributes[2].nodeName); //b
     console.log(obox.attributes[2].nodeValue); //20
     console.log(obox.attributes[2].nodeType);//2

     console.log(obox.nodeName)
     console.log(obox.nodeValue)
     console.log(obox.nodeType)

     console.log(typeof obox.childNodes[0])
     console.log(obox.childNodes[0])
     console.log(obox.childNodes[0].nodeName)
     console.log(obox.childNodes[0].nodeValue)
     console.log(obox.childNodes[0].nodeType)

     console.log(obox.childNodes[1])
     console.log(obox.childNodes[1].nodeName)
     console.log(obox.childNodes[1].nodeValue)
     console.log(obox.childNodes[1].nodeType)

     console.log(document)
     console.log(document.nodeName)
     console.log(document.nodeValue)
     console.log(document.nodeType)


//     伪数组：假数组，可以使用索引和长度遍历
//     但是不能使用数组的方法
//     所有的DOM选择器，返回的数组，都是伪数组
//     arguments
//
//     真数组：既能通过索引和长度遍历，也可以使用数组的方法