JavaScript DOM总结（二、节点操作）

时间：2021-02-09 14:39:06

一、创建节点

1、createElement()

createElement() 方法创建元素节点。该方法接收一个String类型的参数，表示所创建元素节点的名称，并返回 Element 对象。

2、createTextNode()

createTextNode() 创建文本节点。该方法接收一个String类型的参数，表示文本节点的文本，并返回一个文本节点对象。

3、createAttribute()

createAttribute()方法用于创建一个指定名称的属性，并返回Attr对象属性。

下面程序展示了上述几个方法的使用：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建节点</title>
<style type="text/css">
.democlass{
color : red;
}
</style>
</head>
<body>

</body>
<script type="text/javascript">
 window.onload = function(){
var div = document.createElement("div"); // 创建div节点
var attr = document.createAttribute("class"); // 创建属性节点
 attr.value = "democlass"; // 设置属性节点的值
 div.setAttributeNode(attr); // 设置div的属性节点为所创建的属性节点
var text = document.createTextNode("这是text节点"); // 创建文本节点 
 div.appendChild(text); // 文本节点添加为div的子节点
 document.body.appendChild(div); // 添加div为body的子节点
 };
</script>
</html>

二、获取节点

1、使用 getElementById() 方法

该方法通过指定的id来获取元素节点，返回指定id的元素。

为了测试获取节点的方法，先搭建如下HTML DOM结构（下面几种方法都以这个为准）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素节点</title>
</head>
<body>
<div id="mydiv">
<p id="p1" class="classP">我是p1段落</p>
<p id="p2" class="classP">我是p2段落</p>
<input type="text" name="myinput" value="sean" />
</div>
</body>
</html>

JavaScript代码如下：

var p1 = document.getElementById("p1");
console.log(p1); //<p id="p1" class="classP">
console.log(p1.innerHTML); // 我是p1段落

由于id一般都是唯一的，因此返回的元素只有一个。如果仔细观察，我们也可以发现getElementById()用的单数，而下面的方法用的都是复数。

2、使用getElementsByTagName() 方法

该方法通过标签名来获取元素节点，返回所有该标签名的元素。

var ps = document.getElementsByTagName("p");
console.log(ps);  // HTMLCollection[p#p1.classP, p#p2.classP]
for (var i = 0; i < ps.length; i++) {
    console.log(ps[i].innerHTML);
    }
// 我是p1段落
// 我是p2段落

在Firefox浏览器测试下，通过标签名得到的是所有该标签的元素集合，我们可以通过for循环去遍历集合中的每一个元素。

3、使用getElementsByName() 方法

该方法通过元素的name属性来获取元素节点，返回所有该name属性的元素节点。

var input = document.getElementsByName("myinput");
console.log(input);  // Firefox： NodeList[input 属性(attribute)值 = "sean"]
console.log(input);  // IE： <HtmlCollection length="1">...</HtmlCollection>
console.log(input.length);  // 1
console.log(input[0].value); // sean

在Firefox浏览器下测试，通过name属性得到的一个NodeList对象，但是在IE下得到的是HTMLCollection集合，这两者都返回的是 Node 集合与 Node，只是后者多了一个nameItem 方法可用。在我们基本使用中基本上没有差别。

4、使用getElementsByClassName() 方法

该方法通过元素的类名来获取元素，同样返回的是所有该类名的元素节点。

var classp1 = document.getElementsByClassName("classP");
console.log(classp1); //HTMLCollection[p#p1.classP, p#p2.classP]
console.log(classp1.length); // 2
console.log(classp1[0].innerHTML); // 我是p1段落

需要注意的是，该方法在IE8及之前的版本都不支持，需要自己实现。

三、节点操作

另外还有一些关于节点的操作列在下面的表格中，并一一进行测试：

方法 描述
appendChild() 把新的子节点添加到指定节点
insertBefore() 在指定的子节点前面插入新的子节点
replaceChild() 替换子节点
removeChild() 删除子节点
cloneNode() 克隆节点

下面通过代码来演示上述方法的基本用法：

1、appendChild()

appendChild()方法用于向某节点的子节点列表的末尾添加一个节点。添加节点后， childNodes 的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。该方法还会返回新增的节点。
首先构建HTML DOM结构：

<!-- HTML -->
<div id="mydiv">
<p id="p1">我是段落p1</p>
<p id="p2">我是段落p2</p>
</div>

javascript代码如下：

//先创建一个新节点
var p3 = document.createElement("p");
p3.innerHTML = "我是段落p3";

var div = document.getElementById("mydiv");
//将p2节点添加到div最后一个子节点
var newnode = div.appendChild(p3);
console.log(newnode===div.lastChild);  // true

2、insertBefore()

insertBefore()方法用于把节点放在 childNodes 列表中某个特定的位置上，而不是放在末尾。该方法接收两个参数：需要插入的新节点以及位置参考节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点（previousSibling），同时被方法返回。如果参照节点是null，则 insertBefore()与 appendChild()执行相同的操作

//先创建一个新节点
var newP = document.createElement("p");
newP.innerHTML = "我是新建的段落";

var div = document.getElementById("mydiv");
//插入后成为最后一个子节点
var newLastNode = div.insertBefore(newP, null);
console.log(newLastNode===div.lastChild);  // true

//插入后成为第一个子节点
var newFirstNode = div.insertBefore(newP,div.firstChild);
console.log(newFirstNode===div.firstChild); //true

//插入到P2子节点前面
var p2 = document.getElementById("p2");
var newnode = div.insertBefore(newP,p2);
console.log(p2.previousSibling===newnode);  //true

3、replaceChild()

replaceChild()用于替换子节点，该方法接收两个参数：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置。

//先创建一个新节点
var newP = document.createElement("p");
newP.innerHTML = "我是新建的段落";

var div = document.getElementById("mydiv");
//替换P1元素
var p1 = document.getElementById("p1");
var returnedNode = div.replaceChild(newP, p1);
console.log(p1===returnedNode);  //true

4、removeChild()

removeChild()方法用于删除子节点，这个方法接受一个参数，即要移除的节点。被移除的节点将成为方法的返回值。

var div = document.getElementById("mydiv");
var p1 = document.getElementById("p1");
var removedNode = div.removeChild(p1);
console.log(removedNode);  // <p id="p1">

注意：前面介绍的四个方法操作的都是某个节点的子节点，也就是说，要使用这几个方法必须先取得父节点（使用 parentNode 属性）。另外，并不是所有类型的节点都有子节点，如果在不支持子节点的节点上调用了这些方法，将会导致错误发生。

5、cloneNode()

cloneNode()用于克隆节点，该方法接受一个布尔值参数，表示是否执行深复制。在参数为 true的情况下，执行深复制，也就是复制节点及其整个子节点树；在参数为 false 的情况下，执行浅复制，即只复制节点本身。

var div = document.getElementById("mydiv");
var deepList = div.cloneNode(true);
console.log(deepList.childNodes.length); // 5 (IE<9时为2)

var shollowList = div.cloneNode(false);
console.log(shollowList.childNodes.length); // 0
标签：

相关文章