DOM知识

开场白:

到底啥叫DOM呢?为啥DOM会被这么多人赋予javascript核心知识点的至高荣誉呢?DOM到底难么?小卖部安全套为何屡遭黑手?女生宿舍内裤为何频频失窃?连环强奸母 猪案,究竟是何人所为?老尼姑。。。咳咳,串了,现在来看看DOM到底是什么鬼!

答:“DOM不是鬼!!!他是javascript的 Document Object Model(文档对象模型)”  BUT!!我们更习惯的是称其为“DOM节点”

开始——最常规的认识:

首先,简单介绍一件事情:

javascript是基于对象的一门语言,换句话就是【javascript里一切都是对象】,对象又是什么?有自己的属性和方法的“东西”叫做对象

例如:a.attr , a.fn(),这里的a就是对象,attr就是a的属性,fn就是a的方法。

然后,开始dom的学习。

来两个烂大街的【方法】:

document.getElementById(),

document.getElementsByTagName(),

都知道怎么用,就像这么用:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>到底啥叫DOM?!</title>
 6     <script type="text/javascript">
 7         window.onload=function(){
 8             var oDiv=document.getElementById("box");
 9             var aP=document.getElementsByTagName("p");
10             console.log(oDiv);
11             console.log(aP);
12         }
13     </script>
14 </head>
15 <body>
16     <div id="box">
17         <p class="node1"></p>
18         <p class="node2"></p>
19         <p class="node3"></p>
20         <p class="node4"></p>
21         <p class="node5"></p>
22     </div>
23 </body>
24 </html>

运行一下代码,会看到控制台为我们解释了这俩玩意儿是用来嘎哈的:

对照控制台的输出可以得出结论:

document.getElementById()是用来获取单个HTML dom节点的(单对象)【包含所有内部节点】,参数是HTML元素的ID。

document.getElementsByTagName()是用来获取HTML dom节点集合的(数组)【包括所有集合项目的内部节点】,参数是HTML元素的标签名。

当然此处会出现【注意】:

仔细观察document.getElementById()和document.getElementsByTagName()这两个表达式,参照前面说的【对象】的low比概念,会发觉,“.”前面的document就像是例子里面的“a”,那么就是说此处我们是在document上面调用getElementById()和getElementsByTagName()这两个方法,在然后前面也说了DOM这玩意儿乳名叫节点,官方叫“Document Object Model(文档对象模型)”,所以也就代表作为对象的DOM,也是可以调用getElementById()和getElementsByTagName()这两个方法的,那么就有:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>到底啥叫DOM?!</title>
 6     <script type="text/javascript">
 7         window.onload=function(){
 8             var oDiv=document.getElementById("box");
 9             var aP=oDiv.getElementsByTagName("p");
10             console.log(oDiv);
11             console.log(aP);
12         }
13     </script>
14 </head>
15 <body>
16     <div id="box">
17         <p class="node1"></p>
18         <p class="node2"></p>
19         <p class="node3"></p>
20         <p class="node4"></p>
21         <p class="node5"></p>
22     </div>
23 </body>
24 </html>

结果和上面一样,不再赘述。

接着——认识DOM的类型:

现在已经能顺利的收集到DOM了,可是由于DOM还分好些类型,所以在处理过程中难免会遇到一些区别对待的问题,而在区别对待之前,必须先知道DOM的类型【nodeType】

【nodeType】是个好东西!它能带我们认识,谁是谁,如下代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>到底啥叫DOM?!</title>
 6     <script type="text/javascript">
 7         window.onload=function(){
 8             var aP=document.getElementsByTagName("p");
 9             for(var i=0;i<aP.length;i++){
10                 console.log(aP[i].nodeType);
11             }
12         }
13     </script>
14 </head>
15 <body>
16     <div id="box">
17         <p class="node1"></p>
18         <p class="node2"></p>
19         <p class="node3"></p>
20         <p class="node4"></p>
21         <p class="node5"></p>
22     </div>
23 </body>
24 </html>

运行代码,可以看到,chrome给出的答案是:1

这代表什么?

dom元素常见类型如下:

1:元素节点,只要是在document下的html元素都称为节点树,什么body、h1、p、ul、li。。。。等等等等

2:属性节点,简单理解为所有html元素的属性

