DOM笔记
DOM基础
•什么是DOM
Dom:英文全称－Document Object Model 译成中文即是：文档对像模型．听起来很术语，其实就是文档内容的结构关系．文档类型可以是HTML或XML
Dom具有对Html文件和XML文件元素的访问控制能力，简单点说利用Dom可以对某个html或xml文件添加，修改，删除元素．更改其现有的结构或内容
Dom具有对Html文件和XML文件元素的访问控制能力，简单点说利用Dom可以对某个html或xml文件添加，修改，删除元素．更改其现有的结构或内容
•浏览器支持情况
DOM节点
•childNodes nodeType –获取子节点
在火狐下空格也会把空文本作为子节点计算上
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { var oUl=document.getElementById('ul1'); alert(oUl.childNodes.length);//ie 3 火狐 7 } </script> </head> <body> <ul id="ul1"> <li>111</li> <li>222</li> <li>333</li> </ul> </body> </html>
<script type="text/javascript"> window.onload=function () { t=document.body.childNodes[0].nodeType; alert(t)// 3 文本节点 m=document.body.childNodes[1].nodeType; alert(m)// 1 元素节点 } </script> html： 文本文字 <Span>123455</Span>
<script type="text/javascript"> window.onload=function () { var oUl=document.getElementById('ul1');//选出ul for(var i=0;i<oUl.childNodes.length;i++){ //oUl.childNodes[i].style.background='red';//让所有的子节点变红色 火狐下没有变色 if(oUl.childNodes[i].nodeType==1){ oUl.childNodes[i].style.background='red';//判断一下元素节点是否为1 兼容火狐写法 } } } </script> <ul id="ul1"> <li></li> <li></li> <li></li> </ul>
–children 兼容版的childNodes
<script type="text/javascript"> window.onload=function () { var oUl=document.getElementById('ul1'); alert(oUl.children.length);//3 } </script> <ul id="ul1"> <li></li> <li></li> <li></li> </ul>
需要获取第一层的子节点用children是极好的方法
•parentNode 获取父节点 元素结构html上的父节点
–例子：点击链接，隐藏整个li
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { var aA=document.getElementsByTagName('a');//选择出所用的a for(var i=0;i<aA.length;i++){ aA[i].onclick=function(){ this.parentNode.style.display='none'; } } } </script> </head> <body> <ul> <li>aass <a href="javascript:;">隐藏</a></li> <li>5453 <a href="javascript:;">隐藏</a></li> <li>cvxc <a href="javascript:;">隐藏</a></li> <li>ertert <a href="javascript:;">隐藏</a></li> </ul> </body> </html>
•offsetParent 相对于定位的父节点
–例子：获取元素在页面上的实际位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { var oDiv2=document.getElementById('div2'); oDiv2.onclick=function(){ alert(this.offsetParent.tagName);//body } } </script> </head> <body> <div id="div1" style="width:100px; height:100px; background:red; margin:100px;"> <div id="div2" style="width:100px; height:100px; background:yellow; position:absolute; left:100px; top:100px;"></div> </div> </body> </html>
如果给div1，加个样式position:relative;这是div1就是div2布局上上父机
于是点击div2弹出div1
alert(this.offsetParent.id);//div1
DOM节点(2)
•首尾子节点
–有兼容性问题
–firstChild 第一个子节点、firstElementChild
–lastChild 最后一个子节点、lastElementChild
兼容写法
View Code
var oFirst=oUl.firstElementChild||oUl.firstChild;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { var oUl=document.getElementById('ul1'); //IE //oUl.firstChild.style.background='red'; //FF //oUl.firstElementChild.style.background='red'; var oFirst=oUl.firstElementChild||oUl.firstChild; oFirst.style.background='red'; } </script> </head> <body> <ul id="ul1"> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
•兄弟节点
–有兼容性问题
–nextSibling、nextElementSibling
–previousSibling、previousElementSibling
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { var oLi=document.getElementById('li1'); oLi.nextSibling.style.background='blue'//下一个兄弟子节点 oLi.previousSibling.style.background='red';//上一个兄弟子节点 } </script> </head> <body> <ul id="ul1"> <li></li> <li></li> <li id="li1">111</li> <li></li> <li></li> </ul> </body> </html>
兼容处理和firstChild一样
操纵元素属性
元素属性操作
•第一种：oDiv.style.display=“block”;
•第二种：oDiv.style[“display”]=“block”;
•第三种：Dom方式
DOM方式操作元素属性
•获取：getAttribute(名称)
•设置：setAttribute(名称, 值)
•删除：removeAttribute(名称)
html:
<input type="text" id="txt1"/>
js:
window.onload=function () { var oTxt=document.getElementById('txt1'); //第一种方法 //oTxt.value='123'; // 获取value数值 //第二种方法 可以完全替换点的方法 //oTxt['value']='abc'; //第三章方法 设置元素属性setAttribute oTxt.setAttribute('value', 'rtertw');
//获取元素属性getAttribute
alert(oTxt.getAttribute('id')); } </script>
DOM元素灵活查找
用className选择元素
•如何用className选择元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { var oUl=document.getElementById('ul1'); var aLi=oUl.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++) { //选择出所有的出来class 为box的li变成红色 if(aLi[i].className=='box') { aLi[i].style.background='red'; } } } </script> </head> <body> <ul id="ul1"> <li></li> <li></li> <li></li> <li class="box"></li> <li></li> <li class="box"></li> <li class="box"></li> <li></li> <li></li> <li></li> </ul> </body> </html>
•封装成函数
1.选出所有元素
2.通过className条件筛选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> function getByClass(oParent, sClass) { var aEle=oParent.getElementsByTagName('*');//通配符 选出所有标签 var aResult=[]; var i=0; for(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'); var i=0; for(i=0;i<aBox.length;i++) { aBox[i].style.background='yellow'; } } </script> </head> <body> <ul id="ul1"> <li></li> <li></li> <li></li> <li class="box"></li> <li></li> <li class="box"></li> <li class="box"></li> <li></li> <li></li> <li></li> </ul> </body> </html>
DOM中级
1.创建、插入和删除元素
创建DOM元素
•createElement(标签名) 创建一个节点
var oLi=document.createElement('li');//创建li
•appendChild(节点) 追加一个节点
oUl.appendChild(oLi);// 父.appendChild(子节点)
–例子：为ul插入li
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { var oBtn=document.getElementById('btn1'); var oTxt=document.getElementById('txt1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var oLi=document.createElement('li'); oLi.innerHTML=oTxt.value; //父.appendChild(子节点) oUl.appendChild(oLi); } } </script> </head> <body> <input id="txt1" type="text" /> <input id="btn1" type="button" value="创建Li"/> <ul id="ul1"> <li>aaa</li> </ul> </body> </html>
插入元素
•insertBefore(节点, 原有节点) 在已有元素前插入
–例子：倒序插入li
oUl.insertBefore(oLi, aLi[0]);//父.insertBefore(子节点, 谁之前)
删除DOM元素
•removeChild(节点) 删除一个节点
–例子：删除li
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { var aA=document.getElementsByTagName('a'); var oUl=document.getElementById('ul1'); var i=0; for(i=0;i<aA.length;i++) { aA[i].onclick=function () { oUl.removeChild(this.parentNode); } } } </script> </head> <body> <ul id="ul1"> <li>sdfsdf <a href="javascript:;">删除</a></li> <li>3432 <a href="javascript:;">删除</a></li> <li>tttt <a href="javascript:;">删除</a></li> <li>ww <a href="javascript:;">删除</a></li> </ul> </body> </html>
文档碎片
•文档碎片可以提高DOM操作性能(理论上)
•文档碎片原理
•document.createDocumentFragment()
对比：插入li
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var iStart=new Date().getTime(); var i=0; for(i=0;i<100000;i++) { var oLi=document.createElement('li'); oUl.appendChild(oLi); } alert(new Date().getTime()-iStart); } } </script> </head> <body> <input id="btn1" type="button" value="普通"/> <ul id="ul1"> </ul> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var iStart=new Date().getTime(); var oFrag=document.createDocumentFragment(); var i=0; for(i=0;i<100000;i++) { var oLi=document.createElement('li'); oFrag.appendChild(oLi); } oUl.appendChild(oFrag); alert(new Date().getTime()-iStart); } } </script> </head> <body> <input id="btn1" type="button" value="碎片"/> <ul id="ul1"> </ul> </body> </html>
测试对比还没有普通的快，所以说只是理论上，面试的时候知道就好文档碎片可以dom提高操作性能即可。
总结
DOM基础
1. DOM简介、DOM标准、DOM节点
2. 获取元素的子节点：childNodes、兼容性问题
3. 节点类型：nodeType、文本节点、元素节点
4. children的使用
5. 获取元素父节点parentNode
6. 获取定位元素的父节点offsetParent
7. 获取首尾子元素：firstChild、firstElementChild、lastChild、lastElementChild
8. 获取兄弟节点：nextSibling、nextElemnetSibling、previousSibling、previousElementSibling
9. 元素属性操作：“.”与“[]”回顾、setAttribute、getAttribute、removeAttribute
10. 通过className获取元素、封装getByClass函数
DOM中级
1. 创建元素 createElement、appendChild
2. 添加元素的性能差异
3. insertBefore方法及实例
4. 删除元素：removeChild方法
5. 文档碎片：document.createDocumentFragment()
6. 性能测试方法
