JS基础(DOM查询)

获取元素节点
通过document对象调用
1.getElementById()
-通过id属性获取一个元素节点对象
2.getElementsBy TagName(）
-通过标签名获取一组元素节点对象
3.getElementsByName(）
-通过name属性获取一组元素节点对象

获取元素节点的子节点
通过具体的元素节点调用
1.getElementsByTagName(）
-方法，返回当前节点的指定标签名后代节点
2.childNodes
-属性，表示当前节点的所有子节点
childNodes属性会获取包括文本节点在内的所有节点
根据DOM规定，标签间空白也会当成文本节点

注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
所以该属性在IE8中会返回4个子元素而其他浏览器是9个

children属性可以获取当前元素的所有子元素

3.firstChild
-属性，表示当前节点的第一个子节点
根据DOM规定，标签间空白也会当成文本节点
firstElementChild获取当前元素的第一个子元素
firstElementChild不支持IE8及以下的浏览器，如果需要兼容他们尽量不要使用

4.lastChild
-属性，表示当前节点的最后一个子节点
根据DOM规定，标签间空白也会当成文本节点
lastElementChild获取当前元素的最后一个子元素
lastElementChild不支持IE8及以下的浏览器，如果需要兼容他们尽量不要使用

获取父节点和兄弟节点
通过具体的节点调用
1.parentNode
-属性，表示当前节点的父节点
2.previousSibling（也可能获取到空白的文本）
-属性，表示当前节点的前一个兄弟节点
3.nextSibling（也可能获取到空白的文本）
-属性，表示当前节点的后一个兄弟节点

previousElementSibling获取前一个兄弟元素，IE8及以下不支持

innerText
-该属性可以获取到元素内部的文本内容
-它和innerHTML类似，不同的是它会自动将html标签去除

文本框的value属性值，就是文本框中填写的内容

在document中有一个属性body，它保存的是body的引用

document.documentElement保存的是html根标签

document.all代表页面中所有的元素

根据元素的class属性值查询一组元素节点对象
getElementsByClassName()可以根据class属性值获取一组元素节点对象，
但是该方法不支持IE8及以下的浏览器

document.querySelector()
-需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
-虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
-使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个

document.querySelectorAll()
-该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
-即使符合条件的元素只有一个，它也会返回数组