JavaScript 脚本化文档之一(学习笔记)

DOM 概述

                每个Web浏览器窗口、标签页和框架由一个Window对象所表示。每个Window对象有一个document属性引用了Document对象。Document对象表示窗口的内容，Document对象并非独立的，它是一个巨大的API中的核心对象，叫做文档对象模型（Document Object Model，DOM)，它代表和操作文档的内容。

                文档对象模型（DOM）是表示和操作HTML和XML文档内容的基础API。

选取文档元素

                大多数客户端JavaScript程序运行时总是在操作一个或多个文档元素。当程序启动时，可以使用全局变量document来引用Document对象。但是，为了操作文档中的元素，必须通过某种方式获得或选取这些引用文档元素的Element对象。

                通过ID选取元素

                             任何HTML元素可以有一个id属性，在文档中改制必须唯一，即同一个文档中的两个元素不能有相同的ID。可以用Docuemnt对象的getElementById()方法选取一个基于唯一ID的元素

                通过名字选取元素

                              HTML的name属性最初打算为表单元素分配名字，在表当数据提交到服务器时使用该属性的值。但是区别于id，name属性的值不是必须唯一，而且，和id不以言的是name属性只在少数HTML原书中有效，包括表单、表单元素、<iframe>、<img>元素。

                              基于name属性的值选取HTML元素，可以使用Document对象的getElementsByName()方法。

                              getElementsByName()定义在HTMLDocument类中，而不再Document类中，所以它只针对HTML文档可用，在XML文档中不可用。它返回一个NodeList对象，后者的行为类似一个包含若干Element对象的只读数组。在IE中，getElementsByName()也返回id属性匹配指定值的元素。为了兼容，应该小心谨慎，不要将同样的字符串同时用做名字和ID。

                              如果给定的名字只有一个元素，自动创建的文档属性对应的该值是元素本身。如果有多个元素，该文档属性的值是一个NodeList对象，它表现为一个包含这些元素的数组。

                     通过标签名选取元素

                                 Document对象的getElementsByTagName()方法可用来选取指定类型（标签名）的所有HTML或XML元素。getElementsByTagName()放回一个NodeList对象。在NodeList中返回的元素按照在文档中的顺序排序的。所以可用如下代码选取文档中的第一个<p>元素：

                                 var firstpara = document.getElementsByTagName("p")[0];

                    通过CSS类选取元素

                                   在JavaScript中class是保留字，所以客户端JavaScript使用className属性来保存HTML的class属性值，class睡醒通常与CSS样式表一起使用，对某组内的所有元素应用相同的样式。HTML定义了getElementsByClassNme()方法，它基于其class属性值中的标识符来选取成组的文档元素。

                                  在HTML文档和HTML元素上都可以调用getElementsByClassName()，它返回值是一个实时的NodeList对象，包含文档或元素所有匹配的后代节点。getElementsByClassName()只需要一个字符串参数，但是该字符串可以由多个空格隔开的标识符组成。只有当元素的class属性值包含所有指定的标识符时才匹配，但是标识符的顺序是无关紧要的。注意，class属性和getElementsByClassName()方法的类标识符之间都是用空格隔开的，而不是逗号。

                   通过CSS选择器选取元素

                                  CSS选择器，它用来描述文档中的若干或多组元素。

                                  与CSS3选择器的标准化一起的另一个称做“选择API”的W3C标准定义了获取匹配一个给定选择器的元素的JavaScript方法。该API的关键是Document方法querSeleectorAll()。它接受包含一个CSS选择器的字符串参数，返回一个表示文档匹配的所有元素的NodeList对象。querySelectorAll()返回的NodeList对象并不是实时的：它包含在调用时刻选择器所匹配的元素，但它并不更新后续文档的变化。如果没有匹配元素，返回一个空的NodeList对象。如果选择字符串非法，将抛出一个异常。

                                  文档对象还定义了querySelector()方法。但它只是返回第一个匹配的元素（以文档顺序）或者如果没有匹配的元素就返回null.

                  document.all[]

                                  在DOM标准化之前，IE4引入document.all[]集合来表示所有文档中的元素。document.all[]已经被标准的方法等所取代，现在已经被废弃不应该再使用了。