判断节点类型

节点类型nodeNamenodeTypenodeValue
Document文档节点#document9null
Element元素节点元素节点的元素名1null
Attr属性节点属性节点的属性名2属性节点的属性值
Text文本节点#text3文本节点的内容

获取父节点

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

  • 获取父节点:parenNode

    获取指定节点的父节点,其父节点不一定是元素节点。

  • 获取父节点元素:parentElement

    获取指定节点的父元素节点,其父节点必须是元素节点。

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

获取子节点

  • firstChild

    获取指定节点的第一个子节点

  • lastChild

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

  • childNodes

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

    1
    2
    3
    4
    5
    var childNodes = parentElement.childNodes
    console.log(childNodes)
    var divElement = document.createElement("div")
    parentElement.appendChild(divElement)
    console.log(childNodes)

获取相邻兄弟节点

  • previousSibling

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

  • nextSibling

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

空白节点

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

1
2
3
4
5
<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节点树结构如图所示:

解决方案

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

    根据空白节点产生的情况来进行处理DOM中的空白符

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

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

插入节点

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

  • appendChild()

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

    1
    2
    3
    4
    5
    6
    var parentElement = document.getElementById('parent')

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

    parentElement.appendChild(divElement)
  • insertBefore(newElement,referenceElement)

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

    • referenceElement参数表示指定节点的某个子节点
    • newElement 表示插入的节点
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!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来保存对这个节点的引用,则认为被移除的节点已经是无用的,在短时间内将会被内存管理回收。

删除的语法有两个:

1
2
3
4
// 第一种:如果只是删除则可以不需要赋值变量
var oldChild = node.removeChild(child);
// 第二种
element.removeChild(child);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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节点树结构中的话,则它会被从原始位置删除。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <!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>

    结果为:

    • 设置节点内容

      设置节点内容会将全部修改为一个新的内容。例如上边的html结构我们修改h的内容

      1
      h.textContent = 'test'

      结果为: