js获取DOM节点的几种方式

一、通过元素类型的方法来操作：

1. document.getElementById();//id名，
2. document.getElementsByTagName();//标签名
3. document.getElementsByClassName();//类名
4. document.getElementsByName();//name属性值，一般不用
5. document.querySelector();//css选择符模式，返回与该模式匹配的第一个元素，结果为一个元素；如果没找到匹配的元素，则返回null
6. document.querySelectorAll()//css选择符模式，返回与该模式匹配的所有元素，结果为一个类数组

注意：

• 前缀为document，意思是在document节点下调用这些方法，当然也可以在其他的元素节点下调用

  二、根据关系树来选择（遍历节点树）：

  【先简单介绍一下节点：

  DOM（文档对象模型）可以将任何HTML、XML文档描绘成一个多层次的节点树。所有的页面都表现为以一个特定节点为根节点的树形结构。html文档中根节点为document节点。

  所有节点都有nodeType属性，代表节点的不同类型，通过nodeType属性可以来判断节点的类型。经常使用的节点主要有以下几种类型：

• Element类型（元素节点）：nodeType值为 1
• Text类型（文本节点）：nodeType值为 3
• Comment类型（注释节点）：nodeType值为 8

• 所有的节点都有   hasChildNodes()方法    判断有无子节点  有一个或多个子节点时返回true】

  通过一些属性可以来遍历节点树：

• parentNode//获取所选节点的父节点，最顶层的节点为#document
• childNodes //获取所选节点的子节点们 
• firstChild //获取所选节点的第一个子节点
• lastChild //获取所选节点的最后一个子节点
• nextSibling //获取所选节点的后一个兄弟节点  列表中最后一个节点的nextSibling属性值为null
• previousSibling //获取所选节点的前一兄弟节点   列表中第一个节点的previousSibling属性值为null

 

三、基于元素节点树的遍历（遍历元素节点树）：

1. parentElement　//返回当前元素的父元素节点（IE9以下不兼容）
2. children  // 返回当前元素的元素子节点
3. firstElementChild //返回的是第一个元素子节点（IE9以下不兼容）
4. lastElementChild  //返回的是最后一个元素子节点（IE9以下不兼容）
5. nextElementSibling  //返回的是后一个兄弟元素节点（IE9以下不兼容）
6. previousElementSibling  //返回的是前一个兄弟元素节点（IE9以下不兼容）