节点获取

    <p>第一个</p>
    <div id="box" class="abc" index="helloWorld">
        hello
        <p>1</p>
        <p>2</p>
        <p>3</p>
        nonono
    </div>123
    <p>最后一个</p>

childNodes

• 语法：元素.childNode
• 得到：元素的所有 子节点 (伪数组)

        var child = div.childNodes
        console.log(child);

children

• 语法：元素.children
• 得到：元素的所有 子元素节点(伪数组)

        var childEle = div.children
        console.log(childEle);

firstChild

• 语法：元素.firstChild
• 得到：元素的第一个 子节点

        var first = div.firstChild
        console.log(first);

firstElementChild

• 语法：元素.firstElementChild
• 得到: 元素的第一个 子元素节点

        var firstEle = div.firstElementChild
        console.log(firstEle);

lastChild

• 语法: 元素.lastChild
• 得到：元素的最后一个 子节点

       var lastChild = div.lastChild
       console.log(lastChild);

lastElementChild

• 语法：元素.lastElementChild
• 得到: 元素的最后一个 子节点

        var lastChild2 = div.lastElementChild
        console.log(lastChild2);

previousSibling

• 语法：元素.prebiousSibling
• 得到：元素上一个兄弟节点(哥哥节点)

        var prev = div.previousSibling
        console.log(prev);

previousElementSibling

• 语法：元素.previousElementSibling
• 得到：元素的上一个兄弟元素节点(哥哥元素)

        var prev = div.previousElementSibling
        console.log(prev);

nextSibling

• 语法: 元素.nextSibling
• 得到：元素的下一个兄弟节点(弟弟节点)

        var nextSib = div.nextSibling
        console.log(nextSib);

nextElementSibling

• 语法：元素.nextElementSibling
• 得到：元素的下一个兄弟元素节点(弟弟元素)

        var nextSibEle = div.nextElementSibling
        console.log(nextSibEle);

parentNode

语法：元素.parentNode 得到：该元素的 父节点

        var parNode = div.parentNode.parentNode
        console.log(parNode);

parentElement

• 语法：元素.patentElement
• 得到：该元素的 父元素节点

        var parEle = div.parentElement
        console.log(parEle);

attributes

• 语法：元素.attributes
• 得到: 该元素的所有 属性节点

        var attrs = div.attributes
        console.log(attrs);

节点属性

    <div id="box" class="containr">
        <!-- 你好 世界 -->
        hello world
    </div>

nodeType

• 以数字的形式来表示一个节点类型
• 一种节点的编号
  • 元素节点： 1
  • 属性节点： 2
  • 文本节点： 3
  • 注释节点： 8

        // 元素节点
        var div = document.querySelector('div')
        // 属性节点
        var attr = div.attributes[0]
        // 文本节点
        var text = div.childNodes[2]
        // 注释节点
        var comment = div.childNodes[1]

        // 节点属性 - 节点类型
        console.log('元素节点：', div);
        console.log('属性节点', attr);
        console.log('文本节点', text);
        console.log('注释节点', comment);

        console.log('--------------------------------');

        console.log('元素节点：', div.nodeType);
        console.log('属性节点', attr.nodeType);
        console.log('文本节点', text.nodeType);
        console.log('注释节点', comment.nodeType);

nodeName

• 节点的名称
• 元素节点：大写标签名(全大写)
• 属性节点：属性名
• 文本节点：所有文本节点名称全部叫做 #text
• 注释节点：所有注释节点名称全部叫做 #comment

        console.log('元素节点：', div.nodeName);
        console.log('属性节点', attr.nodeName);
        console.log('文本节点', text.nodeName);
        console.log('注释节点', comment.nodeName);

nodeValue

• 节点的值
• 元素节点：null
• 属性节点：属性值
• 文本节点：文本内容(包含换行和空格)
• 注释节点：注释内容(包含换行和空格)

        console.log('元素节点：', div.nodeValue);
        console.log('属性节点：', attr.nodeValue);
        console.log('文本节点：', text.nodeValue);
        console.log('注释节点：', comment.nodeValue);

创建节点

createElement()

• 语法：document.createElement('标签名')
• 返回值: 一个元素节点

        var div = document.createElement('div')
        div.id = '123'
        div.innerHTML = '你好'
        console.log(div);

createTextNode()

• 语法：document.createTextNOde('文本内容')
• 返回值：一个文本节点，不是字符串

        var text = document.createTextNode('hello wrold')
        console.log(text);

createComment()

• 语法：document.createComment('注释内容')
• 返回值:一个注释节点

        var comment = document.createComment('我是一段注释内容')
        console.log(comment);

createAttribute()

• 语法：document.createAttribute('属性名')
  • 添加属性值，节点.value = '属性值'
• 返回值: 一个属性节点

        var attr = document.createAttribute('id')
        attr.value = 'box'
        console.log(attr);

插入节点

appendChild()

• 语法：父节点.appendChild(子节点)
• 作用：把子节点插入到父节点里面，放在最后一个节点的位置

        var box = document.querySelector('div')
        var span = document.createElement('span')
        var p = document.querySelector('p')
        span.innerHTML = '我是新来的 span 节点' 
        var h1 = document.createElement('h1')

insertBefore()

• 语法：父节点.inserBefore(要插入的子节点，哪一个子节点前面)
• 作用：把子节点插入到指定 父节点 的指定 子节点 前面

        h1.appendChild(span)
        box.insertBefore(h1,p)

删除节点

removeChild()

• 语法：父节点.removeChild()
• 作用：把子节点从父节点里面移除

remove()

• 语法：节点.remove()
• 作用：把自己移除节点

替换节点

replaceChild()

• 语法：父节点.replaceChild(新节点，旧节点)
• 作用：在父节点下，用新节点替换旧节点

克隆节点

cloneNode()

• 语法：节点.cloneNode(参数)
  • 参数选填，默认是 false,不克隆后代节点
  • true 表示克隆后代节点
• 返回值：一个克隆好的节点

        var div = document.querySelector('div')
        var cloneDiv = div.cloneNode(true)
        document.body.appendChild(cloneDiv)
        console.log(cloneDiv);