1.按id查找
document.getElementById();
支持：所有主流浏览器
2.按标签名查找
document.getElementsByTagName();//标签名；Elements加了S，选出来是类数组；
支持：所有主流浏览器
3.按name属性查找
document.getElementsByName();//name属性，部分标签可以；Elements加了S，选出来是类数组；
支持：所有主流浏览器
4.按class属性查找
document.getElementsByClassName();//class；Elements加了S，选出来是类数组；IE9以下不支持；
支持： IE9+
5.1 按选择器选择（返回文档中匹配指定选择器的一个元素）
document.querySelector();
支持： IE8+
5.2 按选择器选择（返回返回所有的元素）
document.querySelectorAll()
支持： IE8+
5.3 选择器参数（CSS选择器：https://www.runoob.com/cssref/css-selectors.html）
| 参数 | 类型 | 描述 |
| CSS 选择器 | String |
必须。指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。 对于多个选择器，使用逗号隔开，返回一个匹配的元素。 |
遍历节点数
parentNode //父级元素，顶级父级元素为document； childNodes //子节点们 firstChild //第一个子节点 lastChild //最后一个子节点 nextSibling //后一个兄弟节点 previousSiling //前一个兄弟节点
备注：注意子节点，不仅仅包括元素节点，文本、注释等都属于节点；
基于元素遍历节点树
parentElement //(IE9及以下版本不支持) children nextElementSibling // (IE9及以下版本不支持) previousElementSibling //(IE9及以下版本不支持) firstElementChild //(IE9及以下版本不支持) lastElementChild // (IE9及以下版本不支持)
备注：除了children，其他几个IE9以下版本不支持；
补充节点知识：
1.在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
1. nodeName : 节点的名称
2. nodeValue ：节点的值
3. nodeType ：节点的类型 （重点属性，重点学习）
一、nodeName 属性: 节点的名称，是只读的。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
二、nodeValue 属性：节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
| 元素类型 | 节点类型 |
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
原文地址：https://www.cnblogs.com/wuanyun/p/11141896.html