JavaScript基础(22)_DOM查询

获取元素节点对象

通过window的属性 "document对象" 调用(注意看：element没s的才是一个，带s的是一类数组)：
1、getElementById():通过id属性获取一个元素节点对象。
2、getElementsByTagName():通过标签名获取一组元素节点对象(类数组对象)。
3、getElementsByName():通过name属性获取一组元素节点对象(类数组对象，主要操作表单项)。
4、getElementsByClassName():通过class属性获取一组元素节点对象(类数组对象，不支持IE8及以下的浏览器)。
5、querySelector():通过css选择器的字符串作为参数来获取一个元素节点对象(推荐)
6、querySelectorAll():通过css选择器的字符串作为参数来获取一组元素节点对象(推荐，类数组对象)

获取元素节点对象的父节点、兄弟元素、兄弟节点

通过 "具体的元素节点对象" 调用：
1、parentNode:属性，表示当前对象的父节点对象。
2、previousElementSibling:属性，获取前一个兄弟元素对象(不支持IE8及以下的浏览器)。
3、nextElementSibling:属性，获取后一个兄弟元素对象(不支持IE8及以下的浏览器)。
4、previousSibling:属性，获取前一个兄弟节点对象(包括空白文本节点)。
5、nextSibling:属性，获取后一个兄弟节点对象(包括空白文本节点)。

获取元素节点对象的后代节点、子元素、子节点

通过 "具体的元素节点对象" 调用：
1、getElementsByTagName():方法，通过标签名获取一组 "当前节点对象" 的 "后代节点对象"。(此时范围为当前节点对象内，而非整个文档)
2、children:属性，获取当前元素的所有子元素。
3、firstElementChild:属性，获取当前元素的第一个子元素(不支持IE8及以下的浏览器)。
4、childNodes:属性，表示当前节点的所有子节点(包括空白文本节点在内的所有子节点)。
5、firstChild:属性，表示当前节点的第一个子节点(包括空白文本节点)。
6、lastChild:属性，表示当前节点的最后一个子节点(包括空白文本节点)。
注意：在IE8及以下的浏览器中，不会将空白文本节点当成子节点。

获取元素节点对象的属性

语法：元素.属性名。
例如:元素.id  元素.name  元素.value。
innerHTML：属性，获取元素内部的HTML代码，对于自结束标签，这个属性没有意义。
innerTEXT：属性，获取元素内部的文本内容。
nodeValue：属性，获取节点对象内部的文本内容。(其实 firstChild.nodeValue 和 innerHTM 等价 )
注意：读取class属性时，class作为js保留字不能采用这种方式(如元素.class),应改为元素.classname。

获取body标签

var body = document.body    
相当于：var body = getElementsByTagName("body")[0]。

获取html根标签

var html = document.documentElement   
相当于：var html = getElementsByTagName("html")[0]。

获取页面中所有的元素

var all = document.all
相当于：var all = getElementsByTagName("*")。