zoukankan      html  css  js  c++  java

  • 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>
  • 相关阅读:
    JavaWeb--基本概念
    启动Tomcat错误：The JRE_HOME environment variable is not defined correctly
    时间管理-1-总有一种情况你经历过
    时间管理
    非对称加密-支付宝 堆成加密
    TreeMap底层实现和原理-红黑树
    @Autowired报错原因分析和4种解决方案！
    布隆过滤器的设计原理
    springboot 日期参数前后台转换问题
    设计模式
  • 原文地址：https://www.cnblogs.com/paxster/p/3072148.html
Copyright © 2011-2022 走看看