11、DOM
1.元素获取方式
id
tagName
name
className--不兼容
querySelector--不兼容，主要用于开发移动端
querySelectorAll--不兼容，主要用于开发移动端
document.documentElement.clientWidth||document.body.clientWidth浏览器的宽
document.documentElement.clientHeight||document.body.clientHeight浏览器的高
//1.id获取元素--完全兼容 //var oP=document.getElementById('p1'); // //2.class获取元素--在IE6-8下不兼容 //var oP=document.getElementsByClassName('p1')[0]; //3.标签名--完全兼容 //var oP=document.getElementsByTagName('p')[0]; //4.name获取元素--主要用于表单元素； //var oInput=document.getElementsByName('txt')[0]; //5.可视区的宽和高 /*var w=document.documentElement.clientWidth||document.body.clientWidth; var h=document.documentElement.clientHeight||document.body.clientHeight;*/ //6.querySelector--只能获取一个元素 // var oP=document.querySelector('.p1'); // var oP=document.querySelector('#p1') //var oP=document.querySelector('p') //7.querySelectorAll //var oP=document.querySelectorAll('.p1')[0]; //var oP=document.querySelectorAll('p')[0]; var oP=document.querySelectorAll('#p1')[0]; console.log(oP);
2.节点类型
nodeType nodeName nodeValue
元素节点 1 大写的标签名 null
文本节点 3 #text 文本内容
注释节点 8 #comment 注释内容
document节点 9 #document null
var oUl=document.getElementsByTagName('ul')[0]; //var aChild=oUl.childNodes;//childNodes:子节点 var aChild=oUl.nextchildren; //console.log(aChild[1].nodeValue) console.log(aChild.length)
3.节点关系
parentNode 父节点 --兼容
childNodes 子节点 --兼容：问题他能拿到所有的子节点：元素节点，注释节点。。。
children 子元素-但不兼容
previousSibling 上一个哥哥节点（哥哥节点：元素节点，注释节点，document节点，文本节点）
nextSibling 下一个弟弟节点
firstChild 第一个子节点
lastChild 最后一个子节点
//getChildren：获取当前元素ul下所有的子元素； /* * 参数：当前元素 * 返回值：当前元素下的所有的子元素 * 1.思路： * 1）拿到所有的子节点 * 2）判断所有的子节点，看谁的nodeType==1;符合要求的，被放入新数组； * 3）返回数组； * */ var oUl=document.getElementsByTagName('ul')[0]; var aLi=getChildren(oUl); console.log(aLi.length) function getChildren(curEle){ var ary=[]; var aChilds=curEle.childNodes; //拿到当前元素下所有的子节点 //判断所有的子节点，看谁的nodeType==1;符合要求的，被放入新数组； for(var i=0; i<aChilds.length; i++){ var cur=aChilds[i]; if(cur && cur.nodeType==1){//节点存在并且节点类型==1； ary.push(cur); } } return ary; }
4.元素的动态操作：
1）元素的动态创建
动态创建：document.createElement(标签名)；
克隆：obj.cloneNode(布尔值) true：深度克隆 false：只克隆表面
2）元素的动态插入
父级.appendChild(要插入的元素); //把新元素插入到父容器的末尾；
父级.insertBefore(newEle,refEle);
3）元素的删除和替换
父级.removeChild(要删除的元素) //在父容器下删除某个元素
父级.replaceChild(newEle,oldEle);//在父容器下用新元素替换旧元素；
5.attribute系列：
获取属性 obj.getAttribute('属性名')
设置属性 obj.setAttribute('属性名','属性值')
删除元素的属性，用obj.removeAttribute('属性名');
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> li{ height: 40px; background: red; margin:10px; } </style> </head> <body> <ul> <li id="li">1<span>12343</span></li> </ul> <script> var oUl=document.getElementsByTagName('ul')[0]; var li=document.getElementById('li'); var oLi=document.createElement('li'); //现在只是创建，我们还需要插入； oLi.innerHTML=2; //oUl.appendChild(oLi); //把新元素插入到父容器的末尾； //oUl.insertBefore(oLi,li); //oUl.removeChild(oLi); //oUl.replaceChild(oLi,li); var newLi=li.cloneNode(); //克隆； oUl.appendChild(newLi); newLi.removeAttribute('id'); newLi.setAttribute('index',0) alert(newLi.getAttribute('index')) </script> </body> </html>
5、. 和 [] 、 attribute 区别
1）在获取自定义属性的时候，点. 无法获取元素身上自定义属性，getAttribute可以获取元素身上的自定义属性。
2）在设置自定义属性的时候，点.设置的自定义属性可以用点获取，但在页面结构中看不到。setAttribute给元素设置的自定义属性可以在页面结构中看到
3）点. [] setAttribute 不能混合操作。
