今天就跟大家聊聊有关JavaScript中有哪些常见的DOM节点操作,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
<强> DOM含义:强> DOM是文档对象模型(文档对象模型,是基于浏览器编程的一套API接口,是W3C出台的推荐标准。其赋予了JS操作节点的能力。当网页被加载时,浏览器就会创建页面的文档对象模型。
<强>节点:强>根据W3C HTML DOM的标准,HTML文档中的所有内容都是节点:
1,整个文档时一个文档节点。
2,每个HTML元素是元素节点。
3, HTML元素内的文本是文本节点。
4,每个HTML属性是属性节点。
5,每个注释是注释节点。
所以HTML DOM将HTML文档视作树结构,这种结构被称为节点树。通过HTML DOM,节点树中的所有节点都可以通过JS进行访问。所有HTML元素(节点)均可被修改。
<强>一、创建节点,追加节点强>
1, <代码> createElement(标签名)代码>创建一个元素节点(具体的一个元素)。
2, <代码>列表末尾(节点)代码>追加一个节点。
3 <代码> createTextNode(节点文本内容)代码>创建一个文本节点
var oDiv =, document.createElement (“div");//创建一个div元素,因为是文档对象的方法。 var oDivText =, document.createTextNode(“666“);//创建一个文本节点内容是“666”,因为是文档对象的方法。 oDiv.appendChild (oDivText);//父级.appendChild(子节点);在div元素中添加“666” document.body.appendChild (oDiv);//父级.appendChild(子节点);;document.body是指向& lt; body>元素 document.documentElement.appendChild (createNode);//父级.appendChild(子节点);;document.documentElement是指向& lt; html>元素
<强>二、插入节点强>
1, <代码>列表末尾(节点)代码>也是一种插入节点的方式,还可以添加已经存在的元素,会将其元素从原来的位置移到新的位置。
2, <代码>方法(a, b) 代码>是参照节点,意思是一节点会插入b节点的前面。
var oDiv =, document.createElement (“div");//创建一个div元素,因为是文档对象的方法。 var oDiv1 =, . getelementbyid (“div1"); document.body.insertBefore (oDiv oDiv1);//在oDiv1节点前插入新创建的元素节点 ul.appendChild (ul.firstChild);,//把ul的第一个元素节点移到ul子节点的末尾
<强>三,删除,移除节点强>
1, <代码> removeChild(节点)代码>删除一个节点,用于移除删除一个参数(节点)。其返回的被移除的节点,被移除的节点仍在文档中,只是文档中已没有其位置了。
var removeChild =, document.body.removeChild (div1);//移除文档对象的方法div1
<强>四,替换节点强>
1,方法<代码>(插入的节点,被替换的节点)> 代码,用于替换节点,接受两个参数,第一参数是要插入的节点,第二个是要被替换的节点。返回的是被替换的节点。
var 方法的=,document.body.replaceChild (div1 div2);,//将div1替换div2
<强>五、查找节点强>
1,子节点的时候存在缺陷包含文本节点和元素节点的子节点。
for (var 小姐:=,0;,小姐:& lt;, oList.childNodes.length;,我+ +),{//oList是做的ul的对象。//nodeType是节点的类型,利用nodeType来判断节点类型,再去控制子节点//nodeType==1,是元素节点//nodeType==3,是文本节点 if 才能;(oList.childNodes[我].nodeType ==, 1),{//查找到oList内的元素节点 ,,,console.log (oList.childNodes[我]);//在控制器日志中显示找到的元素节点 ,,} }
2,
,儿童也可以获取子节点,而且兼容各种浏览器。包括IE6-8
B, parentNode:获取父节点
var oList =, . getelementbyid(& # 39;列表# 39;);//oList是做的ul的对象 var oChild=. getelementbyid(& # 39;孩子# 39;);//oChild是做的ul中的一个李的对象//通过子节点查找父节点//parentNode:获取父节点 console.log (oChild.parentNode);//在控制器日志中显示父节点 console.log (oList.children);//在控制器日志中显示oList子节点 console.log (children.length)//子节点的个数
3
,写上;firstElementChild查找第一个子节点。此存在<强>浏览器兼容问题强>:这个是IE兼容,firstElementChild是非IE兼容。
//查找第一个子节点的封装函数 function 接着(避署),{ if 才能;(ele.firstElementChild),{//如果该条件是真正的则在该浏览器(或非IE)中兼容 ,,,return ele.firstElementChild; ,,},{else ,,,return ele.firstChild; ,,} } 写上(oList) .style.background =, & # 39;红色# 39;;//将获得的节点的背景变成红色JavaScript中有哪些常见的DOM节点操作