Javascript DOM基础
文档对象模型很重要，对文档结构，样式等等的改变就要靠它了，今天还算比较清闲，继续更新。不过有的程序调试的好纠结，fuck.由于这个编辑器有点问题，代码块展示不出来所以把代码全部显示出来了，请谅解。
DOM——文件对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。Document Object Model的历史可以追溯至1990年代后期微软与NETscape的“浏览器大战”，双方为了在Javascript与JSscript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，计有VBScript、ActiveX控件、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。这一段往事了解就行了。
DOM分级——根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。
DOM节点——父元素和子元素的关系。一个父元素只有一层的隶属关系。例如UL和Li,如果li下面还有诸如strong的标签，那么他就不是UL的子节点（元素）。
childNodes()
1 <script> 2 window.onload=function(){ 3 var oUl=document.getElementById('ul1'); 4 alert(oUl.childNodes.length); 5 }; 6 </script> 7 <body> 8 <ul id="ul1"> 9 <li>1</li> 10 <li>2</li> 11 <li>3</li> 12 </ul> 13 </body>
在火狐和谷歌下弹出7，在IE9弹出3，浏览器之间的不兼容问题。当然你可以使用childern来代替childNodes，就不会出现兼容性的问题了。
1 <script> 2 window.onload=function(){ 3 var oUl=document.getElementById('ul1'); 4 oUl.childNodes[0].style.background='red'; 5 }; 6 </script>
上面这段代码，本来是给li添加一个红色背景，但是没有成功，不知哪出问题了。原因在于火狐会把li与li之间的空格，也就是空的文本节点算作是一个节点。
nodeType节点类型，1代表元素节点，2代表attr属性，3代表文本节点；
offsetParent表示某个定位元素的父元素，获取元素在页面上的绝对坐标；
首尾子节点firstChild和firstElementChild分别在IE和火狐下有效果，可以通过一个判断语句来实现兼容或者通过“或”语句复制给一个变量，然后来实现。同样的还有lastChild和lastElementChild
兄弟子节点nextSibling和nextElementSibling。previousSibling和nextElementSiling
DOM方式操纵元素——setAttribute，getAttribute，removeAttribute
1 <script> 2 window.onload=function(){ 3 var otxt=document.getElementById('txt1'); 4 //otxt.value='123'; 5 //otxt['value']="12" 6 //otxt.setAttribute('value','1'); 7 alert(otxt.getAttribute('id')); 8 }; 9 </script> 10 <body> 11 <input type="text" id="txt1" /> 12 </body>
用className获取元素
封装函数来多次运用，获取类名通常使用很频繁，下面是封装函数的代码：
1 <script type="text/javascript"> 2 function getByClass(oParent, sClass)//第一个参数是父级元素，第二个参数是你要获取的类的名称 3 { 4 var aEle=oParent.getElementsByTagName('*');//获取所有父级元素下的元素名 5 var aResult=[]; 6 var i=0; 7 8 for(i=0;i<aEle.length;i++) 9 { 10 if(aEle[i].className==sClass)//如果类名等于你想要的那个类名，就不断的堆积 11 { 12 aResult.push(aEle[i]); 13 } 14 } 15 16 return aResult;//返回整个数组，数组里面六是你想要的全部类名 17 } 18 19 window.onload=function () 20 { 21 var oUl=document.getElementById('ul1'); 22 var aBox=getByClass(oUl, 'box'); 23 var i=0; 24 25 for(i=0;i<aBox.length;i++) 26 { 27 aBox[i].style.background='yellow'; 28 } 29 } 30 </script>
创建元素createElement()
下面是一个通过点击“单击创建li”这个按钮来创建li，并且在文本框内输入内容的时候，就会创建相应名称的li，但是程序不能执行，大家帮忙找找哪里写错了。程序应该没问题的，firebug也没有提示错误。下面是具体的代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>创建Li</title> 6 <script> 7 window.onload=function(){ 8 var otxt=document.getElementById('txt1'); 9 var obtn=document.getElementById('btn'); 10 var oul=document.getElementById('ul1'); 11 12 obtn.onclick=function(){ 13 var oli=document.createElement('li'); 14 oli.innerHTML=otxt.value; 15 oul.appendChild('oli'); 16 17 }; 18 }; 19 20 21 </script> 22 </head> 23 <body> 24 <input id="txt1" type="text" /> 25 <input id="btn" type="button" value="单击创建li" /> 26 <ul id="ul1"> 27 <li>123</li> 28 </ul> 29 </body> 30 </html>
添加元素appendChild()
他是在父元素的子节点的后面添加新元素。
插入元素insertBefore()
他是在父元素的子节点的前面添加新元素，他的名字也很好记，翻译过来就是“插入前面”。具体的例子可以看下面的代码，其中有一个判断语句，如果长度为零，就使用appendChild来添加新的元素，注意，这里不能使用insertBefore，因为如果一个元素也没有，insertBefore不起作用，而是用appendChild从元素后面插入元素，即使元素的个数为零，还是可以在零的基础上添加第一个元素。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <style> 5 </style> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>无标题文档</title> 8 <script type="text/javascript"> 9 //父.insertBefore(子节点, 谁之前) 10 11 window.onload=function () 12 { 13 var oBtn=document.getElementById('btn1'); 14 var oTxt=document.getElementById('txt1'); 15 var oUl=document.getElementById('ul1'); 16 17 oBtn.onclick=function () 18 { 19 var oLi=document.createElement('li'); 20 var aLi=oUl.getElementsByTagName('li'); 21 22 oLi.innerHTML=oTxt.value; 23 24 if(aLi.length==0) 25 { 26 oUl.appendChild(oLi); 27 } 28 else 29 { 30 oUl.insertBefore(oLi, aLi[0]); 31 } 32 } 33 } 34 </script> 35 </head> 36 37 <body> 38 <input id="txt1" type="text" /> 39 <input id="btn1" type="button" value="创建Li"/> 40 <ul id="ul1"> 41 </ul> 42 </body> 43 </html>
删除元素removeChild()
看下面的小实例，当单机链接时，就删除一个li,运用了this获取你即将点击的链接，其次，使用parentNode来获取父元素，当然了，还是要通过removeChild方法来删除相应的元素。（对了，我发现了一个文本编辑器的BUG，文本的颜色有时候改不过来，要转换两次颜色才可以变灰黑色==！）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <style> 5 </style> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>无标题文档</title> 8 <script type="text/javascript"> 9 window.onload=function () 10 { 11 var aA=document.getElementsByTagName('a'); 12 var oUl=document.getElementById('ul1'); 13 var i=0; 14 15 for(i=0;i<aA.length;i++) 16 { 17 aA[i].onclick=function () 18 { 19 oUl.removeChild(this.parentNode); 20 } 21 } 22 } 23 </script> 24 </head> 25 26 <body> 27 <ul id="ul1"> 28 <li>sdfsdf <a href="javascript:;">删除</a></li> 29 <li>3432 <a href="javascript:;">删除</a></li> 30 <li>tttt <a href="javascript:;">删除</a></li> 31 <li>ww <a href="javascript:;">删除</a></li> 32 </ul> 33 </body> 34 </html>
文档碎片Fragment
文档碎片可以优化性能，亲们，可以使用下面提供的两种不同方法在同一款浏览器下测试，有新兴趣的测试一下哦。我在chrome下测试结果卡死了，不知道什么情况，虽然循环了10万次也不至于卡死吧。文档碎片可以打包创建元素，而一般的方法是一个一个的创建元素，如此循环下去知道循环完毕。
文档碎片写法
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <style> 5 </style> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>无标题文档</title> 8 <script type="text/javascript"> 9 window.onload=function () 10 { 11 var oBtn=document.getElementById('btn1'); 12 var oUl=document.getElementById('ul1'); 13 14 oBtn.onclick=function () 15 { 16 var iStart=new Date().getTime(); 17 var oFrag=document.createDocumentFragment(); 18 var i=0; 19 20 for(i=0;i<100000;i++) 21 { 22 var oLi=document.createElement('li'); 23 24 oFrag.appendChild(oLi); 25 } 26 27 oUl.appendChild(oFrag); 28 29 alert(new Date().getTime()-iStart); 30 } 31 } 32 </script> 33 </head> 34 35 <body> 36 <input id="btn1" type="button" value="碎片"/> 37 <ul id="ul1"> 38 </ul> 39 </body> 40 </html>
普通写法
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <style> 5 </style> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>无标题文档</title> 8 <script type="text/javascript"> 9 window.onload=function () 10 { 11 var oBtn=document.getElementById('btn1'); 12 var oUl=document.getElementById('ul1'); 13 14 oBtn.onclick=function () 15 { 16 var iStart=new Date().getTime(); 17 var i=0; 18 19 for(i=0;i<100000;i++) 20 { 21 var oLi=document.createElement('li'); 22 23 oUl.appendChild(oLi); 24 } 25 26 alert(new Date().getTime()-iStart); 27 } 28 } 29 </script> 30 </head> 31 32 <body> 33 <input id="btn1" type="button" value="普通"/> 34 <ul id="ul1"> 35 </ul> 36 </body> 37 </html>
