10Node对象

Dreamy.TZK

发布于 2020-04-14 12:56:54

6740

发布于 2020-04-14 12:56:54

判断节点类型

节点类型	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()方法实现对应功能。 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> 结果为：