js-dom节点操作

节点操作

节点的概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。 HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以 创建或删除。

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个 基本属性。

• 元素节点 nodeType 为 1
• 属性节点 nodeType 为 2
• 文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）
• 在实际开发中，节点操作主要操作的是元素节点

节点层级关系

父节点找子节点

**childNodes：**返回包含指定节点的子节点的集合，该集合为即时更新的集合。

//父节点.childNodes
var oLi = oUl.childNodes   //找到ul下的所有li  因为是个集合 所以可以使用遍历数组的方法遍历

注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。

如果只想要获得里面的元素节点，则需要专门获取。

**children：**获取父元素下的所有子元素，但是只获取元素节点。

var oUl = document.querySelector("ul") //先获取父元素ul
var oLis = oUl.children //再获取父元素所有的子元素（元素节点），获取一个集合

firstElementChild：返回父元素的第一个子（元素）节点，只遍历元素节点，不包含文本。

lastElementChild：返回父元素的最后一个（元素）节点，只遍历元素节点，不包含文本。

firstChild： 返回节点的第一个子节点，包含元素节点或者 文本节点等。

lastChild： 返回节点的最后一个子节点，包含元素节点或者 文本节点等。

兄弟节点

nextElementSibling： 返回下一个兄弟节点，只返回元素节点，不包含文本节点等。

previousElementSibling： 返回上一个兄弟节点，只返回元素节点，不包含文本节点等。

	<div>我是span的兄弟div</div>
    <span>我是div下面的兄弟span</span>
    <script>
        var oDiv = document.querySelector('div')
        var oSpan = document.querySelector('span')
        console.log(oDiv.nextElementSibling) //<span>我是div下面的兄弟span</span>
        console.log(oSpan.previousElementSibling)//<div>我是span的兄弟div</div>
    </script>

**nextSibling ：**返回下一个兄弟节点，包含元素节点或者 文本节点等。

previousSibling： 返回上一个兄弟节点，包含元素节点或者 文本节点等。

子节点找父节点

**parentNode：**可返回某节点的父（元素）节点，注意是最近的一个父节点。

//找到li的父元素节点ul
var oLi = document.querySelector("#test")
var oUl = oLi.parentNode

节点的操作

创建节点

document.createElement() 方法创建由 tagName（标签名） 指定的 HTML 元素。

因为这些元素原先不存在， 是根据我们的需求动态生成的，所以也称为动态创建元素节点。

语法：

 document.createElement('标签名称')

添加节点（节点追加）

node.appendChild() 方法

语法：

node（父节点）.appendChild(子节点)

node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。

var oP = document.createElement("p") //创建节点
oP.innerHTML = "一道残阳铺水中"
document.body.appendChild(oP)//追加节点

node.insertBefore()方法

语法：

node（父节点）.insertBefore(子节点, 指定元素)

node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。

 //  添加节点 node.insertBefore(child, 指定元素)
 		var oUl = document.querySelector('ul')
        var oLi = document.createElement('li')
        ul.insertBefore(oLi, ul.children[0])

**总结：**当我们想要页面添加一个新的元素 ：

1. 创建元素
2. 添加元素

删除节点

dom对象.remove()方法

使用remove ()方法删除父节点上的所有元素，包括所有文本和子节点。

语法：

dom对象.remove()

var oUl = document.querySelector("ul")
    var oBtn = document.querySelector("button")
    oBtn.onclick = function(){
        oUl.lastElementChild.remove() //删除ul里最后一个子节点（所有元素  包括文本和子节点）
    }

node.removeChild() 方法

使用removeChild ()方法删除父节点上的一个子节点。

语法

 node（父节点）.removeChild(子节点) 

node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。