学习笔记——DOM基础
一、DOM基础一
1、lDOM基础
A.什么是DOM
作用：可以帮助JS操作浏览器。
B.浏览器支持情况
FF：支持DOM1几DOM2
safari和chrome：支持大部分DOM1，小部分DOM2
IE：只支持部分DOM1
2、DOM节点
A.子结点
子结点只有一层
a)获取子节点：childNodes
//childNodes的兼容性问题 <script> window.onload=function(){ oUl=document.getElementById('ul1'); alert(oUl.childNodes.length); //在ie下输出为3，火狐下输出为7 oUl.childNodes[0].style.background='red'; }; </scritp> <ul id="ul1"> <li>1</li> <li>2</li> <li>3</li> </ul>
b)子结点类型：nodeType
文本结点：nodeType＝3；
元素结点：nodeType＝1；
//用nodeType解决childNodes的兼容性问题 <script> window.onload=function(){ oUl=document.getElementById('ul1'); var i＝0; for(i=0;i<oUl.childNodes.length;i++){ if(oUl.childNodes[i].nodeType==1){ //判断是否是元素结点 oUl.childNodes[i].style.background='red'; } } oUl.childNodes[0].style.background='red'; }; </scritp> <ul id="ul1"> <li>1</li> <li>2</li> <li>3</li> </ul>
c)兼容版的获取子结点：children
是childNodes的兼容版，不存在兼容问题。
B.父结点
a)parentNode：获取元素结构上的父级。
•例子：点击链接，隐藏整个li
<script> window.onload=fucntion(){ var aA=document.getElementsByTagName('a'); var i=0; for(i=0;i<aA.length;i++){ aA[i].onclick=function(){ this.parentNode.style.display='none'; }; } }; </script> <ul> <li>aaa<a href='javascript:;'>隐藏</a></li> <li>bbb<a href='javascript:;'>隐藏</a></li> <li>ccc<a href='javascript:;'>隐藏</a></li> </ul>
b)offsetParent：获取元素在定位上的父级。
•例子：获取元素在页面上的实际位置
<script> oDiv1=document.getElementById('div1'); oDiv2=document.getElementById('div2'); oDiv2.onclick=fucntion(){ alert(this.offsetParent.tagName) //输出html //如果给div1的样式加上position:relative;或position:absolute;或position:fix;时： alert(this.offsetParent.id) //输出div1 } </script> <div id="div1" style="width:100px; height:100px; background:red;"> <div id="div2" sytle="width:100;height:100;background:yellow; position:absolute;left:100px; top:100px;"> </div> </div>
二、DOM基础二
1、DOM节点(2)
A.首尾子节点
有兼容性问题
a)首子结点
－ie、firefox：
–firstChild、firstElementChild
–lastChild 、lastElementChild
例子：
<script> 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> <ul id="ul1"> <li>1</li> <li>2</li> <li>3</li> </ul>
B.兄弟节点
b)有兼容性问题
－ie、firefox：
–nextSibling、nextElementSibling
–previousSibling、previousElementSibling
三、操纵元素属性
1.操纵元素的方法
A.第一种：oDiv.style.display=“block”;
B.第二种：oDiv.style[“display”]=“block”;
C.第三种：Dom方式
a)lDOM方式操作元素属性
•获取：getAttribute(名称)
•设置：setAttribute(名称, 值)
•删除：removeAttribute(名称)
四、DOM元素灵活查找
1、用className选择元素
A.如何用className选择元素
a)选出所有元素
b)通过className条件筛选
<script> window.onload=function(){ var oUl=document.getElementById('ul1'); bar aLi=oUl.getElementsByTagName('li') for(i=0;i<aLi.length;i++){ if(aLi[li].className=='box') { aLi[li].style.background='red''; } } }; </script> <ul id=ul1> <li></li> <li class="box"></li> <li class="box"></li> <li></li> <li class="box"></li> <li></li> </ul>
B.封装成函数
<script> function getByClass(oParent,sClass){ var aEle=oParent.getElementsByTagName('*'); var aResult=[]; var i=0; for(i=0;i<aEle.lenght;i++){ if(aEle[i].className==sClass){ aReult.push(aEle[i]); } } } window.onload=function(){ var oUl=document.getElementById('ul1'); var aBox=getByClass('oUl','box'); var i=0; for(i=0;i<aBox.lenght;i++){ aBox[i].style.background='red'; } }; </script> <ul id="ul1"> <li class='box'>1</li> <li>2</li> <li>3</li> </ul>
五、创建、插入和删除元素
1.创建DOM元素
A.createElement(标签名) 创建一个节点
B.appendChild(节点) 追加一个节点，只能把元素插到最后。
•例子：为ul插入li
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script type="text/javascript"> window.onload=function(){ oTex=document.getElementById("text1"); oBtn=document.getElementById("btn1"); oUl=document.getElementById("ul1"); oBtn.onclick=function(){ oLi=document.createElement('li'); //创建一个结点 oLi.innerHTML=oTex.value; oUl.appendChild(oLi); //追加一个结点 }; }; </script> </head> <body> <input type="text" id="text1" /> <input type="button" value="创建li" id="btn1"/> <ul id="ul1"> <li>test</li> </ul> </body> </html>
2.插入元素
a)insertBefore(节点, 原有节点) 在已有元素前插入。在元素之前插入。
•例子：倒序插入li
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script type="text/javascript"> window.onload=function(){ oTex=document.getElementById("text1"); oBtn=document.getElementById("btn1"); oUl=document.getElementById("ul1"); oBtn.onclick=function(){ oLi=document.createElement('li'); //创建一个结点 aLi=oUl.getElementsByTagName("li"); oLi.innerHTML=oTex.value; if(aLi.length==0){ oUl.appendChild(oLi); //追加一个结点 } else{ oUl.insertBefore(oLi,aLi[0]); //在某结点前插入一个结点 } }; }; </script> </head> <body> <input type="text" id="text1" /> <input type="button" value="创建li" id="btn1"/> <ul id="ul1"> </ul> </body> </html>
3.删除DOM元素
a)removeChild(节点) 删除一个节点
•例子：删除li
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script type="text/javascript"> window.onload=function(){ oUl=document.getElementById("ul1"); aA=oUl.getElementsByTagName("a"); 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>test0<a href="javascript:;">删除</a></li> <li>test1<a href="javascript:;">删除</a></li> <li>test2<a href="javascript:;">删除</a></li> <li>test3<a href="javascript:;">删除</a></li> </ul> </body> </html>
4.文档碎片
A.文档碎片可以提高DOM操作性能(理论上)
B.文档碎片原理
a)document.createDocumentFragment()
<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>
