js学习之dom选择器

                                                                                   js学习之dom选择器

关于dom选择器，其是对于html和XHTMl的选择，好对其进行一系列的操作。在这里要明白html和XHTML的最主要的区别是什么，那就是XHTML可以自己定义，而html不行。

所以对于dom来说我们首先需要明白的就是Document对象，每一个载入浏览器的HTML文档都会成为Document对象，Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问。（注意，document是Window对象的一部分，可以通过Window.document来访问）

下面就是document对象的方法

document.getElementById('')//此时选的是单个元素，除了ID选择器以外，其余的都是类数组
ducument.getElementsByTagName（''）//此时选的是类数组
document.getElementsByClassName('')//IE8和IE8一线的ie版本没有
document.getElementsByName('')//name属性的兼容性不好（表单，表单元素，img ,iframe）

这两个选择器是静态的，不是实时的，就是当你用下面两种选择器去改变页面中的内容时，页面的内容是不会被改变的。
document.querySelector()//写css选择器，选的是单个元素
document.querySelectorAll()//写css选择器，选的是类数组

下面的就是关于节点类型的

常见的节点类型有以下几种

元素节点——>1
 属性节点——>2
 注释节点——>8
 文本节点——>3
 document——>9

节点的四个属性，常用的节点属性有两个第一个就是nodeValue和nodeType，一下就是四个属性及其作用

nodeName//元素的标签名，以大写的形式表示，只读
 nodeValue//Text节点或Comment节点
 nodeType//该节点的类型，只读
 attributes//Element节点的属性集合

通过节点树之间的关系来对元素进行选择，当你指定某一个节点后，可以通过其来寻找其父节点，寻找其子节点，寻找其兄弟节点，通俗的说就是去查找相关节点。

遍历节点树选择
parentNode ?——>父节点（一个元素只能有一个节点，最顶端的父节点是#document）
firstChild——>第一个子节点
lastChild——>最后一个子节点
nextSibling——>后一个兄弟节点
previousSibling——>前一个节点
遍历元素节点树
parentElement——>元素父节点（IE不兼容）
children——>元素子节点
firstElementChild——>第一个元素子节点（IE不兼容）
lastElementChild——>最后一个元素子节点（IE不兼容）
nextElementSibling/previousElementSlibling——>后/前一个元素节点（IE不兼容）