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 不能混合操作。