DOM遍历:即查找元素如果你通过getElementById找到一个元素,然后又想得到该元素的父元素,子元素,兄弟元素.则需要用到DOM遍历查找父元素obj.parentNode:获取当前元素的父元素查找子元素childNodes\firstChild\lastChild获取所有的子节点,包括元素节点和文本节点children\firstElementChild\lastElementChild只获取元素节点如果要获取任意一个子节点可以使用children[i]的方式,i从0开始取值查找兄弟元素previousSibling/nextSibling前一个兄弟元素/后一个兄弟元素previousElementSibling/nextElementSiblinginnerHTML和innerText使用innerHTML可以很方便地获取和设置一个元素的"内部元素""使用innerText可以很方便地获取和设置一个元素的"内部文本"
01查找父元素
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">table{border-collapse: collapse;}table,tr,td{border:1px solid gray;}</style><script type="text/javascript">window.onload=function(){var oTd=document.getElementsByTagName('td');for (var i=0;i<oTd.length;i++){oTd[i].onclick=function(){var oParent=this.parentNode;oParent.style.color='white';oParent.style.backgroundColor='red';};};}</script></head><body><table border="" cellspacing="" cellpadding=""><caption>考试成绩表</caption><tr><td>小明</td><td>80</td><td>80</td><td>90</td></tr><tr><td>小红</td><td>70</td><td>60</td><td>90</td></tr><tr><td>小强</td><td>80</td><td>100</td><td>90</td></tr><tr><td>小杰</td><td>100</td><td>80</td><td>90</td></tr></table></body></html>
02childNode和children的比较
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript">window.onload=function(){var oUl=document.getElementById('list');var childNodeLen=oUl.childNodes.length;var childrenLen=oUl.children.length;// 结果为7,3,childNodes包括3个元素节点和4个文本节点每一个换行都是空白节点alert("childNodes的长度为:"+childNodeLen +'\n'+"children的长度为:"+childrenLen);}</script></head><body><ul id="list"><li>html</li><li>css</li><li>javascript</li></ul></body></html>
03lastchild举例
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript">window.onload=function(){var oBtn = document.getElementById('btn');var oUl = document.getElementById('list');oBtn.onclick=function(){// oUl.removeChild(oUl.lastChild)// 需要点两次才能删除一个li,因为两个li之间的空格也算一个子元素// 通过判断nodeType来解决这个问题// if (oUl.lastChild.nodeType==3){// oUl.removeChild(oUl.lastChild)// oUl.removeChild(oUl.lastChild)// }else{// oUl.removeChild(oUl.lastChild)// }// 也可以使用children\firstElementChild\lastElementChild// oUl.removeChild(oUl.lastElementChild)oUl.removeChild(oUl.children[0])}}</script></head><body><ul id="list"><li>html</li><li>css</li><li>javascript</li><li>jquery</li><li>vue</li></ul><input type="button" name="" id="btn" value="删除" /></body></html>
04查找兄弟元素举例
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript">window.onload=function(){var oBtn=document.getElementById('btn');var oUl=document.getElementById('list');oBtn.onclick=function(){var preElement=oUl.children[2].previousElementSiblingoUl.removeChild(preElement)}}</script></head><body><ul id="list"><li>html</li><li>css</li><li>javascript</li><li>jquery</li><li>vue</li></ul><input type="button" name="" id="btn" value="删除" /></body></html>
05innerhtml和innertext举例
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript">window.onload=function(){// 1使用appendChild的方式/*oImg = document.createElement('img');oImg.className='pic';oImg.src="./img/1112.jpg"oImg.style.border="1px solid solver"document.body.appendChild(oImg)*/// 2使用innerHTML的方式document.body.innerHTML='<img class="pic" src="./img/1112.jpg" style="border:1px solid solver" />'oDiv=document.createElement('div')document.body.appendChild(oDiv)oDiv.innerText='这是一段用innerText添加的文本'}</script></head><body></body></html>
06获取innerhtml和innertext
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript">window.onload=function(){oP=document.getElementById('content');document.getElementById('txt1').value=oP.innerHTML;document.getElementById('txt2').value=oP.innerText;// 可知innerHTML获取的是元素内部所有的元素,包括文本内容和标签// 而innerText获取的仅仅是文本内容}</script></head><body><p id="content"><strong style="color:hotpink">我爱张浅潜</strong></p>innerHTML是:<input type="text" name="" id="txt1" value="" /><br>innerText是:<input type="text" name="" id="txt2" value="" /></body></html>
业精于勤荒于嬉戏喜西兮!