3:文本节点,即网页中的文本

8:注释节点,即“//”或者“/**/”

9:文档节点,即"document"本身

由此可见,上面输出的意思是:aP获取到的是元素节点的集合。

在试验文本节点和属性节点之前先介绍两个DOM属性:childNodes和children

这俩是用来获取当前节点子节点的属性。

现在使用childNodes来试验一下文本节点和元素节点:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>到底啥叫DOM?!</title>
 6     <script type="text/javascript">
 7         window.onload=function(){
 8             var oDiv=document.getElementById("box");
 9             var allNodes=oDiv.childNodes;
10             for(var i=0;i<allNodes.length;i++){
11                 alert(allNodes[i].nodeType);
12             }
13         }
14     </script>
15 </head>
16 <body>
17     <div id="box">
18         <p class="node1"></p>
19         <p class="node2"></p>
20         <p class="node3"></p>
21         <p class="node4"></p>
22         <p class="node5"></p>
23     </div>
24 </body>
25 </html>

运行结果为:反复弹出3和1.说明了在#box下的所有节点中包含了元素节点和文本节点。

【疑问】元素节点毫无疑问是“p”,可是文本节点呢?

很简单,删除代码中的所有换行和空格,得到如下结果:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>到底啥叫DOM?!</title>
 6     <script type="text/javascript">
 7         window.onload=function(){
 8             var oDiv=document.getElementById("box");
 9             var allNodes=oDiv.childNodes;
10             for(var i=0;i<allNodes.length;i++){
11                 alert(allNodes[i].nodeType);
12             }
13         }
14     </script>
15 </head>
16 <body>
17     <div id="box"><p class="node1"></p><p class="node2"></p><p class="node3"></p><p class="node4"></p><p class="node5"></p></div>
18 </body>
19 </html>

现在运行,得到的结果是:弹出所有都是1(元素节点)。那么就能得出结论了,前面的代码弹出的3(文本节点)是代码之间的换行和空格造成的

按理说,使用childNodes就能达到之前说的区别对待dom节点来进行操作了,但遗憾的是,Firefox对childNodes的支持和其他浏览器并不一样,丫不识别其中的文本节点你信么?!那怎么办?可以使用如下的方法:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>到底啥叫DOM?!</title>
 6     <script type="text/javascript">
 7         window.onload=function(){
 8             var oDiv=document.getElementById("box");
 9             var allNodes=oDiv.childNodes;
10             for(var i=0;i<allNodes.length;i++){
11                 if(allNodes[i].nodeType==1){
12                     alert("这是元素节点");
13                 }else if(allNodes[i].nodeType==3){
14                     alert("这是文本节点");
15                 }
16             }
17         }
18     </script>
19 </head>
20 <body>
21     <div id="box">
22         <p class="node1"></p>
23         <p class="node2"></p>
24         <p class="node3"></p>
25         <p class="node4"></p>
26         <p class="node5"></p>
27     </div>
28 </body>
29 </html>

运行代码,可以看到,在chrome里面我们成功的实现了区分不同的节点。

【额外赠送】由于活动期间,现立即订购childNodes还可赠送万能节点识别器——children

children这个属性完美的解决了childNodes的不兼容问题,不过需要注意的是,children并非W3C标准属性,不过由于那高度太高,现在嘛,who care?

试试看:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>到底啥叫DOM?!</title>
 6     <script type="text/javascript">
 7         window.onload=function(){
 8             var oDiv=document.getElementById("box");
 9             var allNodes=oDiv.children;
10             for(var i=0;i<allNodes.length;i++){
11                 alert(allNodes[i].nodeType);
12             }
13         }
14     </script>
15 </head>
16 <body>
17     <div id="box">
18         <p class="node1"></p>
19         <p class="node2"></p>
20         <p class="node3"></p>
21         <p class="node4"></p>
22         <p class="node5"></p>
23     </div>
24 </body>
25 </html>

可以看到弹出的都是1(元素节点),并且这个方法能兼容所有浏览器,在某些情况下还是为我们带来了不少便利。

然后——几个dom的常用方法:

现在,知道了如何获取dom,如何区分dom的类型,要是再知道如何操作dom那就赞了!

这里还有两个比较常用的dom方法:

getAttribute()——获取dom节点的属性值。

