1.DOM节点

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

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

2.获取子节点

先书写结构,供下面获取

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

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

• 语法: 元素.childNodes

    //0.获取元素
    var div = document.querySelector('div')

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

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

• 语法: 元素.children

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

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

• 语法: 元素.firstChild

//3. firstChild
console.log(div.firstChild) // #text

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

• 语法: 元素.lastChild

//4. lastChild
console.log(div.lastChild) // #text

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

• 语法: 元素.firstElementChild

//5. firstElementChild
console.log(div.firstElementChild)

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

• 语法: 元素.lastElementChild

//6. lastElementChild
console.log(div.lastElementChild)

3.获取兄弟节点

先书写结构,供下面获取

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

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

• 语法:元素.nextSibling

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

• 语法:元素.previousSibling

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

• 语法:元素.nextElementSibling

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

• 语法:元素.previousElementSibling

    //0. 获取元素
    var span = document.querySelector('span')

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

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

    //3. nextElementSibling
    console.log(span.nextElementSibling) // h1标签

    //4.previousElementSibling
    console.log(span.previousElementSibling) // p

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

这里先书写结构,供下面获取:

<div>
    <p>你好</p>
    <span>测试文本</span>
    <h1 id="hi_box" class="cla+box" test="wjxns" num="18">JS是世界上最好的语言</h1>
</div>

4.1 获取父节点

• 语法: 元素.parentNode

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

• 语法: 元素.attributes

    //0.获取节点
    var h1 = document.querySelector('h1')

    //1.获取父节点
    console.log(h1.parentNode)

    //2. attributes
    console.log(h1.attributes)

5. 节点属性

<ul test="我是ul的一个属性">
    <li>宣传部会计</li>
</ul>

    //0.获取元素
    var ul = document.querySelector('ul')

    //1. 元素节点
    var sleNode = ul.firstElementChild
    
    //2. 属性节点
    var attrNode = ul.attributes[0]

    //3.文本节点
    var textNode = ul.firstChild

5.1 nodeType 节点类型

• 节点中的一个属性 nodeType 能够区分当前节点是什么类型
• 1 -> 元素节点
• 2 -> 属性节点
• 3 -> 文本节点

    //1. nodeType
    console.log('元素节点',sleNode.nodeType)
    console.log('属性节点',attrNode.nodeType)
    console.log('文本节点',textNode.nodeType)

5.2 nodeName 节点名称

• 元素节点 -> 大写的边签名 (LI/UL/DIV)
• 属性节点 -> text (属性名)
• 文本节点 -> #text

    //2. nodeName
    console.log('元素节点',sleNode.nodeName)
    console.log('属性节点',attrNode.nodeName)
    console.log('文本节点',textNode.nodeName)

5.3 nodeValue 节点的值

• 元素节点 -> 没有 nodeValue 也就是会输出 null
• 属性节点 -> 对应的属性值
• 文本节点 -> 对应的文本内容

    //3. nodeValue
    console.log('元素节点',sleNode.nodeValue)
    console.log('属性节点',attrNode.nodeValue)
    console.log('文本节点',textNode.nodeValue)