javascript DOM 结构

四个非常适用的DOM方法：getElementById, getElementByTagName, getAttribute和setAttribute

比較有用的方法：

1、新建一个dom元素，参数为标签名——document.createElement("tagName")

2、把一个元素添加到某个元素下面——parentElement.appendChild(childElement)

3、获得父元素——childElement.parentNode

4、获得第一个子元素——parentElement.firstChild

5、获得所有的标签为tag的子元素——parentElement.getElementsByTagName("tag")

6、还有就是大家熟悉的document.getElementById("xid")和document.getElementsByName("yname")

 

文档：DOM中的”D”

DOM是”Document Object Model”（文档对象模型）的首字母所写。如果没有document(文档)，DOM也无从谈起。

对象： DOM中的”O”

“对象”是一种独立的数据集合。与某个特定对象相关联的变量被称为这个对象的属性；可以通过某个特定的对象去调用的函数被称为这个对象的方法。

JS里，对象分为三种类型：

用户定义对象： 程序员自己创建的对象。

内建对象： 内建在JS语言里的丢向，如Array,Math

宿主对象：浏览器提供的对象

宿主对象中，最基础的是window对象。

window对象对应着浏览器窗口的本身，这个对象的属性和方法通常被称为BOM（浏览器对象模型）。

模型： DOM中的”M”

M代表着”Model”，但说它代表着”Map”也可以。含义都是某种事物的表现形式。DOM代表着被加载到浏览器窗口里的当前网页：浏览器向我们提供了当前网页的地图（或者说模型），而我们可以通过JS去读取这张地图。

先了解表述这个地图的记号的意义：

DOM把一份文档表示为一棵树，这是我们理解和运用这一模型的关键。

节点

节点（note）这个名词来自网络理论，代表着网络中的一个连接点。网络是由节点构成的集合。DOM中的节点类型还包含着其他类型的节点。

元素节点

DOM的原子是元素节点。

一个页面是由元素来构成的。而各种标签则提供了元素的名字。元素可以包含其他的元素。html元素是节点树的根元素。

文本节点

文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含有文本节点。

属性节点

注释也是一种节点类型。元素都或多或少的有一些属性。我们可以利用这个属性对包含在元素里的东西做出准确的描述。并非所有的元素都包含着属性，但素有的属性都会被包含在元素里。

getElementById()方法

DOM提供了一个名为getElementById()的方法，这个方法将返回一个与那个有着给定id属性值的元素节点相对应的对象。

这个方法是与document对象相关联的函数。在脚本代码里，函数名的后面必须跟有一组圆括号。这组圆括号包含着函数的参数。getElementById()方法只有一个参数：你想获得那个元素的id属性值。而且必须放在单引号或双引号里。

document.getElementById(”purchases”)

这个调用将返回一个对象，这个对象对应着document对象里的一个独一无二的元素。

我们还可以利用DOM提供的另外一种方法来提取对象

getElementsByTagName()方法

getElementByTagName()方法将返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。它的参数是XHTML标签的名字：

element.getElementsByTagName(tag)

这个方法返回的是一个数组。

document.getElementsByTagName(”li”)

这个调用将返回一个对象数组，每个对象分别对应着document对象中一个列表项（li）

我们可以利用length属性查出这个数组的元素个数。

for (var I =0 ; I < document.getElementsByTagName(”li”).length; I++) {

alert (typeof document.getElementsByTagName(”li”)[i]);

}

将方法名称赋值给变量，可以缩减打字量并提高函数的可读性，如

var items = document.getElementsByTagName(”li”);

for (var I = 0 ; I < itemts.length; i++) {

alert (typeof items[i]);

}

alert(document.getElementsByTagName(”*”).length);

可以让我们方便的获得一个页面总共有多少个元素节点。

如果只想知道其id属性值是purchase的元素包含着多少个列表项（li）的话，需要更具体的对象来调用这个方法：

var shopping = document.getElementById(”purchase”);

var items = shopping.getElementsByTagName(”*”);

在这两条语句执行完毕后，items数组将只包含其id属性值是purchase的无序清单里的元素。

3.4 趁热打铁

简要总结：