setAttribute()——设置dom节点的属性值。

先来看一下getAttribute()的运用:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>到底啥叫DOM?!</title>
 6     <script type="text/javascript">
 7         window.onload=function(){
 8             var oDiv=document.getElementById("box");
 9             // 获取oDiv下所有的元素节点
10             var allNodes=oDiv.children;
11             for(var i=0;i<allNodes.length;i++){
12                 // 获取节点的class属性
13                 alert(allNodes[i].getAttribute("class"));
14             }
15         }
16     </script>
17 </head>
18 <body>
19     <div id="box">
20         <p class="node1"></p>
21         <p class="node2"></p>
22         <p class="node3"></p>
23         <p class="node4"></p>
24         <p class="node5"></p>
25     </div>
26 </body>
27 </html>

运行会看到,弹出了所有p标签的class类名。

既然这样没问题,那么使用setAttribute()来设置节点的属性值就没必要演示了。

【试试看】用前面所说的所有方法和属性来写一个选项卡效果(尽可能多使用这些dom属性和方法);

【试试看】用dom知识点写一个全选、反选、取消选择的效果;

既然能获得DOM的属性值(增加属性值)并且对齐作一定的修改,那么是否可以删除呢?答案是肯定的

这个方法就是:removeAttribute

使用方法嘛,其实很傻瓜,一个简单例子好了,没必要作过多的解释:obj.removeAttribute("class"),这就是移除obj对象的class属性。

再然后:局部操作DOM

下面来看两个比较重要的DOM属性:

firstChildlastChild

当然在解释这两个属性之前还需要在介绍另外两个属性:

firstElementChildlastElementChild

firstChild属性是指获取DOM子对象组的第一个子对象,其作用和childNodes[0]一样,同样望文生义,lastChild也就是最后一个子对象。那么如何使用这个属性呢?很简单:node代表我们获取到的DOM节点,那么要获得其下属的第一个子节点,只需要【node.firstChild】即可,当然,lastChild也是一样的使用方法,接下来看看一个简单的例子,将这两个属性运用到实际中。

BUT,在写这个例子之前我们还需要了解另外一个属性——nodeValue【节点对象的值】

为什么要顺带提一下呢?因为在我看来这个属性的重要性在目前而言还没有体现出来,因为它仅仅能获取到文本节点的值,对于元素节点,他获取的都是null。不过,可不要小看这个属性,等到高级js编程的时候,在获取节点内容的方法(类似innerHTML)编写上他有着不可替代的作用,这些现在不说。nodeValue的使用方式依然是:node.nodeValue,当然,也可以对修改节点的值:node.nodeValue=text。

好了,现在来看看要做的例子:【转移文本内容】

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         #text1,#text2{
 8             width: 100px;
 9             height: 30px;
10             text-align: center;
11             color:#fff;
12             font-weight: bold;
13             line-height: 30px;
14         }
15         #text1{
16             background: green;
17         }
18         #text2{
19             background: blue;
20         }
21     </style>
22     <script type="text/javascript">
23     window.onload=function(){
24         // 获取按钮、text1、text2
25         var oSub=document.getElementById("sub");
26             oP1=document.getElementById("text1");
27             oP2=document.getElementById("text2");
28             // 提前将text1的文本节点值(即文本内容)保存在一个变量中
29             moveText=oP1.childNodes[0].nodeValue;
30         // 为按钮绑定点击事件
31         oSub.onclick=function(){
32             // 设置text1的文本节点为空
33             oP1.childNodes[0].nodeValue="";
34             // 设置text2的文本节点值为前面保存在变量中的值
35             oP2.childNodes[0].nodeValue=moveText;
36         }
37     }
38     </script>
39 </head>
40 <body>
41     <button id="sub">转移内容</button>
42     <p id="text1">要被转移了</p>
43     <!-- 写一句话的意义在于:p#text2中必须包含有一个文本节点才能对其进行更改节点值的操作 -->
44     <p id="text2">迎接转移</p>
45 </body>
46 </html>

仔细查看上面的例子,两个问题需要思考

1、为什么要在p#text2中写一句话?(答案在代码中)

引申:那敲一个空格可以么?前文说过空格也是文本节点。

