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

最新推荐文章于 2022-05-09 09:10:29 发布

诗渊

最新推荐文章于 2022-05-09 09:10:29 发布

阅读量646

点赞数 2

分类专栏： JavaScript 文章标签： javascript DOM 获取节点创建节点

本文链接：https://blog.csdn.net/u014607184/article/details/52005794

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、创建节点

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