JavaScript HTML DOM元素节点操作汇总

2023-08-18 12:14:07 77

前言

在文档对象模型(DOM)中，每个节点都是一个对象。DOM节点有三个重要的属性：

1.nodeName:节点的名称

2.nodeValue：节点的值

3.nodeType：节点的类型

节点类型：元素1，属性2，文本3，注释8，文档9。

一、添加和删除节点（HTML元素）

1、创建节点

1）创建该元素（元素节点）；

2）向一个已存在的元素追加该元素。

语法：appendChild(newnode)

eg:


这是一个段落
这是另一个段落

document.createElement("标签名");//创建元素节点

document.createTextNode("文本");//创建文本节点

appendChild();//方法向节点添加最后一个子节点。也可以使用appendChild()方法从一个元素向另一个元素中移动元素。用法：a.appendChild(b)，把b添加到a内。

2.添加节点

appendChild();//在指定节点的最后一个子节点列表之后添加一个新的子节点。

语法，eg:同上。

insertBefore();//insertBefore()方法可在已有的子节点前插入一个新的子节点。

语法：insertBefore(newnode,node);

eg:


JavaScript
HTML



varotest=document.getElementById("test");
varnewli=document.createElement("li");
newli.innerHTML="php";
//otest.insertBefore(newli,otest.lastChild);
otest.insertBefore(newli,otest.childNodes[1]);

3.删除节点

removeChild()//removeChild()方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回NULL。

语法：nodeObject.removeChild(node)

eg:


这是一个段落。
这是另一个段落。

DOM需要清楚需要删除的元素，以及它的父元素。先找到希望删除的子元素，然后使用其parentNode属性来找到父元素。

4.替换节点

replaceChild//把一个给定父元素里面的一个子节点替换为另一个子节点。

语法：referencre=element.replaceChild(newChild,oldChild);//newChild:必需，用于替换oldChild的对象。oldChild:必需，被newChild替换的对象。

eg:


JavaScript是一个很常用的技术，为网页添加动态效果。
将加粗改为斜体


functionreplaceMessage(){
varb=document.getElementById("oldnode");
varnewNode=document.createElement("i");
newNode.innerHTML=b.innerHTML;
b.parentNode.replaceChild(newNode,b);
}

注意：当oldnew被替换时，所有与之相关的属性内容都将被移除。newChild必须先被建立。

5.访问子节点

childNodes//访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。

语法：elementNode.childNodes//可用childNodes[i]数组的形式表示第几个子元素

eg:


javascript
javascript
jQuery
PHP


varint=document.getElementsByTagName("div")[0].childNodes;
for(vari=0;i");
}
document.write("子节点个数："+int.length+"
");

6.访问子节点的第一和最后项

firstChild//返回‘childNodes'数组的第一个子节点。如果选定的节点没有子节点，则该属性返回NULL。

语法：node.firstChild//与elementNode.childNodes[0]是同样的效果。

lastChild//返回‘childNodes'数组的第一个子节点。如果选定的节点没有子节点，则该属性返回NULL。

语法：node.lastChild//与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

eg：


javascript
jQuery
PHP

Coffee Tea 点击按钮来获得首个项目的下一个同胞。

试一下

JavaScript HTML DOM元素 节点操作汇总

PHP

PHP

热门推荐

随机推荐

JavaScript HTML DOM元素节点操作汇总