首页 > 代码库 > javascript DOM操作HTML文档
javascript DOM操作HTML文档
文档对象模型（DOM）是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准。W3C将文档对象模型定义为：是一个能让程序和脚本动态 访问和更新文档内容、结构和样式的语言平台。提供了标准的HTML和XML对象集，并有一个标准接口来访问并操作他们，即任何一个 html 元素可以使用 JavaScript DOM 动态访问和控制。
1. DOM概述
文档对象模型定义了JavaScript可以进行操作的浏览器，描述了文档对象的逻辑结构及各个功能组件的标准接口。主要包括以下内容：
- 核心JavaScript语言参考(数据类型、运算符、基本语句、函数等)；
- 与数据类型有关的对象（String,Math,Array,Date等数据类型）；
- 浏览器对象（Window, Location,Histroy, Navigator）；
- 文档对象（document,images,form等）；
小知识：JavaScript使用两种对象模型：浏览器对象模型（BOM）和文档对象模型（DOM），前者提供了访问浏览器的各个功能组件，如浏览器对象 本身，浏览器历史等操作方法；后者提供了访问浏览器窗口内容，如文档，图片等各种HTML元素以及这些元素包含的文档操作方法。
2.基本的文档对象模型
基本的文档对象模型提供了一个非常基础的文档对象层次结构，在这个层次结构中，Window位于对象层次的最高级，包含全部的Document对象，同时 具有其他对象所没有的属性与方法，Document对象即为浏览器载入的HTML页面，其上的链接和表单单元元素都作为有属性、方法和事件处理程序的元素 对象来对待。
3. W3C DOM
DOM规范必须适应HTML的已知结构，同时适应XML的未知结构，DOM的概念主要有以下几个方面：
- 核心DOM：指定类属类型，将带有标记的文档看成树状结构并据此对文档进行相关操作。
- DOM事件：使用者所熟悉的键盘事件，鼠标事件，同时还包括DOM特有的事件，当操作文档对象中的各元素对象时发生。
- HTML DOM：提供用于操作HTML文档的以及类似于JavaScript对象模型语法的功能部件，在核心DOM的基础上支持对所有HTML元素进行操作。
- XML DOM:提供操作XML文档的特殊方法。
- DOM CSS:提供了脚本编程实现CSS的接口。
4.文档对象的产生过程
当载入HTML文档时，浏览器解释其代码，当遇到自身支持的HTML元素对象对应的标记时，就按照HTML文档载入的顺序在内存中创建这些对象，而不管 JavaScript脚本是否真正的运行这些对象。对象创建后，浏览器为这些对象提供专供JavaScript脚本使用的可选属性，方法和处理程序。通过 这些属性、方法和处理程序，Web开发人员可以动态操作HTML文档内容。
小知识：文档对象模型具有层次结构，由于JavaScript是基于对象的编程语言，而不是面向对象的编程语言，所以在JavaScript编程中必须考 虑类、实例及继承等术语，只需要充分理解不同浏览器之间文档对象的层次结构，就可以利用JavaScript准确定位并操作该对象。
5.DOM对象的节点
在W3C规范中，每个容器、元素或文本块都看做一个节点；当一个容器包含另外一个容器时，对应的节点之间有父子关系。DOM中定义了HTML文档中6中相关的节点类型。
节点类型数值 | 节点类型 | 附加说明 | 实例 |
1 | 元素（Element） | HTML标记元素 | <h1></h1> |
2 | 属性（Attribute） | HTML标记元素的属性 | Color=”red” |
3 | 文本（Text） | HTML标记文本段 | Hello World |
4 | 注释（Comment） | HTML注释段 | <!--Comment--> |
5 | 文档（Document） | HTML文档根对象 | <Html> |
6 | 文档类型 | 文档类型 | <!DOCTYPE HTML …> |
小知识：DOM节点数中的节点有元素节点、文本节点和属性节点三种不同的节点类型，
- 元素节点：在HTML文档中，各HTML元素如<body>、<p>、<ul>等构成文档结构模型的一个元素对象。在节点树中，每个元素对象又构成一个节点。元素对象可以包含其他的元素。
- 文本节点：在节点树中，元素节点构成树的枝条，而文本节点构成树的叶子。文本节点总是包含在元素节点的内部，但是并非所有的元素节点都包含或直接包含文本节点。
- 属性节点：HTML文档中的元素都或多或少的有一些属性，既便于准确、具体的描述相应的元素，又便于进行进一步操作。
小知识：并非所有的元素都包含属性，但所有的属性都必须在元素的内部。
6.DOM对象的属性
属性一般定义对象的当前设置，在DOM模型中，文档对象有许多初始属性，如果标记没有现显式的设置属性，浏览器使用默认值来给标记的属性值和相应的JavaScript文本属性赋值。DOM文档对象主要有以下重要属性：
节点属性 | 说明 |
nodeName | 返回当前节点的名字 |
nodeType | 返回与节点类型对应的值 |
nodue | 返回当前节点的值 |
parentNode | 应用当前节点的父节点，如果存在的话 |
childNodes | 访问当前节点的子节点的集合，如果存在的话 |
firstChild | 对标记的子节点集合中的第一个子节点的引用。如果存在的话 |
lastChild | 对标记的子节点集合中的最后一个子节点的引用，如果存在的话 |
previousSibling | 对同属一个父节点的前一个兄弟节点的应用 |
nextSibling | 对同属一个父节点的下一个兄弟节点的引用 |
Attributes | 返回当前节点属性的列表 |
owenerDocument | 指向包含节点的HTML document对象 |
小知识：firstChild和lastChild指向当前标记的第一个子节点和最后一个子节点，但是大多数情况下使用childNodes集合，使用循环遍历子节点，如果没有子节点。则childNodes为0。
6.DOM的基本操作
对DOM的基本操作分为，对DOM对象的操作、属性的操作、节点的操作。
6.1 对象的基本操作
DOM模型提供了两种方法用于获取对象，即getElementById()和getElementByTagName()两种方法。
●getElementById()用于返回指定id属性值的元素节点对象。对应着文档里的一个特定的元素节点。
●getElementByTagName()用于返回文档中指定tag标签名称的元素对象数组，与上一个方法不同，该方法返回的是具有相同标签的对喜爱那个数组
6.2 对属性的操作
DOM模型提供了相应的方法，来对获取目标对象的属性值、添加目标对象的属性值以及删除特定的属性值。
方法 | 说明 |
getAttribute(attribute) | 用于返回目标对象指定属性名称的属性值 |
setAttribute(attribute, value) | 用于修改任意元素指定属性名称的属性值 |
removeAttribute(attribute) | 用于删除任意节点的属性 |
6.3 对节点的操作
由于节点具有易于操作，对象明确等特点，DOM提供了非常丰富的节点处理方法来对节点进行操作，JavaScript的节点有对象节点和文本节点和属性节点
操作类型 | 方法原型 | 附加说明 |
生成节点 | createElement(tagName) | 创建由tagName指定类型的标记 |
createTextNode(string) | 创建包含字符串的文本节点 | |
createAttribute(name) | 创建由name指定的属性 | |
createComment(string) | 创建由string指定的文本注释 | |
插入生成节点 | appendChild(newChild) | 添加子节点newChild到目标节点上 |
insertBefore(newChild,target) | 将新节点newChild添加到目标节点前 | |
复制节点 | cloneNode(bool) | 复制自身， bool指定是否复制子节点 |
删除替换节点 | removeChild(childName) | 删除由childName指定的节点 |
replaceChild(newchild,old) | 新节点替换旧节点 | |
文本节点操作 | insertData(offset, String) | 从offset指定的位置插入string |
appendData(string) | 将string插入到文本节点的末尾处 | |
deleteDate(offset,count) | 从offset起删除count个字符 | |
replaceData(off,count,string) | 从off将count个字符用string替代 | |
splitData(offset) | 从offset起将文本节点分成两个节点 | |
substring(offset,count) | 返回由offset起的count个节点 |
7. 案例
7.1 常用DOM
//通过某种方式来获得HTML中相应的标签//通过标签id属性访问某一元素var objElement = document.getElementById("button1"); //button1为标签的idalert(objElement.tagName); //通过标签访问一组元素(数组)var objElements = document.getElementsByTagName("input"); //input为HTML标签alert(objElements[0].tagName); //通过name属性访问一组元素(数组)var objElementsN = document.getElementsByName("button"); //button为标签的namealert(objElementsN[0].tagName);//从元素数组中取出某个元素的方法var obj = objElementsN[0];var obj = objElementsN.button1; //button1为标签的idvar obj = objElementsN.item(0);//通过某个元素来访问其父元素，子元素或同级元素var obj = objElement.parentNode; //父元素，只能有一个var obj = objElement.previousSibling; //同层上一个元素var obj = objElement.nextSibling; //同层下一个元素var obj = objElement.childNodes; //子元素数组，子元素可能有多个标签元素var obj = objElement.firstChild; //第一个子元素var obj = objElement.lastChild; //最后一个子元素//访问元素内的内容（内容：开始标签和结束之间的字符串；内容为HTML(HTML标签的嵌套)，需要解释；内容为Text，直接显示；）objElement.innerHTML：标签修饰的内容为HTMLobjElement.innerText：标签修饰的内容当成文本objElement.firstChild.nodeValue:相当于innerText属性//访问元素的属性值，也可以设置alert(objElement.id); //元素名.属性名;这样就可以操作元素的属性值了objElement.setAttribute("属性名",属性值);//增加新的节点var objImg = document.createElement("img"); //创建一个新元素objImg.setAttribute("src","a.gif"); //为新元素设置相应的属性值objFather.appendChild(objImg); //为objFather元素添加一个子元素element.appendChild();
7.2 根节点属性和方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>根节点属性和方法</title> <script type="text/javascript"> function DOMTest(){ //1、属性 //获得文档根元素节点 var htmlRootElement = document.documentElement; //2、方法 //第一类方法：获取元素节点 //a、通过id属性的属性值获取元素节点 var divNode = document.getElementById("div1"); //b、通过标签名获取元素数组 var divNodes = document.getElementsByTagName("div"); //通过name属性的属性值获取元素数组 //var divNodes2 = document.getElementsByName("div"); //第二类方法：创建其它各种类型的节点 //a、创建元素节点 var newDivNode = document.createElement("div"); //b、创建文本节点 var newTextNode = document.createTextNode("This is a new TextNode!"); //c、创建属性节点 var newAttributeNode = document.createAttribute("value"); //d、创建注释节点 var newCommentNode = document.createComment("这个是注释信息节点"); alert(""); } </script> </head> <body> <input type="button" value="http://www.mamicode.com/测试" onclick="javascript:DOMTest();"/> <div id="div1">123123</div> <input type="text" id="inputtext"/> <div id="div2"> 456 <div>789</div> <div id="a">AAA</div> </div> <input type="button" value="http://www.mamicode.com/点击" id="clic"/> </body></html>
7.3 元素节点属性和方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>元素节点属性和方法</title> <script type="text/javascript"> function DOMTest(){ //1、属性 //A、DOM的特有属性 //a、返回元素节点的标签名(大写) //a1、获得指定的元素节点 var divNode1a1 = document.getElementById("div1"); //a2、获得元素节点的标签名(大写) var tagNameElement1a2 = divNode1a1.tagName; //测试 alert(tagNameElement1a2); //B、操作字符串.格式：元素节点.属性名 = 属性值 //a、获得属性值 //a1、获得元素节点 var textNodeaa1 = document.getElementById("inputtext"); //a2、取出元素节点相应的属性值 var attValue =http://www.mamicode.com/ textNodeaa1.value; //测试 alert(attValue); //b、设置属性值 //a1、获得元素节点 var textNodeba1 = document.getElementById("inputtext"); //a2、设置元素节点相应的属性值 textNodeba1.value="http://www.mamicode.com/name"; //2、方法 //第一类方法：获取该元素节点的子孙元素节点 //a1、获取元素节点 var divNode2a1 = document.getElementById("div2"); //a2、通过元素节点获取该元素内的子孙节点(直接通过document也可以) var divNodes2a2 = divNode2a1.getElementsByTagName("div"); //第二类方法：操作元素节点中所包含的属性 //A、属性节点j //a、添加属性节点 //a1、创建属性节点：根据属性名创建一个确定的属性节点 var textAttributeNodeja1 = document.createAttribute("value"); //a2、设置属性节点的属性值：属性节点为属性名和属性值(value) textAttributeNodeja1.value = "http://www.mamicode.com/新添加的属性节点值"; //a3、添加属性节点：向指定元素节点上添加属性节点 //a31、获取指定元素节点 var textNodeja3 = document.getElementById("inputtext"); //a32、添加属性节点 textNodeja3.setAttributeNode(textAttributeNodeja1); //b、获取属性节点 //b1、获取指定的元素节点 var textNodejb1 = document.getElementById("inputtext"); //b2、获取指定(属性名)的属性节点 var textAttributeNodejb2 = textNodejb1.getAttributeNode("value"); //b3、获取属性节点的值：读取属性节点的属性值 var attValuejb3 = textAttributeNodejb2.value; //测试 alert(attValuejb3); //c、删除指定的属性节点 //c1、获取元素节点 var textElementNodejc1 = document.getElementById("inputtext"); //c2、获取(创建)相应的属性节点 var textAttributeNodejc2 = document.createAttribute("id"); //c3、删除指定的属性节点 textElementNodejc1.removeAttributeNode(textAttributeNodejc2); //B、属性值z //a、添加(设置)属性值 //a1、获取元素节点 var textNodeza1 = document.getElementById("inputtext"); //a2、设置相应的属性值 textNodeza1.setAttribute("value","另一种方式添加节点属性"); //b、获取属性值 //b1、获取元素节点 var textNodezb1 = document.getElementById("inputtext"); //b2、获取相应的属性值 var attValuezb2 = textNodezb1.getAttribute("value"); //测试 alert(attValuezb2); //c、删除指定属性 //c1、获取元素节点 var textElementNodezc1 = document.getElementById("inputtext"); //c2、删除指定属性的属性值 textElementNodezc1.removeAttribute("id"); alert(""); } </script> </head> <body> <input type="button" value="http://www.mamicode.com/测试" onclick="javascript:DOMTest();"/> <div id="div1">123123</div> <input type="text" id="inputtext" value="http://www.mamicode.com/测试数据"/> <div id="div2"> 456 <div>789</div> <div id="a">AAA</div> </div> <input type="button" value="http://www.mamicode.com/点击" id="clic"/> </body></html>
7.4 属性节点属性和方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>属性节点的属性</title> <script type="text/javascript"> function DOMTest(){ //A、获得属性节点 //a1、获取元素节点。通过根节点，依据id，获得相应的元素节点 var textElementNodeAa1 = document.getElementById("inputtext"); //a2、获取属性节点。通过元素节点，依据属性名，获得相应的属性节点 var textAttributeNodeAa2 = textElementNodeAa1.getAttributeNode("value"); //B、获得属性节点的属性名 var attNameB = textAttributeNodeAa2.name; //测试 alert(attNameB); //C、获得属性节点的属性值 var attValueC = textAttributeNodeAa2.value; //测试 alert(attValueC); } </script> </head> <body> <input type="button" value="http://www.mamicode.com/测试" onclick="javascript:DOMTest();"/> <div id="div1">123123</div> <input type="text" id="inputtext" value="http://www.mamicode.com/测试数据"/> <div id="div2"> 456 <div>789</div> <div id="a">AAA</div> </div> <input type="button" value="http://www.mamicode.com/点击" id="clic"/> </body></html>
7.5 基本属性和方法的联系
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>所有节点的属性和方法</title> <script type="text/javascript"> function DOMTest(){ //属性 //A、第一类 //a、返回节点上所有属性节点对象的数组。虽然所有节点都有这个属性，但是，只有元素有意义 //a1、获得元素节点 var buttonElementNodeAa1 = document.getElementById("clic"); //a2、获得元素节点上所有属性节点 var buttonAttributesNoteAa2 = buttonElementNodeAa1.attributes; //B、第二类 //a、节点的类型 //a1、获得相应的节点,以属性节点为例 var divElementNodeBa1 = document.getElementById("a"); var divAttributeNodeBa1 = divElementNodeBa1.getAttributeNode("id"); //a2、节点的类型 var divNodeType = divAttributeNodeBa1.nodeType; //测试 alert(divNodeType); //b、节点的名字 //b1、获得相应的节点，以属性节点为例 var divElementNodeBb1 = document.getElementById("a"); var divAttributeNodeBb1 = divElementNodeBb1.getAttributeNode("id"); //b2、获得节点的名字 var divNodeName = divAttributeNodeBb1.nodeName; //测试 alert(divNodeName); //c、节点的内容 //c1、获得相应的节点，以属性节点为例 var divElementNodeBc1 = document.getElementById("a"); var divAttributeNodeBc1 = divElementNodeBc1.getAttributeNode("id"); //c2、获得节点的内容(vlaue值) var divAttributeValueBc2 = divAttributeNodeBc1.nodeValue; //测试 alert(divAttributeValueBc2); //C、第三类(帮助我们在DOM树中进行遍历) //a、一个元素节点里面的孩子节点，可以是文本节点，注释节点，元素节点。“节点”和“节点”直接可以是兄弟，和父子的关系 //获得元素节点 var divElementNodeCc1 = document.getElementById("div2"); //0、获得该元素节点中所有的元素节点。子一代节点之间如果有换行，空格时，这些会被当做文本节点 var divChildElementsNodeCa2 = divElementNodeCc1.childNodes; //1、返回当前元素节点子一代的第一个子节点 var divFirstElementNode = divElementNodeCc1.firstChild; //2、返回当前节点的父节点 var divParentNode = divFirstElementNode.parentNode; //3、返回该节点的下一个兄弟节点 var divNextSibling = divFirstElementNode.nextSibling; //4、返回当前元素节点子一代的最后一个节点 var divLastElementNode = divElementNodeCc1.lastChild; //5、返回当前节点的上一个兄弟节点 var divPreviousSibling = divLastElementNode.previousSibling; //方法 //获得元素节点 var divElementNodef = document.getElementById("a"); //1、当前元素节点是否拥有子节点，有则true，无则false var flag = divElementNodef.hasChildNodes(); //测试 alert(flag); //2、给当前节点增加一个子节点(所有字节的末尾) //创建文本节点 var textTextNode21 = document.createTextNode("元素节点的子节点的末尾添加新的子节点"); //创建元素节点，并设置其属性值 var textElementNode21 = document.createElement("input"); textElementNode21.type="text"; textElementNode21.value="元素节点的子节点的末尾添加新增的子节点"; textElementNode21.id = "newText1"; //添加文本节点 divElementNodef.appendChild(textTextNode21); //添加元素节点 divElementNodef.appendChild(textElementNode21); //3、在当前节点的指定子节点的前面插入新的节点 //创建文本节点 var textTextNode31 = document.createTextNode("向元素节点的指定子节点前插入文本节点"); //创建元素节点 var textElementNode31 = document.createElement("input"); textElementNode31.type="text"; textElementNode31.value="插入元素节点"; textElementNode31.id="newText2"; //添加文本节点 divElementNodef.insertBefore(textTextNode31,textTextNode21); //添加元素节点 divElementNodef.insertBefore(textElementNode31,textTextNode31); //4、删除元素节点中指定的子节点，同时返回删除的子节点 var removeElementNode = divElementNodef.removeChild(textElementNode31); //5、用另一个节点替换当前节点的一个子节点，并且返回指定的子节点 //创建一个元素节点 var buttonElementNodef5 = document.createElement("input"); buttonElementNodef5.type="button"; buttonElementNodef5.value="新加节点"; //替换之前的节点 divElementNodef.replaceChild(buttonElementNodef5,textTextNode31); //6、复制当前节点(只复制当前节点或者复制当前节点和他的子孙节点) var cloneO = divElementNodef.cloneNode(false); var cloneA = divElementNodef.cloneNode(true); alert(""); } </script> </head> <body> <input type="button" value="http://www.mamicode.com/测试" onclick="javascript:DOMTest();"/> <div id="div1">123123</div> <input type="text" id="inputtext" value="http://www.mamicode.com/测试数据"/> <div id="div2"> <!--这个有相应的节点吗？--> 文本节点1 文本节点2 <div> <input type="text" value="http://www.mamicode.com/子节点"/> </div> <div id="a">AAA</div> </div> <input type="button" value="http://www.mamicode.com/点击" id="clic"/> </body></html>
7.6 清除空文本节点——会有空文本节点，所以在获取某一节点（ul）的子节点时，需要清除空文本节点
function cleanWhitespace(element) { for (var i = 0; i < element.childNodes.length; i++) { var node = element.childNodes[i]; if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) { node.parentNode.removeChild(node); } }}
7. 7 替换节点
function replacenode() { var op = document.createElement("p"); var otext = document.createTextNode(‘世界你好‘); op.appendChild(otext); var oldop = document.getElementsByTagName(‘p‘)[0]; oldop.parentNode.insertBefore(op, oldop);}
7. 8 自动创建表格
// 方法1function fun1(){ var t = document.createElement(‘table‘); for(var i=0;i<500;i++){ var r = t.insertRow(); //插入行 for(var j=0;j<5;j++){ var c = r.insertCell();//插入列 c.innerHTML = i+","+j; if (i==5&&j==3){ c.innerHTML = "guan"; } } } document.getElementById("table1").appendChild(t); t.setAttribute(‘border‘,‘1‘); t.setAttribute(‘align‘,‘center‘);}// 方法2function fun2(){ var t = document.createElement(‘table‘); var tb = document.createElement(‘tbody‘); for(var i=0;i<500;i++){ var r = t.insertRow(); //插入行 for(var j=0;j<5;j++){ var c = r.insertCell();//插入列 var count = document.createTextNode("LAN"); if (j==4){ count = document.createTextNode("guan"); j++; } c.appendChild(count); r.appendChild(c); } tb.appendChild(r); } t.appendChild(tb); document.getElementById("table1").appendChild(t); t.setAttribute(‘border‘,‘1‘); t.setAttribute(‘align‘,‘center‘);}// 方法3function fun3(){ var flag=true; var datahttp://www.mamicode.com/= ""; data += "<table border=‘1‘ align=‘center‘ bgcolor=red ><tbody>"; for(var i=0;i<500;i++){ data += "<tr>"; for(var j=0;j<6;j++){ if (flag){ for(var j=0;j<5;j++){ data += "<td>lan</td>"; } flag=false }else{ data += "<td bgcolor=blue>guan</td>"; } } data += "</tr>"; } data += "</tbody></table>"; document.getElementById("table1").innerHTML = data;}
7.9 增删查改DOM节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>增删查改DOM节点</title> <script type="text/javascript"> var index=0; //A、末尾追加节点 function appendnode(){ //1、找到相应的元素节点F var divFElementNode = document.getElementsByTagName("div"); //2、创建容纳文本节点的元素节点S var divSElementNode = document.createElement("div"); //3、创建文本节点 index++; var textTextNode = document.createTextNode("我是新加入的节点" + index); //4、向元素节点S上添加创建的文本节点 divSElementNode.appendChild(textTextNode); //5、向元素节点F上添加创建的元素节点S divFElementNode[0].appendChild(divSElementNode); } //B、首位插入节点 function insertnode(){ //1、获得元素节点F var divFElementNode = document.getElementById("divId"); //2、获得元素节点的子节点的第一个元素节点S1 //2.1、定义接收第一个元素节点的变量 var divS1ElementNode; //2.2、获得该元素节点里的所有节点（数组） var divSElementNodes = divFElementNode.childNodes; //2.3、判断数组中的第一个元素节点 for(var i=0; i<divSElementNodes.length; i++){ if(divSElementNodes[i].nodeType == 1){ divS1ElementNode = divFElementNode.firstChild; break; } } //2.4、判断是否存在元素节点 if(divS1ElementNode == null || divS1ElementNode == undefined || divS1ElementNode == ""){ return; } //3、创建元素节点S0，用来存放创建的文本节点 var divS0ElementNode = document.createElement("div"); //4、创建文本节点S01 index++; var textS01TextNode = document.createTextNode("我是新加入的节点" + index); //5、将文本节点添加到元素节点S0里 divS0ElementNode.appendChild(textS01TextNode); //6、将元素节点S0插入到S1的前面 divFElementNode.insertBefore(divS0ElementNode,divS1ElementNode); } //C、克隆末尾元素节点，并追加 function clonenode(){ //1、找到元素节点F //1.1、相同标签名的数组 var divFElementNodes = document.getElementsByTagName("div"); //1.2、指定的元素节点 var divFElementNode = divFElementNodes[0]; //2、找到元素节点F中的最后的一个子元素节点S //2.1、定义接收最后一个子元素节点的变量 var divSElementNode; //2.2、获得F中的所有子元素节点 var divSElementNodes = divFElementNode.childNodes; //2.3、判断数组中最后的一个元素节点 for(var i=divSElementNodes.length-1; i>0; i--){ if(divSElementNodes[i].nodeType == 1){ divSElementNode = divSElementNodes[i]; break; } } //2.4、判断是否存在子元素节点 if(divSElementNode == null || divSElementNode == undefined){ return; } //3、克隆子元素节点S var cloneDivSElementNode = divSElementNode.cloneNode(true); //4、将克隆的子元素节点追加到F中 divFElementNode.appendChild(cloneDivSElementNode); } //D、移除第一个元素节点 function removenode(){ //1、找到相应的元素节点F var divFElementNode = document.getElementById("divId"); //2、找到要移除的元素节点S //2.1、定义获得第一个子元素节点 var divSElementNode; //2.2、获得F中的所有孩子节点 var divSElementNodes = divFElementNode.childNodes; //2.3、判断数组，从中等到第一个子元素节点 for(var i=0; i<divSElementNodes.length; i++){ if(divSElementNodes[i].nodeType == 1){ divSElementNode = divSElementNodes[i]; break; } } //2.4、判断是否存在子元素节点 if(divSElementNode == null | divSElementNode == undefined){ return; } //3、将S从F中移除 var deleteElement = divFElementNode.removeChild(divSElementNode); } //E、替换元素节点(第一个和最后一个交换) function replacenode(){ //找到id=divId的div var divFElementNode = document.getElementById("divId"); //找到该div里面的所有div var divSElementNodes = divFElementNode.getElementsByTagName("div"); var divLength = divSElementNodes.length; if(divLength >= 2){ var firstDiv = divSElementNodes[0]; var lastDiv = divSElementNodes[divLength -1]; var replaceNode = divFElementNode.replaceChild(firstDiv, lastDiv); divFElementNode.insertBefore(replaceNode,divSElementNodes[0]); } } </script> </head> <body> <input type="button" value="http://www.mamicode.com/追加节点" id="append" onclick="javascript:appendnode();"/> <input type="button" value="http://www.mamicode.com/插入节点" id="insert" onclick="javascript:insertnode();"/> <input type="button" value="http://www.mamicode.com/克隆节点" id="clone" onclick="javascript:clonenode();"/> <input type="button" value="http://www.mamicode.com/移除节点" id="remove" onclick="javascript:removenode();"/> <input type="button" value="http://www.mamicode.com/替换节点" id="replace" onclick="javascript:replacenode();"/> <div id="divId"></div> </body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。