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>

__EOF__

本文作者：Paxster
本文链接：https://www.cnblogs.com/paxster/archive/2013/05/10/3072148.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！

posted @ 2013-05-10 22:53 Paxster 阅读(1369) 评论(1) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述

公告

Javascript DOM基础

发表于 2013-05-10 22:53阅读：1369评论：1推荐：1

javascript

关注

跳至底部

昵称： Paxster
园龄： 11年10个月
粉丝： 83
关注： 19

+加关注

Chang1ng

芝兰生于深谷，不以无人而不芳。君子修身养德，不以穷困而改志。

Javascript DOM基础

公告

Paxster

Javascript DOM基础

常用链接

我的标签

积分与排名

最新评论

Chang1ng

芝兰生于深谷，不以无人而不芳。 君子修身养德，不以穷困而改志。

Javascript DOM基础

公告

Paxster

Javascript DOM基础

常用链接

我的标签

积分与排名

最新评论

芝兰生于深谷，不以无人而不芳。君子修身养德，不以穷困而改志。