答:不能,前文也说过浏览器对文本节点的解析不同,正解是:IE8.0及其以下版本的浏览器会忽略节点间的空白节点(空格、回车和Tab键),遵循W3C规范的浏览器(Chrome、FireFox、Safari等)则会把这些空白作为文本节点处理。

2、为什么要在最开始就把p#text1的文本节点值保存在一个变量中?

经过上面的例子,现在firstChild和nodeValue的使用方法算是明白了(lastChild没必要再说了)。不过,最开始的时候我们就提出了另外两个属性:firstElementChild和lastElementChild,何解?

先来对比一下这两对属性的名字:

firstChild:第一个子节点            firstElementChild:第一个元素子节点

lastChild:最后一个子节点         lastElementChild:最后一个元素节点

现在能看出区别了吧,他们对应的节点类型不一样。还有一个问题就是IE8及其以下浏览器并不支持firstElementChild和lastElementChild,直接使用firstChild和lastChild即可,具体可以参考上面思考里面的正解

直接看看这两个节点属性的使用:【控制ul的第一个和最后一个li的背景】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #main{
        width: 100px;
        color: #fff;
    }
    #main li{
        width: 100%;
        height: 30px;
        line-height: 30px;
        background: #000;
        margin: 5px auto;
    }
    </style>
    <script type="text/javascript">
    window.onload=function(){
        // 获取按钮、ul
        var oMain=document.getElementById("main"),
            oSub1=document.getElementById("sub1"),
            oSub2=document.getElementById("sub2");
            // 为第一个按钮绑定事件
            oSub1.onclick=function(){
                // 点击按钮,ul的【第一个元素节点】背景颜色变成蓝色
                oMain.firstElementChild.style.background="blue";
            }
            // 为第二额按钮绑定事件
            oSub2.onclick=function(){
                // 点击按钮,ul的【最后一个元素节点】背景颜色变成红色
                oMain.lastElementChild.style.background="red";
            }

    }
    </script>
</head>
<body>
    <button id="sub1">第一个li变色</button>
    <button id="sub2">最后一个li变色</button>
    <ul id="main">
        <li>节点1</li>
        <li>节点2</li>
        <li>节点3</li>
        <li>节点4</li>
        <li>节点5</li>
    </ul>
</body>
</html>

运行上面的代码,可以看到点击按钮,对应的li会改变背景颜色,不过这真的好了吗?当然不会,上面已经说过,这两个属性有兼容性问题,他们都是W3C标准下的属性,IE8以下的浏览器因为微软的自大,拒绝了准守这个标准,所以,这个程序放到IE8以下浏览器运行是没有作用的。那要怎么做?

再次回顾前面说过的IE8对firstChild和lastChild的支持原理:IE8.0及其以下版本的浏览器会忽略节点间的空白节点(空格、回车和Tab键),遵循W3C规范的浏览器(Chrome、FireFox、Safari等)则会把这些空白作为文本节点处理。

那么我们需要这么修改:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7     #main{
 8         width: 100px;
 9         color: #fff;
10     }
11     #main li{
12         width: 100%;
13         height: 30px;
14         line-height: 30px;
15         background: #000;
16         margin: 5px auto;
17     }
18     </style>
19     <script type="text/javascript">
20     window.onload=function(){
21         // 获取按钮、ul
22         var oMain=document.getElementById("main"),
23             oSub1=document.getElementById("sub1"),
24             oSub2=document.getElementById("sub2");
25             // 为第一个按钮绑定事件
26             oSub1.onclick=function(){
27                 // 点击按钮,ul的【第一个元素节点】背景颜色变成蓝色
28                 if(oMain.firstElementChild){
29                     oMain.firstElementChild.style.background="blue";
30                 }else{
31                     oMain.firstChild.style.background="blue";
32                 }
33
34             }
35             // 为第二额按钮绑定事件
36             oSub2.onclick=function(){
37                 // 点击按钮,ul的【最后一个元素节点】背景颜色变成红色
38                 if(oMain.lastElementChild){
39                     oMain.lastElementChild.style.background="red";
40                 }else{
41                     oMain.lastChild.style.background="red";
42                 }
43
44             }
45
46     }
47     </script>
48 </head>
49 <body>
50     <button id="sub1">第一个li变色</button>
51     <button id="sub2">最后一个li变色</button>
52     <ul id="main">
53         <li>节点1</li>
54         <li>节点2</li>
55         <li>节点3</li>
56         <li>节点4</li>
57         <li>节点5</li>
58     </ul>
59 </body>
60 </html>

