首页 > 代码库 > 脚本化文档（一）
脚本化文档（一）
getElementById（）：Document对象的该方法通过id获取元素，在低于IE8版本的浏览器中，getElementById（）对匹配元素的ID不区分大小写，而且也返回匹配name属性的元素。
getElementsByName（）：Document对象的该方法通过name属性获取html元素，该函数定义在HTMLDocument类中，而不在Document类中，所以它只针对HTML文档可用，在XML文档中不可用。，在IE中，getElementsByName（）也返回id属性匹配指定值的元素。为了兼容，应该小心谨慎，不要将同样的字符串同时用做名字和id。为某些html元素设置name属性将自动在Window对象中创建匹配指定值的元素。如果给定的名字只有一个元素，自动创建的文档属性对应的该值是元素本身。如果有多个元素，该文档属性的值是一个NodeList对象，它表现为一个包含这些元素的数组。
getElementsByTagName（）：Document对象的这个方法用来选择指定类型（标签名）的所有HTML或XML元素。Element类也定义了这个方法，它只选取调用该方法的元素的后代元素。
document.body和document.head分别用来获取HTML文档中<body>和<head>元素。Document类的documentElement属性指代文档的根元素。
结点列表和HTML集合：getElementsByName()和getElementsByTagName()都返回NodeList对象，而类似的document.image和document.forms的属性为HTMLCollection对象。这两个对象不是历史文档的一个静态快照，而通常是实时的，并且当文档变化时他们所包含的元素列表能随之改变，这是其中一个最重要和令人惊讶的特性。假设在一个没有<div>元素的文档中调用getElementsByTagName(‘div’)，此时返回值是一个length为0的NodeList对象。如果再在文档中插入一个新的<div>元素，此元素将自动成为NodeList的一员，并且它的length属性变成1。通常，NodeList和HTMLCollection的实时性非常有用。但是，如果在迭代一个NodeList对象时在文档中添加或删除元素，首先会需要对NodeList对象生成一个静态的副本。
var tmp=Array.prototype.slice.call(nodelist,0);
getElementsByClassName():通过类名来选取元素。在HTML文档和HTML元素上都可以调用getElementByClassName(),它的返回值是一个实时的NodeList对象，包含文档或元素所有匹配的后代节点。该方法只需要一个字符串参数，但是该字符串可以由多个空格隔开的标识符组成。只有当元素的class属性值包含所有指定的标识符时才匹配，但是标识符的顺序是无关紧要的。注意，class属性和geElementsByClassName（）方法的类似标识符之间都是用空格隔开的，而不是逗号。
如今的Web浏览器依赖于文档开头处对<!DOCTYPE>声明的严格程度来选择“怪异模式”或“标准模式”方式显式HTML文档。怪异模式是为了向后兼容而存在的，其中一个怪异行为就是class属性中和css样式表中的类标识符不区分大小写。geElementByClassName（）方法使用同样的样式匹配算法。如果文档以怪异模式渲染，该方法将执行不区分大小写的字符串比较；否则，该比较区分大小写。该方法在IE8及以下未实现。
querySelectorAll（）:它接受包含一个CSS选择器的字符串参数，返回一个表示文档中匹配选择器的所有元素的NodeList对象。该对象并不是实时的:它包含在调用时刻所匹配的元素，但它并不更新后续文档的变化。如果没有匹配的元素，querySelectorAll（）将返回一个空的NodeList对象。如果选择器字符串非法，querySelectorAll（）将抛出一个异常。此外，文档对象还定义了querySelector（）方法：返回第一个匹配的元素（以文档顺序）或者如果没有匹配的元素就返回null。
这两个方法在Element节点中也有定义（并且也在DocumentFragment节点中）。在元素上调用时，指定的选择器仍然在整个文档中进行匹配，然后过滤出结果集以便它只包含指定元素的后代元素。这看起来是违反常规的，因为它意味着选择器字符串能包含元素的祖先而不仅仅是上述所匹配的元素。
CSS定义了“:first-line”和“：first-letter”:等伪元素。在CSS中，他们匹配文档节点的一部分而不是实际元素。如果和querySelectorAll（）或querySelector（）一起使用它们是不匹配的。而且，很多浏览器拒绝返回“：link”和“：visited”等伪类的匹配结果，因为这会泄露用户的浏览历史记录。
所有当前的浏览器都支持querySelector（）和querySelectorAll（）方法。但是注意，这些方法的规范并不要求支持CSS3选择器：鼓励浏览器支持和在样式表中一样的选择器集合。当前的浏览器除了IE都支持CSS3选择器。IE7和IE8支持CSS2选择器。
Document对象，它的Element对象和文档中表示文本的Text对象都是Node对象。Node定义了以下重要的属性：
1） parentNode：该节点的父节点，或者针对类似Document对象应该是null，因为他没有父节点。
2） childNodes：只读的类数组对象（NodeList对象），它是该节点的子节点的实时表示。
3） firstChild、lastChild：该节点的子节点中的第一个和最后一个，如果该节点没有子节点则为null。
4） nextSibling，previousSibling：该结点的兄弟结点中的前一个和下一个。具有相同父节点的两个节点为兄弟节点。节点的顺序反映了它们在文档中出现的顺序。这两个属性将节点之间以双向链表的形式连接起来。
5） nodeType：该节点的类型，9代表Document节点，1代表Element节点，3代表Text节点，8代表Comment节点，11代表DocumentFragment节点。
6） nodeValue：Text节点或Comment节点的内容。
7） nodeName元素的标签名，以大写的形式表示。
注意，Text和Comment节点没有children属性，它意味着Node.parentNode属性不可能返回Text或Comment节点。任何Element的parentNode总是另一个Element，或者，追溯到树根的Document或DocumentFragment节点。
Element属性：firstElementChild、lastElementChild、nextElementSibling、previousElementSibling、childElementCount（子元素的数量。返回值和children.length值相等）以上和Node对象的属性类似，只是这些属性只代表Element。
HTML属性作为Element属性：HTML属性名不区分大小写，但JavaScript属性名则大小写敏感。从HTML属性名转换到JavaScript属性名应该采用小写。但是，如果属性名包含不止一个单词，则将除了第一个单词以外的单词的首字母大写，例如：defaultChecked和tabIndex。有些HTML属性名在JavaScript中是保留字。对于这些属性，一般的规则是为属性名加前缀“html”。例如，HTML的for属性（<lable>元素）在JavaScript中变为htmlFor属性。“class”在JavaScript中是保留字（但还未使用），它是HTML非常重要的class属性，是上面规则的一个例外：在JavaScript代码中它变为className。表示HTML属性的值通常是字符串。当属性为布尔值或数值，属性也为对应的类型，而不是字符串。
本文出自 “虎哥的博客” 博客，请务必保留此出处http://7613577.blog.51cto.com/7603577/1571818
脚本化文档（一）