HTML DOM学习笔记（二）_DOM常用方法

来源：互联网发布：不同表格相同数据查找编辑：程序博客网时间：2024/05/18 12:43

DOM常用方法

方法是在html元素上执行的动作；

1.getElementById();

该方法方法返回带有指定 ID 的元素。

比如说，获取id=”a”的元素：

document.getElementById("a");

2.getElementByTagName();

该方法方法返回带有指定标签名称的所有元素的节点列表（集合/节点数组）。

比如说，想要获取到文档中所有元素的列表：

document.getElementByTagName("a");

3.getElementByClassName();

该方法返回带有指定类名的所有元素的节点列表。

比如说，想要获取class=”a”的所有元素：

document.getElementByClassName("a");

4.appendChild();

该方法把新的子节点添加到指定节点。

5.removeChild();

该方法删除子节点。

6.replaceChild();

该方法替换子节点。

7.insertBefore();

该方法在指定的子节点前面插入新的子节点。

8.createElement();

该方法创建元素节点。

9.createTextNode();

该方法创建文本节点。

——————————————————————————————————

通过以上方法我们可以向HTML DOM 做增删改查操作；

添加新的html元素
首先必须创建该元素，然后把它追加到已有的元素上。
如：

<html><body><div id="d1"><p id="p1">hello,dom!</p><p id="p2">hello,html dom!.</p></div><script>var para=document.createElement("p");//创建了一个新的<p>元素：var node=document.createTextNode("This is dom.");//创建文本节点para.appendChild(node);//向<p>元素追加文本节点var element=document.getElementById("d1");//查找到一个已有的元素element.appendChild(para);//向这个已存在的元素追加新元素</script></body></html>

删除已有元素
首先需要了解该元素的父元素！

代码如下：

<script>var parent=document.getElementById("d1");var child=document.getElementById("p1");parent.removeChild(child);</script>

提示：在不引用父元素的情况下是无法删除某个元素的。
有一个常用的解决方法：找到要删除的子元素，然后使用 parentNode 属性来查找其父元素：

var child=document.getElementById("p1");child.parentNode.removeChild(child);

替换html元素

<script>var parent=document.getElementById("d1");var child=document.getElementById("p1");var para=document.createElement("p");var node=document.createTextNode("This is new DOM.");para.appendChild(node);parent.replaceChild(para,child);</script>

阅读全文

1 0