仔细观察两篇代码的区别,第二篇代码里面有一个判断,当oMain.firstElement存在时,就使用这个属性,若不存在则使用oMain.firstChild。

为什么可以这么判断呢?因为在IE8以下的浏览器里面,oMain.firstElement获取到的是undefined。(建议自己验证一下)

继续深入

有时候我并非一定要寻找首尾的节点,可能是某一个子节点的兄弟节点,这怎么找呢?那么来认识这两个属性:

nextSibling:下一个兄弟节点                                        nextElementSibling:下一个兄弟节点(W3C标准)

previousSibling:前一个兄弟节点                                 previousElementSibling:前一个兄弟节点(W3C标准)

对比前面的firstChild和lastChild,这两对属性怎么做也就能知道了,IE8以下的浏览器不支持W3C标准属性,所以需要做兼容。

实践出真知,代码走着:【点击按钮为li排序】——知识点糅合,多体会消化

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7     #main{
 8         width: 100px;
 9         color: #fff;
10     }
11     #main li{
12         width: 100%;
13         height: 30px;
14         line-height: 30px;
15         background: #000;
16         margin: 5px auto;
17     }
18     </style>
19     <script type="text/javascript">
20     window.onload=function(){
21         // 获取文本框,按钮,和ul
22         var oUl=document.getElementById("main"),
23             oPre=document.getElementById("sub1"),
24             oNext=document.getElementById("sub2"),
25             oFirst=document.getElementById("sub3"),
26             oLast=document.getElementById("sub4"),
27             oNum=document.getElementById("numText"),
28             oCon=document.getElementById("textCon");
29             // 为oPre按钮绑定事件
30             oPre.onclick=function(){
31                 // 点击按钮后先获取两个文本框的值input.value;
32                 var num=oNum.value,
33                     text=oCon.value,
34                 // 1、获取索引值对应的子节点——children知识点
35                 // 2、然后根据当前子节点获取上一个兄弟节点——previousSibling和previousElementSibling知识点
36                 // 3、再获取其兄弟节点的文本节点——nodeValue知识点
37                 // 注意:这里的书写形式类似于if。。。else,当oUl.children[num].childNodes[0].previousElementSibling存在时,oChild就取其值,若不存在则取oUl.children[num].childNodes[0].previousSibling的值
38                     oChild=oUl.children[num].previousElementSibling.childNodes[0]||oUl.children[num].previousSibling.childNodes[0];
39                 // 为获得的文本节点赋值
40                 oChild.nodeValue=text;
41             }
42             // 为oNext绑定事件——操作方式和上面一样
43             oNext.onclick=function(){
44                 var num=oNum.value,
45                     text=oCon.value,
46                     oChild=oUl.children[num].nextElementSibling.childNodes[0]||oUl.children[num].nextSibling.childNodes[0];
47                 oChild.nodeValue=text;
48             }
49             // 为oFirst绑定事件
50             oFirst.onclick=function(){
51                 var num=oNum.value,
52                     text=oCon.value,
53                     // 注意此处的调用方式与上面的区别
54                     oChild=oUl.firstElementChild.childNodes[0]||oUl.firstChild.childNodes[0];
55                 oChild.nodeValue=text;
56             }
57             // 为oLast绑定事件
58             oLast.onclick=function(){
59                 var num=oNum.value,
60                     text=oCon.value,
61                     oChild=oUl.lastElementChild.childNodes[0]||oUl.children[num].lastChild.childNodes[0];
62                 oChild.nodeValue=text;
63             }
64     }
65     </script>
66 </head>
67 <body>
68     节点索引:<input type="text" id="numText">
69     替换内容:<input type="text" id="textCon">
70     <button id="sub1">替换前一个li</button>
71     <button id="sub2">替换后一个li</button>
72     <button id="sub3">替换第一个li</button>
73     <button id="sub4">替换最后一个li</button>
74     <ul id="main">
75         <li>节点1</li>
76         <li>节点2</li>
77         <li>节点3</li>
78         <li>节点4</li>
79         <li>节点5</li>
80     </ul>
81 </body>
82 </html>

