您的当前位置：首页正文

js中DOM知识点分享

2020-11-27 来源：桦陀教育

1、childNodes和nodeType

childNodes获取子节点，但是会把中一个标签与另一个标签的空格当做文本节点来计算。nodeType判断一个节点是什么类型的节点。只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。
2、children获取子节点，它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。
3、offsetParent获取该节点有定位的父元素节点。
4、firstChild()和firstElementChild()，有兼容问题，使用if来处理兼容问题。其余lastchild等的也是和这个相类似。
5、使用dom来获取元素属性，使用setAttribute(‘要设置的属性’，‘设置属性的值’),removeAttribute(名称)，getAttribute（名称），基本不常用。但也有必须用的情况。
6、使用className来选择元素，可以封装一个简单的方法，现在这个是低版本的，没有bug，但是有很强的局限性

<!DOCTYPE html><html>
 <head>
 <meta charset="UTF-8">
 <title></title> 
 </head>
 <body>
 <p id="p1">
 <ul>
 <li class="box"></li>
 <li></li>
 <li></li>
 <li class="box"></li>
 <li class="box"></li>
 <li></li>
 <li></li>
 <li class="box"></li>
 </ul>
 </p>
 </body>
 <script>
 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;
 } var p1 = document.getElementById('p1'); var aBox = getByClass(p1,'box'); for(var i=0;i<aBox.length;i++){
 aBox[i].style.backgroundColor='red';
 } </script></html>

7、创建节点比如论坛功能
一定要把创建好的节点加入到他的父元素下面
creatElement（）创建节点
appendChild()将创建好的节点添加到他的父元素之前
insertBefore()在某个节点之前插入
removeChild()删除某个节点

<!DOCTYPE html><html>
 <head>
 <meta charset="UTF-8">
 <title>创建节点</title>
 <script>
 window.onload=function(){
 var oUl = document.getElementById('oUl'); var oBtn = document.getElementById('btn'); var input1 = document.getElementById('input1'); var aLi = document.getElementsByTagName('li');
 oBtn.onclick=function(){
 var oLi = document.createElement('li'); 
 oLi.innerHTML=input1.value; if(aLi.length>0){
 oUl.insertBefore(oLi,aLi[0]);
 }else{
 oUl.appendChild(oLi);
 }
 }
 } </script>
 </head>
 <body>
 <p>
 <input id="input1" type="text" />
 <input id='btn' type="button" value="创建" />
 <ul id='oUl'>
 </ul>
 </p>
 </body></html>