一:定义
dom:文档对象模型。
dom是针对HTML和
1:childNodes(返回当前节点的子节点列表)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>dom1</title> <style> li{ height: 30px; border: 1px solid #000; } </style></head><body> <ul id="uls"> <li></li> <li></li> </ul></body><script> var uls = document.getElementsByTagName("ul")[0]; //chrome:5 ,ie>=9 :5; ie<=8 :2 alert(uls.childNodes.length);</script></html>
chrome弹出5(),为什么是5?如图:
3个文本节点(红,蓝,黑),2个元素节点(方框圈起来的)。ie5-8弹出2,说明其中节点并不包含文本节点。
如果如下写**报错(文本节点不能设置background):
for(var i = 0; i <= uls.childNodes.length; i++){ uls.childNodes[i].style.background = "red"; }
兼容写法:当节点为元素节点的时候设置其背景色
for(var i = 0 ; i <= uls.childNodes.length ; i++){ //nodeType -->1元素节点 if(uls.childNodes[i].nodeType == 1){ uls.childNodes[i].style.background = "red"; } }
2:children(该属性返回节点的子元素--不包含文本节点)
alert(uls.children.length); //chrome和ie 都为2 for(var i = 0 ; i <= uls.children.length ; i++){ uls.children[i].style.background = "red"; }
注意:不论是children、childNodes,子节点只算第一层的,子节点中的元素不算在其中(那个是孙子节点)。
3:parentNode(返回指定节点的父节点)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>dom1</title> <style> li{ height: 30px; border: 1px solid #000; } </style></head><body> <ul id="uls"> <li></li> <li></li> </ul></body><script> var uls = document.getElementById("uls"); alert(uls.parentNode);</script></html>
4:offsetParent(返回最近的祖先定位元素)
定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>dom1</title> <style> #wrapper{ position: relative; width: 200px; height: 200px; } #inner{ position: absolute; } </style></head><body> <div id="wrapper"> <div id="noPosition"> <div id="inner"></div> </div> </div></body><script> var sonNode = document.getElementById("inner"); alert(sonNode.offsetParent.id);</script></html>
如果容器元素未设置css定位,则返回body或html
5:firstChild (firstElementChild)
兼容问题:
ie6~8: firstChild
其他浏览器: firstElementChild
兼容写法:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>dom1</title></head><body> <ul id="uls"> <li></li> <li></li> <li></li> </ul></body><script> var uls = document.getElementById("uls"); if(uls.firstElementChild){ uls.firstElementChild.style.background = "red"; }else{ uls.firstChild.style.background = "red"; }</script></html>
6:lastChild (lastElementChild)
兼容问题:
ie6~8: lastChild
其他浏览器: lastElementChild
用法同firstChild。
7:nextSibling(nextElementSibling)
兼容问题:
ie6~8: nextSibling
其他浏览器: nextElementSibling
用法同上
8:previousSibling(previousElementSibling)
兼容问题:
ie6~8: previousSibling
其他浏览器: previousElementSibling
用法同上
9:getAttribute,setAttribute,removeAttribute
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>dom</title></head><body> <input type="text" id="btn1" /> <input type="button" value="按钮" id="btn2" name="2" /></body><script> // 用dom的方式操纵元素属性 var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2"); btn2.onclick = function(){ // btn1.value = "1234"; // btn1["value"] = "1234" var btn2Value = btn2.getAttribute('value'); alert(btn2Value); btn1.setAttribute("value",btn2Value); btn2.removeAttribute("value"); } // 获取:getAttribute(属性名称) // 设置:setAttribute(属性名称,值) // 删除:removeAttribute(属性名称)</script></html>
10:createElement(创建元素节点)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <ul id="uls"> </ul> <input type="button" value="创建li" /></body><script> var uls = document.getElementsByTagName("ul")[0]; var btns = document.getElementsByTagName("input")[0]; btns.onclick = function(){ var lis = document.createElement("li"); uls.appendChild(lis); // 父级.appendChild(创建的元素); }</script></html>
11:createTextNode(创建文本节点)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="main"></div></body><script> var main = document.getElementById("main"); var textNode = document.createTextNode("<h1>wefwedf</h1>"); main.appendChild(textNode);</script></html>
结果:
12:appendChild(指定元素节点的最后一个子节点之后添加节点)
父级.appendChild(子节点)。
用法见上
13:insertBefore(在已有的子节点前插入一个新的子节点)
父级.insertBefore(子节点,在谁之前)。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="text" /> <input type="button" value="插入元素" /> <ul> </ul></body><script> var txt = document.getElementsByTagName("input")[0]; var btn = document.getElementsByTagName("input")[1]; var uls = document.getElementsByTagName("ul")[0]; // btn.onclick = function(){ // var lis = document.createElement("li"); // lis.innerHTML = txt.value; // uls.appendChild(lis); // } // 父级.appendChild(子节点); // 父级.insertBefore(子节点,在谁之前); btn.onclick = function(){ var lic = document.createElement("li"); var lis = document.getElementsByTagName("li"); lic.innerHTML = txt.value; uls.insertBefore(lic,lis[0]);// ie下会报错,因为初始时没有li。 }</script></html>
解决上面的栗子初始化时ie8及以下报错,兼容写法:
btn.onclick = function(){ var lic = document.createElement("li"); var lis = document.getElementsByTagName("li"); lic.innerHTML = txt.value; if(lis.length == 0){ uls.appendChild(lic); }else{ uls.insertBefore(lic,lis[0]); } }
14:removeChild(删除父元素中的子节点)
父级.removeChild(子节点)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>dom9</title> <style> span{ color: red; } </style></head><body> <ul id="uls"> <li>jdjdjdjd<span>删除</span></li> <li>jdsdcsd<span>删除</span></li> <li>jdcsdsddjd<span>删除</span></li> <li>12123<span>删除</span></li> <li>343434jdjd<span>删除</span></li> </ul></body><script> var uls = document.getElementById("uls"); var spans = document.getElementsByTagName("span"); for(var i = 0; i<= spans.length; i++){ spans[i].onclick = function(){ uls.removeChild(this.parentNode); } } // removeChild 删除父元素中的子节点。</script></html>
15:cloneNode(复制当前节点或复制当前节点及其子节点)
复制的节点.cloneNode(false) -->复制当前节点
复制的节点.cloneNode(true) -->复制当前节点及其子节点
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width: 100px; height: 100px; background: red; } #div1{ width: 200px; height: 200px; border: 5px solid #000; } </style></head><body> <div id="box"> 这个是box </div> <div id="div1"> 这个是div1 </div> <input type="button" value="复制" id="btn" /></body><script> var btn = document.getElementById("btn"); var box = document.getElementById("box"); var div1 = document.getElementById("div1"); btn.onclick = function(){ var clonbox = box.cloneNode(false); div1.appendChild(clonbox); // var clonbox1 = box.cloneNode(true); // div1.appendChild(clonbox1); }
16:replaceChild(替换当前父节点中的指定子节点)
父节点.replaceChild(新插入的节点,要替换的节点)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>替换节点</title></head><body> <div id="main"> <div></div> <div></div> <div></div> </div></body><script> var main = document.getElementById("main"); var spans = document.createElement("span"); // replaceChild()方法替换节点 // 参数一:新插入的节点; // 参数二:要替换的节点; // 父节点.replaceChild(新插入的节点,要替换的节点) main.replaceChild(spans,main.children[1])</script></html>
先总结到这,后边再补充。。。
原标题:javascript DOM小结
关键词:JavaScript