依然两个问题需要思考

1、oChild=oUl.children[num].previousElementSibling.childNodes[0]||oUl.children[num].previousSibling.childNodes[0];的书写方式应该如何理解?

2、为什么每一个绑定点击事件都需要在内部var num=oNum.value, text=oCon.value,这两个变量?

当然,答案都在代码里

时间: 2024-10-17 13:03:22

DOM知识的相关文章

用DOM思想,学习DOM知识

这是关于DOM知识的详细的脑图,请点击下列链接跳转到本人的github:链接 初学者学习DOM,需要有一个清晰的思维导图来引导学习,如果有自我总结的习惯,可以自己再学习过程中总结一份思维导图,这样对于你学习来说,会有极大的帮助,这也是本人极力推荐的学习习惯! D0M操作,大大方便了我们对页面结构的操作.同时,DOM本身知识点并不多,但其兼容性问题很多,如果再做项目的过程中,有兼容要求,就应该注意这一方面的内容. 如果对您有帮助,欢迎关注本人的github账户,谢谢! 如有疑问,请联系wechat

jQuery操作DOM知识总结

jquery操作DOM(节点) 1.创建元素 //$(htmlStr) //htmlStr:html格式的字符串 $("<span>这是一个span元素</span>"); 2.添加元素 2.1.添加新建的元素 //方法一:将jQuery对象添加到调用者内部的最后面. var $span = $("<span>这是一个span元素</span>"); $("div").append($span);

JavaScript DOM知识 (一)

特性.方法 类型.返回类型 说明 nodeName String 节点的名字:根据节点类型而定义 nodeValue String 节点的值:根据节点的类型而定义 nodeType Number 节点的类型常量值之一 ownerDocument Document 返回元素的根节点 fristChild Node 指向在childNodes列表的第一个节点 lastChild Node 指向在chilidNodes列表的最后一个节点 ChildNodes NodeList 所有子节点的列表 pre

HTML之DOM

对于B/S开发,客户端与服务器端的交互是非常必要的,JavaScript的提出解决了很多问题,AJAX的提出也解决了异步通信的问题,更加为用户着想了.而DOM是其中非常基础的知识,在学习AJAX的同时,我学习了一下DOM的相关操作,这篇重点讲一下HTML DOM的相关内容,其实就是在HTML网页上进行的各种操作. 一,概述: DOM(对象文档模型(Document Object Model)),是W3C组织推荐的处理可扩展置标语言的标准编程接口.DOM可以以一种独立于平台和语言的方式访问和修改一

有关DOM的小总结

一直以为DOM(文档对象模型)是JS中最简单的一部分.不可否认,它确实很简单,因为DOM的思维模式有点固定,只需要简单地记住一些固定的方法,所以DOM可以说是所有js(这里指的是客户端的js)入门的起手点. 最近我在做一些有用到DOM的练习时,发现自己的DOM知识非常零散(一直以为掌握的很好),可能有很多朋友都觉得,DOM嘛,也就调用调用几个方法,或者我直接使用jQuery,根本不用考虑DOM的细节.是,这也没错,jQuery对DOM的封装可谓前无古人,但是正如成长一样,跑之前是一定要会走的,所

DOJO DOM 功能

In this tutorial, you'll learn about how to use Dojo to manipulate the DOM in a simple, cross-browser way. Using basic DOM knowledge and only a few Dojo functions, you will be able to efficiently create, read, update and delete elements in the page o

XML - 十分钟了解XML结构以及DOM和SAX解析方式

引言 NOKIA 有句著名的广告语:"科技以人为本".不论什么技术都是为了满足人的生产生活须要而产生的.详细到小小的一个手机.里面蕴含的技术也是浩如烟海.是几千年来人类科技的结晶,单个人穷其一生也未必能掌握其一角.只是个人一直觉得主要的技术和思想是放之四海而皆准的,很多技术未必须要我们从头到尾再研究一遍.我们要做的就是站在巨人的肩膀上.利用其成果来为人们的需求服务. 随着移动互联网时代的大潮.越来越多的App不光是须要和网络server进行数据传输和交互,也须要和其它 App 进行数据

React 入门实例教程

React 入门实例教程 作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 由于 React 的

react

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. 这个项目本身也越滚越大,从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案.衍生的 Re