一份文档就是一棵节点树

节点分为不同类型：元素节点，属性节点和文本节点等。

getElementById()方法将返回一个对象，该对象对应着文档里的一个特定的元素节点

getElementByTagName()方法将返回一个对象数组，它们分别对应着文档里的一个特定的元素节点

这些节点中的每个都是对象

3.4.1 getAttribute()方法

我们可以利用getAttribute()方法把获得的元素对象各种属性值查询出来。

var paras = document.getElementsByTagName(”p”);

for (var i = 0; i < paras.length; i++) {

alert (paras[i].getAttribute(”title”));

}

null是JS语句中的空值，若文档中含有多个未定义title属性的p标签，则会显示null。让我们重新修改这段代码，使其只在title属性存在时才弹出消息，同时提高可读性。

var paras = document.getElementsByTagName(”p”);

for (var i = 0; i < paras.length; i++) {

var title_text = paras[i].getAttribute(”title”);

if (title_text != null) {

alert(title_text);

}

}

进一步把代码缩短：当检查某项数组是否是null值时，我们其实是在检查它是否存在。这种检查可以简化为直接把被检查的数据用作if语句的条件。

if(title_text != null)可以替换为　if(title_text)

3.4.2 setAttribute()方法

修改节点属性值的方法。

此方法也是只能通过元素节点对象调用的函数，需要向它传递两个参数：

object.setAttribute(attribute, value);

下面的语句我们首先获得purchase属性的元素，然后修改这个元素的属性值。

var shopping = document.getElementById(”purchase”);

shopping.setAttribute(”title”, “a list of goods”);

若一个元素没有setAttribute()方法中定义的属性值，则会先创建这个属性，然后再赋值。

一个细节： setAttribute()方法对文档的修改，将似的文档在浏览器窗口里的显示效果发生变化，但是源代码中不会有任何修改，也就是说，这个方法的修改不会影响任何原来的文档数据，这个是DOM的工作模式决定的：先加载文档的静态内容，再以动态方式对他们进行刷新，刷新不会影响文档的静态内容。

第三章总结：

getElementById()方法

getElementsByTagName()方法

getAttribute()方法

setAttribute()方法

这四个方法将是DOM的基石。

//實例

Html代码

 

1. <SCRIPT LANGUAGE="JavaScript">      
2.       
3.      //列表内容       
4.      var listItems=['aaa','bbb','ccc','ddd','eee'];       
5.       
6.      //创建一个ol列表，上面的数组为每个li的内容       
7.      function createList()       
8.      {       
9.          var myol=document.createElement("ol");       
10.          for(var it in listItems)       
11.          {       
12.              var tli=document.createElement("li");       
13.              tli.innerHTML=listItems[it];       
14.       
15.              //鼠标单击时调用changeColor函数       
16.              tli.onclick=changeColor;       
17.              //鼠标双击时调用removeMe函数       
18.              tli.ondblclick=removeMe;       
19.       
20.              myol.appendChild(tli);       
21.          }       
22.          document.body.appendChild(myol);       
23.      }       
24.       
25.      function changeColor()       
26.      {       
27.          //changeColor是自己加的，考虑到undefinded也是false，所以没有初始化。       
28.          //动态语言就是好，对象的属性和方法可以随便加。       
29.          if(this.changeColor)       
30.          {       
31.              this.style.background="yellow";       
32.              this.changeColor=false;       
33.          }       
34.          else       
35.          {       
36.              this.style.background="lightgreen";       
37.              this.changeColor=true;       
38.          }       
39.      }       
40.       
41.      function removeMe()       
42.      {       
43.          //先找到父节点，再用父节点删除自己       
44.          var p=this.parentNode;       
45.          p.removeChild(this);       
46.       
47.          //如果这个ul元素下的li子元素已经删除光了，就把这个ul元素也删掉。       
48.          if(p.getElementsByTagName('li').length==0)       
49.          {       
50.              p.parentNode.removeChild(p);       
51.          }       
52.      }       
53.    </SCRIPT>      
54. </HEAD>      
55.       
56. <BODY>      
57.      <button onclick="createList()">创建列表button>      
58. </ BODY>      
59. </HTML>