javaScript扫盲之DOM基础（一）

 

读《JavaScript DOM编程艺术》笔记

1、DOM

DOM代表着加载到浏览器窗口的当前网页。我们通过JavaScript读取和操作DOM。

根元素是html，代表整个文档。

 

2、节点：

文档是由节点构成的集合。

元素节点：DOM的原子是元素节点。标签的名字就是元素的名字。
文本节点：文本节点总是被包含在元素节点的内部。
属性节点：属性节点用来对元素做出更具体的描述。

属性总是被放在起始标签里，所以属性节点总是被包含在元素节点中。并非所有的元素都包含属性，但所有的属性都包含在元素里。

 

Eg:   <li class=”name”> MyName</li>

元素节点：<li class=”name”>和<li>

文本节点：MyName

属性节点 class=”name”

 

3、 获取元素

三种方法：通过元素ID、通过标签名字、通过类名字。

getElementById

返回一个对象。是document对象特有的函数。

操作符typeof给出其操作数的数据类型，是一个字符串、数值、函数、布尔值还是对象。

 

getElementsByTagName

返回一个数组。此函数允许把一个通配符作为它的参数。为了把通配符与乘法操作符区别，通配符要放在引号里。

Eg：获得id属性值是purchase的无序清单里的元素：

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

 var terms = shopping.getElementsByTagName(“*”);

 

getElementsByClassName

返回一个数组。

此函数还可以用来查找带有多个类名的元素。要指定多个类名，只要在字符串函数中用空格分隔类名即可，参数的顺序随便，即”a b”与”b a”意思一样。

Eg： alert(document.getElementsByClassName(“important sale”).length);

 

4、获取和设置属性

getAttribute

此方法不属于document对象，只能通过元素节点对象调用。

 

setAttribute

两个参数：一个是属性名，一个是新的属性值。若不存在指定的属性，则先创建这个属性，再设置它的值。

 

【注意】通过setAttribute对文档进行修改后，在通过浏览器的view source（查看源代码）选项去查看文档的源代码时，看到的仍是改变前的属性值，也就是说，setAttribute作出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力：对文档内容进行刷新却不需要在浏览器里刷新页面。

 

 

 

5、DOM属性

childNodes属性

在一棵节点树上，childNodes属性可以用来获取任何一个元素的所有子元素，它是一个包含这个元素所有子元素的数组。

Eg：得到文档中的body元素的全体子元素：

 document.getElementsByTagName(“body”)[0].childNodes;

 

nodeType属性

由childNodes属性返回的数组包含所有类型的节点。事实上，文档中几乎每一样东西都是一个节点，甚至连空格和换行符都会被解释为节点，而它们也全部包含在childNodes属性所返回的数组当中。

 

nodeType属性总共有12种可取值，但其中仅有3种具有实用价值。

元素节点的nodeType属性值是1；

属性节点的nodeType属性值是2；

文本节点的nodeType属性值是3。

 

nodeValue属性

用来得到和设置一个节点的值。

Eg：<p id="description">Choose an image.</p> 若此节点为description。

注意：description.nodeValue为null；description.childNodes[0].nodeValue为Choose an image.

因为Choose an image是description的第一个子节点（文本元素）。

或者是description.firstChild.nodeValue。

 

为nodeValue赋值：description.firstChild.nodeValue = “the new value”;

 

 firstChild属性和lastChild属性

Node.firstChild; 等价于 node.childNodes[0];

Node.lastChild; 等价于 node.childNodes[node.childNodes.length-1];