10Node对象

判断节点类型

节点类型	`nodeName`	`nodeType`	`nodeValue`
Document文档节点	#document	9	null
Element元素节点	元素节点的元素名	1	null
Attr属性节点	属性节点的属性名	2	属性节点的属性值
Text文本节点	#text	3	文本节点的内容

获取父节点

获取父节点包括两个分别为

获取父节点：parenNode
获取指定节点的父节点，其父节点不一定是元素节点。
获取父节点元素：parentElement
获取指定节点的父元素节点，其父节点必须是元素节点。

通常情况下parentNode ≈ parentElement，但是特殊情况是<html>元素的父节点是document对象

获取子节点

firstChild
获取指定节点的第一个子节点
lastChild
获取指定节点的最后一个子节点

childNodes

获取所有的子节点，返回一个NodeList集合，但此集合为动态集合

var childNodes = parentElement.childNodes
console.log(childNodes)
var divElement = document.createElement("div")
parentElement.appendChild(divElement)
console.log(childNodes)

获取相邻兄弟节点

previousSibling
获取指定节点的前面相邻兄弟节点
nextSibling
获取指定节点的后面相邻兄弟节点

空白节点

主流浏览器解析HTM页面内容为DOM节点树结构时，会产生空文本的空白节点。这是由HTML页面源代码中的换行引起的

<div id="parent" class="button-group">
    <button id="btn" name="btn" class="button">A Button</button>
    <button name="btn" class="button">A Button</button>
    <button name="btn" class="button">A Button</button>
</div>

上述代码示例的DOM节点树结构如图所示：

解决方案

如果可以判断出什么情况下是空白节点（内容为回车符的空白节点）根据空白节点产生的情况来进行处理
根据空白节点产生的情况来进行处理DOM中的空白符

使用getElementByTagName()方法实现对应功能。

1
2
3

varparentNode= document.getElementById('parent');
varchildren = parentNode.getElementsByTagName('button');
console.log(children);

插入节点

原生JavaScript只提供了两个方法：

appendChild()

appendChild()方法的参数child表示添加的新的子节点，同时该子节点也是 appendChild0方法的返回值。插入到节点的后边

var parentElement = document.getElementById('parent')

var divElement = document.createElement('div')
divElement.textContent = 'box4'

parentElement.appendChild(divElement)

insertBefore(newElement,referenceElement)

表示将节点插入到节点的前边。

referenceElement参数表示指定节点的某个子节点
newElement 表示插入的节点

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="parent">
      <div id="box1">box1</div>
      <div id="box2">box2</div>
      <div id="box3">box3</div>
    </div>
    <script>
      var parentElement = document.getElementById("parent");
      var divElement = document.createElement("div");
      divElement.textContent = "box4";
      var box2 = document.getElementById("box2");
      parentElement.insertBefore(divElement, box2);
    </script>
  </body>
</html>

以上代码输出结果

删除节点

removeChild()方法实现从HTML页面中删除指定节点。

被移除的这个子节点仍然存在于内存中，只是没有添加到当前文档的DOM树中。
因此，你还可以把这个节点重新添加回文档中。当然，实现要用另外一个变量比如上述语法中的oldChild来保存这个节点的引用
如果使用上述语法中的第二种方法，即没有使用 old child来保存对这个节点的引用，则认为被移除的节点已经是无用的，在短时间内将会被内存管理回收。

删除的语法有两个:

// 第一种：如果只是删除则可以不需要赋值变量
var oldChild = node.removeChild(child);
// 第二种
element.removeChild(child);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div id="parent">
        <div id="box1">box1</div>
        <div id="box2">box2</div>
        <div id="box3">box3</div>
    </div>
    <script>
        var paret = document.getElementById("parent")
        var box1 = document.getElementById("box1");
        // 删除box1节点
        paret.removeChild(box1)
        var box2 = document.getElementById("box2")
        // 删除box2节点
        var old = paret.removeChild(box2)
    </script>
</body>

</html>

替换节点

replaceChild()方法实现HTML页面中节点的替代功能。

var replaceNode = parentNode.replaceChild(newChild,oldChild);

oldChild表示被替换的节点。replaceChild()方法的返回值也是被替换的节点，即oldChild==replaceNode
newChild则表示用于替换的新节点。如果该节点已经存在于DOM节点树结构中的话，则它会被从原始位置删除。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="parent">
        <p id="p1">p1</p>
        <p id="p2">p2</p>
        <p id="p3">p3</p>
    </div>
    <script>
        // 获取父节点
        var parent = document.getElementById('parent');
        // 创建新节点
        var newChild = document.createElement('p')
        newChild.setAttribute('id', 'p4')
        var text = document.createTextNode("p4")
        newChild.appendChild(text)
        // 获取子节点
        var oldChild = document.getElementById('p3')
        parent.replaceChild(newChild, oldChild)
    </script>
</body>

</html>

复制节点

克隆一个元素节点会拷贝它所有的属性以及属性值，当然也就包括了属性上绑定的事件，但不会拷贝那些使用 addEventlistener0方法或者 node， onclick=fn这种用 javAscript动态绑定的事件。
在使用 Node append Child0或其他类似的方法将拷贝的节点添加到文档中之前，那个拷贝节点并不属于当前文档树的一部分。也就是说，它没有父节点
如果de参数设为 false，则不克隆它的任何子节点。该节点所包含的所有刘本也不会被克隆，因为文本本身也是一个或多个的Text节点。
为了防止一个文档中出现两个ID重复的元素使用 clone node0方法克隆的节点在需要时应该指定另外一个与原ID值不同的ID.

cloneNode(deep)方法实现HTML页面中节点的复制功能。

var dupNode = node.cloneNode(deep)

node表示被克隆的节点。返回值dupNode 表示克隆后的新节点。
参数deep表示是否进行深度克隆
- true：深度克隆，所有后代节点也都会被克隆
- false：默认值。

textContent属性

element.textContent

直接获取节点的内容及其所有后代节点的文本内容。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="test">
        <div id="t">
            <p id="p1">p1</p>
        </div>
        <p id="p2">p2</p>
        <p id="p3">p3</p>
    </div>
    <script>
        var h = document.getElementById("test")
        console.log(h.textContent)
    </script>
</body>

</html>