javascript DOM基本操作
1.DOM(Document Object Model 文档对象模型)
2.节点：
文档节点：document 元素节点：html、head、body、title、meta、h1、p等属性节点：attr文本节点：text2.1节点获取
documen.getElementById("元素ID") //返回含有该ID的元素document.getElementsByName("元素name属性") //返回带有指定名称元素的集合document.getElementsByTagName("元素标签") //返回指定元素的集合2.2属性节点处理
elementNode.hasAttribute("attrName") // 检测所选元素是否有attrName属性 eg:documen.getElementById("nav").hasAttribute("class")elementNode.getAttribute("attrName") //获取元素attrName属性的值elementNode.setAttribute("attrName","attrValue") //设置属性，创建或改变元素属性值elementNode.removeAttribute("attrName") //移除属性注意：在获取属性和移除属性时，用hasAttribute()方法判断此属性是否存在2.3文本节点处理
通过innerHTML属性获取和设置文本节点属性documen.getElementById("content").innerHTML="<p>hello!</p>"3遍历DOM
父节点.firstChild //获取元素的首个子节点父节点.lastChild //获取元素最后一个子节点父节点.childNode //获取元素子节点列表子节点.parentNode // 获取已知节点父节点兄弟节点.previousSibling //获取已知节点前一个节点兄弟节点.nextSibling //获取已知节点后一个节点注意：使用以上属性（除parentNode）,有些浏览器将空格作为文本节点，因此浏览器就会将文本节点当做元素的兄弟节点来处理。通过添加nodeType判断，若下一个或上一个是文本节点则继续寻找，直到找到元素节点nodeType 获得标签类型，nodeName 获得标签名称元素节点的nodeType属性值是1，属性节点的nodeType属性值为2，文本节点的nodeType属性值3如果该nextSibling.nodeName = #text，则通过nextSibling.nodeValue来获知其文本值；否则，可以通过nextSibling.innerHTML等其他常用标签元素属性来获取其属性4.节点操作
4.1创建节点
document.createElement(元素标签) // 创建元素节点document.createAttribute(元素属性) // 创建属性节点document.createTextNode(文本内容) // 创建文本节点4.2插入节点
appendChild(所添加的新节点) //向节点的子节点末尾添加子节点insertBefore(所要添加的新节点，已知节点) //在已知子节点前面插入子节点4.3替换节点
replaceChild(要插入新元素，将要替换元素)4.4复制节点
需要被复制节点.cloneNode(true/false) //创建指定节点副本，true复制当前节点及其子节点；false仅复制当前节点不包括文本4.5删除节点
removeChild(要删除节点) // 删除指定节点 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <ul id="tar_area"><li id="p1">1</li><li id="p2">2</li><li id="p3">3</li><li id="p4">4</li><li id="p5"></li>5</ul> <input type="button" value="点我有惊喜！" onclick="test()" /> <script> //向DOM中添加新元素 var targetArea=document.getElementById("tar_area"); var p1=document.getElementById("p1"); var p2=document.getElementById("p2"); var p3=document.getElementById("p3"); var p4=document.getElementById("p4"); var p5=document.getElementById("p5"); //添加节点 var p=document.createElement("p"); //创建元素 var text=document.createTextNode("这是js动态创建的元素"); //创建文本节点 p.appendChild(text); //向节点的子节点末尾添加子节点 targetArea.appendChild(p); //替换节点 targetArea.replaceChild(p,p2); //复制节点 var newNode=p3.cloneNode(true); //默认为true targetArea.replaceChild(newNode,p1); //动态删除元素 targetArea.removeChild(p4); function test(){ var tar=document.getElementById("tar_area"); var p5=document.getElementById("p5"); var px=document.createElement("p"); var txt=document.createTextNode("hello!"); px.appendChild(txt); tar.insertBefore(px,p5); //在已知节点前面插入子节点 } </script> </body> </html>
转载于:https://www.cnblogs.com/duduSunny/p/4117936.html
相关资源：JavaScript基础DOM操作--基础版