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>
  • 相关阅读:
    OSX安装nginx和rtmp模块（rtmp直播服务器搭建）
    用runtime来重写Coder和deCode方法 归档解档的时候使用
    Homebrew安装卸载
    Cannot create a new pixel buffer adaptor with an asset writer input that has already started writing'
    OSX下面用ffmpeg抓取桌面以及摄像头推流进行直播
    让nginx支持HLS
    iOS 字典转json字符串
    iOS 七牛多张图片上传
    iOS9UICollectionView自定义布局modifying attributes returned by UICollectionViewFlowLayout without copying them
    Xcode6 iOS7模拟器和Xcode7 iOS8模拟器离线下载
  • 原文地址：https://www.cnblogs.com/paxster/p/3072148.html
Copyright © 2011-2022 走看看