DOM节点

一般来说我们分为三个大类元素节点(标签) / 文本节点(标签内的文字) / 属性节点(标签上的属性)

元素节点:通过 getElementBy... 获取到的都是元素节点
属性节点:通过 getAttribute 获取到的都是属性节点
文本节点:通过 innerText 获取到的就是元素的文本节点

获取节点

获取子级节点

获取某一节点下,所有的子一级节点,获取到的是一个伪数组

语法: 元素.childNodes
获取某一节点下,所有的子一节元素节点,获取到的是一个伪数组

语法: 元素.children
获取某一节点下子一级的第一个节点

语法: 元素.firstChild
获取某一节点下子一级的最后一个节点

语法: 元素.lastChild
获取某一节点下子一级的第一个元素节点

语法: 元素.firstElementChild
获取某一节点下子一级的最后一个元素节点

语法: 元素.lastElementChild

<body>
    <div>
        <p>你好</p>
        <span>测试文本</span>
        <h1>JS 是世界上最优美的语言</h1>
    </div>
    <script>
        // 0. 获取元素
        var oDiv = document.querySelector('div')

        // 1. childNodes
        console.log(oDiv.childNodes)
        /**解析拿到是什么的节点
         *  拿到的是一个伪数组, 里边有 7 个节点(文本.标签.文本.标签.文本.标签.文本)
         *      [0]: text  从 <div> 一直到 <p> 中间有一个换行和一堆空格     这是一个文本节点
         *      [1]: p      这个就是 p 标签, 他是第二个节点, 这是一个 元素节点
         *      [2]: text   从 </p> 一直到 <span> 中间有一个换行和一堆空格  这是一个文本节点
         *      ....
        */

        // 2. children
        console.log(oDiv.children)  // 这里只有 div 内部的标签.<p>你好</p>.<span>测试文本</span>.<h1>JS 是世界上最优美的语言</h1>

        // 3. firstChild
        console.log(oDiv.firstChild)    // #text文本节点

        // 4. lastChild
        console.log(oDiv.lastChild) // #text文本节点

        // 5. firstElementChild
        console.log(oDiv.firstElementChild)//显示的是<p>你好</p>

        // 6. lastElementChild
        console.log(oDiv.lastElementChild)//显示的是<h1>JS 是世界上最优美的语言</h1>
    </script>
</body>

获取兄弟节点

获取对应的下一个兄弟节点

语法: 元素.nextSibling
获取对应的上一个兄弟节点

语法: 元素.previousSibling
获取对应的下一个兄弟元素节点

语法: 元素.nextElementSibling
获取对应的上一个兄弟元素节点

语法: 元素.previousElementSibling

<body>
    <div>
        <p>你好</p>
        <span>测试文本</span>
        <h1>JS 是世界上最优美的语言</h1>
    </div>
        <script>
        // 0. 获取元素
        var oSpan = document.querySelector('span')

        // 1. nextSibling
        console.log(oSpan.nextSibling)  // #text

        // 2. previousSibling
        console.log(oSpan.previousSibling)  // #text

        // 3. nextElementSibling
        console.log(oSpan.nextElementSibling)   // h1

        // 4. previousElementSibling
        console.log(oSpan.previousElementSibling)   // p
    </script>
</body>

获取父级节点

语法: 元素.parentNode

获取元素的所有属性节点

语法: 元素.attributes

<body>
    <div>
        <p>你好</p>
        <span>测试文本</span>
        <h1 id="h1_box" class="h1_box_cla" test="QF001" num="100">JS 是世界上最优美的语言</h1>
    </div>
    <script>
        // 0. 获取节点1
        var oH = document.querySelector('h1')

        // 1. parentNode
        console.log(oH.parentNode)//div

        // 2. attributes
        console.log(oH.attributes)//这样会出现伪对象显示如下:{0: id, 1: class, 2: test, 3: num, id: id, class: class, test: test, num: num, length: 4}
        console.log(oH.attributes[0])//显示id="h1_box"

节点属性

nodeType节点类型

节点中的一个属性 nodeType 能够区分当前节点是什么类型

1 -> 元素节点

2 -> 属性节点

3 -> 文本节点
nodeName节点名称

元素节点 -> 大写的标签名 (LI / UL / DIV)

属性节点 -> text (属性名)

文本节点 -> #text
nodeValue 节点的值

元素节点 -> 没有 nodeValue 也就会输出 null

属性节点 -> 对应的属性值

文本节点 -> 对应的文本内容

<body>
    <ul text="我是 UL 的一个属性">
        <li>你好</li>
    </ul>
    <script>
        // 0. 获取元素
        var oUl = document.querySelector('ul')
        // 1. 元素节点
        var eleNode = oUl.firstElementChild//li
        // 2. 属性节点
        var attrNode = oUl.attributes[0]//获取ul的第一个属性
        // 3. 文本节点
        var textNode = oUl.firstChild

        // 1. nodeType节点类型
        console.log('元素节点: ', eleNode.nodeType)//1
        console.log('属性节点: ', attrNode.nodeType)//2
        console.log('文本节点: ', textNode.nodeType)//3

        // 2. nodeName节点名称
        console.log('元素节点: ', eleNode.nodeName)//LI
        console.log('属性节点: ', attrNode.nodeName)//text
        console.log('文本节点: ', textNode.nodeName)//#text

        // 3. nodeValue节点的值
        console.log('元素节点: ', eleNode.nodeValue)//null
        console.log('属性节点: ', attrNode.nodeValue)//"我是 UL 的一个属性"
        console.log('文本节点: ', textNode.nodeValue)//显示的是空格+换行
    </script>
</body>

获取DOM节点以及节点的属性的方法有哪些?

DOM节点

获取节点

获取子级节点

获取兄弟节点

获取父级节点

获取元素的所有属性节点

节点属性