DOM基础：
什么是DOM：其实就是dovument，div获取、修改样式等等，但是不只是js的组成部分，而且还是一套规范，规定了这些浏览器怎么处理这些操作；
浏览器支持情况：IE（IE7-8，10%支持率，IE9跟火狐差不多）、Chrome（60%左右的支持率）、FF（99%的支持率）
DOM节点：其实标签（CSS）、元素（JS）、节点（DOM）意思一样，只不过在不同文件中的叫法不一样而已
childNodes nodeType
abcdefghijklmn...文本节点 <span>哈哈哈……</span>元素节点
获取子节点
<script> window.onload=function(){ var oUL=document.getElementById('ul1'); alert(oUL.childNodes.length); //火狐、IE9等版本，返回值为5，但是在IE6-8返回的是2，即两个<li>标签 }; </script> <ul id=”ul1”> //该空白区及下一行标签前空白区域，属于第一个节点 <li>qqqq</li> //本行标签属于第二个节点 //该空白区及下一行标签前空白区域，属于第三个节点 <li></li> //本行标签属于第四个节点 //该空白区及下一行标签前空白区域，属于第五个节点 </ul>需要注意的是，节点没有style样式的（但是在IE7，文本节点会有样式，即可在JS中修改“节点”样式），但是所有节点会有一个nodeType（节点类型）
<script> window.onload=function(){ var oUL=document.getElementById('ul1'); for (var i=0; i<oUl.childNodes.length; i++){ //oUL.childNodes[i].style.background='red'; //修改样式无果，因为节点没有样式 // alert(oUL.childNodes[i].nodeType); //nodeType=3表示文本节点共3个；nodeType=1表示元素节点，共2个。 if (oUL.childNodes[i].nodeType==1){ oUL.childNodes[i].style.background='red'; } } }; </script> <ul id=”ul1”> //该空白区及下一行标签前空白区域，属于第一个节点 <li>qqqq</li> //本行标签属于第二个节点 //该空白区及下一行标签前空白区域，属于第三个节点 <li></li> //本行标签属于第四个节点 //该空白区及下一行标签前空白区域，属于第五个节点 </ul>children属性，比childNodes更方便，它与childNodes很相似，但是最大的不同是，children属性只包括元素，不包括文本，而且在<li>标签内的节点只属于<li>的子节点，而不属于<ul>的子节点
<script> window.onload=function(){ var oUL=document.getElementById('ul1'); alert(oUL.children.length); //返回值为2，表示两个<li>标签 }; </script>
parentNode：父节点，如上面代码<ul>是<li>的父节点
var oUL=document.getElementById('ul1'); alert(oUL.parentNode); //返回值为[object HTMLBodyElement] 即body标签
例子——点击链接，隐藏整个li：
<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> <ul id="ul1"> <li>aaaaa<a href="javascript:;">隐藏</a></li> <li>bbbbb<a href="javascript:;">隐藏</a></li> <li>ccccc<a href="javascript:;">隐藏</a></li> <li>ddddd<a href="javascript:;">隐藏</a></li> <li>eeeee<a href="javascript:;">隐藏</a></li> <li>fffff<a href="javascript:;">隐藏</a></li> </ul>
offsetParent：例子——获取元素在页面上的实际位置
补充：CSS中绝对定位的元素，是根据谁定位的呢，它是根据有定位的父级来进行定位的，比如说，某个元素节点直接父级没有定位，则往上找，即找其父级的父级是否有定位，依次往上找，如果一直没有，直至找到<body>为止，
offsetParent：就是用来寻找某一个元素，用来定位的父级，如果一直没有，直到找到<body>为止
<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); //返回[object HTMLDivElement]，当去掉#div1的相对定位返回的值即为[object HTMLBodyElement] }; </script> <body> <div id="div1"><div id="div2"></div></div> </body>
首位子节点：firstChild：第一个子节点（适用于IE6-8等低版本浏览器）、firstElementChild：第一个子节点（适用于IE9以上等高版本浏览器）、lastChild：最后一个子节点（适用于IE6-8等低版本浏览器）、lastElementChild（适用于IE9以上等高版本浏览器）；所以有兼容性问题
var oUl=document.getElementById('ul1'); // oUl.firstChild.style.background='red'; //适用于IE6-8等低版本浏览器 // oUl.firstElementChild.style.background='red'; //适用于高版本等高级浏览器 // 为了解决兼容问题，可以用以下方法： if (oUl.firstElementChild){ //如果oUl.firstElementChild存在，则执行 oUl.firstElementChild.style.background='red'; } else { //否则执行 oUl.firstChild.style.background='red'; }兄弟节点：nextSibling：下一个兄弟节点（适用于IE6-8等低版本浏览器）、nextElementSibling下一个兄弟节点（适用于IE9以上等高版本浏览器）、previousSibling：上一个兄弟节点（适用于IE6-8等低版本浏览器）、previousElementSibling上一个兄弟节点（适用于IE9以上等高版本浏览器）；所以同上理，有兼容性问题
操纵元素属性：
语素属性操作：（三种方法效果一样）
第一种：oDiv.style.display="block";
第二种：oDiv.style["display"]="block";
第三种：DOM方式： oDiv.setAttribute('dispaly', 'block');
DOM方式操作元素属性：
获取：getAttribute(名称)
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)
DOM元素灵活查找：
前面讲过获取元素的方法有：getElementById(); getElementsByTagName();
用className选择元素：
如何用className选择元素
选出所有元素
通过className条件筛选
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'; } }
封装成函数
//把获取元素className属性的代码封装成一个函数 function getByClass(oParent, sClass){ var aResult=[]; //定义空数组，作用是把所有找到的元素放入该数组中 var aEle=oParent.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'; } };
转载于:https://www.cnblogs.com/han-bky/p/10089709.html
