DOM基础
标签 HTML
元素 css
节点 DOM
document.getElementById()
document.getElementsByTagName()
DOM：文档对象模型（Document Object Model）
区分文本节点和元素节点
fghshash <span>fhuewf</span>
nodeType节点类型 文本节点没有属性
nodetype==3 文本节点
nodetype==1元素节点
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var oUl=document.getElementById('ul1'); //ie 6-8 alert(oUl.childNodes.length); for(var i=0;i<oUl.childNodes.length;i++){ // oUl.childNodes[i].style.background='red'; //alert(oUl.childNodes[i].nodeType); //nodetype==3 文本节点 //nodetype==1元素节点 if(oUl.childNodes[i].nodeType==1){ oUl.childNodes[i].style.background='red'; }}} </script> </head> <body> <ul id="ul1"> <li></li> <li></li> </ul> </body> </html>
childNodes获取子节点 子节点只包含第一层节点
children获取子元素
根据父节点隐藏
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function() { var aA=document.getElementsByTagName('a'); for(var i=0;i<aA.length;i++){ aA[i].onclick=function(){ this.parentNode.style.display='none'; } } } </script> </head> <body> <ul id="ul1"> <li>drdfgrd<a href="javascript:;">隐藏</a></li> <li>dr秃鹰grd<a href="javascript:;">隐藏</a></li> <li>drSDR fgrd<a href="javascript:;">隐藏</a></li> <li>drdf大概grd<a href="javascript:;">隐藏</a></li> </ul> </body> </html>
点击隐藏哪一行消失
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1{ width:200px; height:200px; background: #cccccc; margin:100px; position: relative; } #div2{ width:100px; height: 100px; background: red; position: absolute; left: 50px; top: 50px; } </style> <script> window.onload=function(){ var oDiv2=document.getElementById('div2'); alert(oDiv2.offsetParent); //offsetParent获取元素在页面上的实际位置 } </script> </head> <body> <div id="div1"> <div id="div2"> </div> </div> </body> </html>
首尾子节点
firstChild firstElementChild
lastChild lastElementChild
兄弟节点
nextSibling nextElementSibling
previousSibling previousElementsSibling
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function () { var oUl=document.getElementById('ul1') //ie 6-8 oUl.firstChild.style.background='red'; //高级浏览器 oUl.firstElementChild.style.background='red'; if(oUl.firstElementChild){ oUl.firstElementChild.style.background='red'; } else{ oUl.firstChild.style.background='red'; } }; </script> </head> <body> <ul id="ul1"> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var oTxt=document.getElementById('txt1'); var oBtn=document.getElementById('btn1'); oBtn.onclick=function(){ // oTxt.value='wefjk'; //oTxt['value']="ydgeuy"; oTxt.setAttribute('value','suifhi' ); } } </script> </head> <body> <input id="txt1" type="text"/> <input id="btn1" type="button" value="按钮" /> </body> </html>
点击按钮出现属性值
setAttribute（‘属性名’，‘属性值’）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var oUl=document.getElementById('ul1'); var aLi=oUl.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ if(aLi[i].className=="box"){ aLi[i].style.background='red'; } } } </script> </head> <body> <ul id="ul1"> <li class="box"></li> <li class="box"></li> <li></li> <li></li> <li></li> <li></li> <li class="box"></li> </ul> </body> </html>
写成函数
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> function getByClass(oParent,sClass){ var aResult=[]; var aEle=document.getElementsByTagName('*'); for(var i=0;i<aEle.length;i++){ if(aEle[i].className==sClass){ aResult.push(aEle[i]); } } return aResult; } window.onload=function(){ var oUl=document.getElementById('ul1'); var aBox=getByClass(oUl,'box'); for(var i=0;i<aBox.length;i++){ aBox[i].style.background='red'; } } </script> </head> <body> <ul id="ul1"> <li class="box"></li> <li class="box"></li> <li></li> <li></li> <li></li> <li></li> <li class="box"></li> </ul> </body> </html>
