JavaScript DOM节点操作详解：删除、替换与查找

本节直接从具体方法入手进行讲解。

删除节点操作

1. 删除节点。使用 removeChild() 方法。

<body>

<div id="cssrain">

<div id="a">a </div>

<div id="b">b </div>

<div id="c">c </div>

</div>

</body>

<script>

var msg = document.getElementById("cssrain");

var b = document.getElementById("b");

msg.removeChild(b);

</script>

若不清楚待删除节点的父节点，可借助 parentNode 属性获取。

例如：

<body>

<div id="cssrain">

<div id="a">a </div>

<div id="b">b </div>

<div id="c">c </div>

</div>

</body>

<script>

var b = document.getElementById("b");

var c = b.parentNode;

c.removeChild(b);

</script>

替换节点操作

2. 替换节点。使用 replaceChild() 方法。

element.replaceChild( newNode , oldNode ); // 新节点作为替换项，oldNode 必须是 Element 的一个子节点。

示例：

<body>

<div id="cssrain">

<div id="a">a </div>

<div id="b">b </div>

<div id="c">c </div>

</div>

</body>

<script>

var cssrain = document.getElementById("cssrain");

var msg = document.getElementById("b");

var para = document.createElement("p");

cssrain.replaceChild( para , msg );

</script>

查找节点方法

3. 查找节点

相较于上述修改操作，查找节点相对简单。

许多开发者初次接触 JavaScript 时便已熟悉该方法（例如最初学习的 getElementById()）。

getElementById();

该方法返回一个对象，该对象包含 nodeName、nodeType、parentNode、ChildNodes 等属性。

getElementsByTagName() 用于查找具有指定标签名的所有元素。

该方法返回一个集合，可通过循环遍历取出每个对象，这些对象同样拥有 nodeName、nodeType、parentNode、ChildNodes 等属性。

示例：

var ps = document.getElementsByTagName("p");

for(var i=0 ; i< ps.length ; i++){

ps[i].setAttribute("title","hello");

//也可以使用: ps.item(i).setAttribute("title","hello");