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];