body代码

    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
    </ul>
    </div>

DOM 节点

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

元素节点

通过 getElementBy... 获取到的都是元素节点

属性节点

通过 getAttribute 获取到的都是属性节点

文本节点

通过 innerText 获取到的就是元素的文本节点

1.获取子节点

body代码

    <div>
        <p>你好</p>
        <span>测试文本</span>
        <h1>JS 是世界上最优美的语言</h1>
    </div>

0. 获取元素

    var oDiv = document.querySelector('div')

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

语法:

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

1.2 获取某一节点下 所有的 子一节 元素节点 获取到的是一个伪数组

语法:

    元素.children
    
    
    
    console.log(oDiv.children)  // 这里只有 div 内部的标签

1.3 获取某一节点下子一级的 第一个节点

语法:

    元素.firstChild
    
    console.log(oDiv.firstChild)    // #text

1.4 获取某一节点下子一级的 最后一个节点

语法:

    元素.lastChild
    
    console.log(oDiv.lastChild) // #text

1.5 获取某一节点下子一级的 第一个元素节点

语法:

    元素.firstElementChild
    
    console.log(oDiv.firstElementChild)
   

1.6 获取某一节点下子一级的 最后一个元素节点

语法:

    元素.lastElementChild
    
    console.log(oDiv.lastElementChild)
   
   

2.获取兄弟节点

body代码

    <div>
    <p>你好</p>
    <span>测试文本</span>
    <h1>JS 是世界上最优美的语言</h1>
</div>

0. 获取元素

    var oSpan = document.querySelector('span')

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

语法:

    元素.nextSibling
    
    
    console.log(oSpan.nextSibling)  // #text
    

2.2 获取对应的 上一个兄弟节点

语法:

    元素.previousSibling
    
    
    console.log(oSpan.previousSibling)  // #text

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

语法:

    元素.nextElementSibling
    
    
    console.log(oSpan.nextElementSibling)   // h1

2.4获取对应的 上一个兄弟元素节点

语法:

    元素.previousElementSibling
    
    console.log(oSpan.previousElementSibling)   // p
    

3.获取父节点与属性节点

body代码

    <div>
        <p>你好</p>
        <span>测试文本</span>
        <h1 id="h1_box" class="h1_box_cla" test="QF001" num="100">JS 是世界上最优美的语言</h1>
    </div>

0. 获取节点

    var oH = document.querySelector('h1')

3.1 父节点

语法:

    元素.parentNode
    
    
    console.log(oH.parentNode)

3.2 获取元素的所有属性节点

语法:

    元素.attributes
    
    
    console.log(oH.attributes)
    console.log(oH.attributes[0])