文档节点（document） 返回值9为对应的常量
Node.document_node
元素节点 （element）返回值1为对应常量
Node.ELEMENT_NODE
Node.ATTRIBUTE_NODE
文本节点(text) 返回值3为对应常量
Node.TEXT_NODE
文档片断节点（documentFragment）返回值11为对应常量
Node.DOCUMENT_FRAGMENT_NODE
+ 注释节点（comment）返回值8为对应常量。
##选区文档内容
DOM里存在着许多选区或者查询一个或多个元素的方法
+ 用指定的id属性
+ 用指定的标签名
+ 用指定的css类
+ 用指定的name属性
+ 匹配指定的css选择器
##DOM通过id选区元素
之前我们用的document.getElementById（）这个方法，可以可以准确的通过id找到元素，但实际上来说它其实是属于dom。
demo：var btn = document.getElementById("btn");
````
当然也可以通过id选择一组元素。
/函数里面的是正则/
function getElements(/*ids*/) {
var elements = {};
for(var i=0;i<arguments.length;i++){
var id = arguments[i]; //此时arguments为复数
var elt = document.getElementById(id); //通过id获取了元素
if(elt === null) { //判断elt是否为空
throw new Error("No element with id:" + id);
//判断条件成立时控制台发出错误
}
elements[id] = elt;
}
return elements;
}getElementsByTagName()方法可以用来选取指定类型的(标签名)所有的HTML元素或者XML元素。
//此时之所以要加【0】是应为标签选择器选择的不是一个可以直接使用的量
var test = document.getElementsByTagName(‘p’)[0];Tip:html标签不区分大小写，在html文档中使用getElementsByTagName()时，将进行不区分大小写的标签名比较。
Tip：给getElementsByTagName()传递通配符*,将获得页面中的所有的元素。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<span>hello</span>
</div>
</body>
<script>
//根据元素的标签名选中了元素
var div = document.getElementsByTagName('div');
var span = div.getElementsByTagName('span');
</script>
</html>
使用方式和id类似，但是应为类选择器选择的属性不唯一，所以getelement后面加个s表示附属，因为是复数，所以选取的元素也不是一个可以直接使用的量。
demo：
var one = document.getElementsByClassName(‘class值’);使用案例
demo：
<script>
var div = document.getElementsByClassName('d1 no'); // 选中class类名中包含d1 和no的标签
var no = document.getElementsByClassName('no');// 匹配了class类名中带有no的标签
</script>
这个方法只能够使用一个字符串参数，但是这个字符串参数可以由多个空格隔开的标识符组成。只有当元素的class属性值包含所有指定的标识符时才能匹配，但是顺序无关紧要。
html中也可以通过name来选区元素，但是html中并不是每个元素都拥有name属性的，这其中包括表单，表单元素，iframe 和 img元素。，在表单数据提交到服务器的时候使用改属性的值，类似与id。但是和id的区别是，name属性的值不是必须唯一的，多个元素可以存在相同的name值，类似于input标签里的checkbox多选标签radios单选标签
使用方法：
var input = document.getElementsByName('username');
学习了c3选择器以后，在js中我们也可以根据选择器来选取元素，随着c3选择器的标准化，w3c制定了另一个被称为“选择器API”的方法，来获取匹配一个给定选择器的元素方法quertSelectorAll.
该方法接受一个字符串参数，这个参数包含一个css选择器，返回一个表示文档中匹配选择器的所有元素的nodelist对象（说白了就是把所有符合你要求的对象以列表的形式给你展现出来）；
需要注意的是，这个方法返回的对象的内容并不是实时的：包含在调用的时刻选择器所匹配的元素，但是并不包含在调用之后匹配的元素。如果没有匹配的元素，将返回一个空的对象。如果选择器异常，将抛出一个异常。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
<script>
var div = document.querySelectorAll('div');
console.log(div);
</script>
</html>这个方法与上面类似，只是这个选择器只返回第一个匹配的元素，按照文档顺序返回，如果没有匹配就返回null。
var div = document.querySelector('div');
console.log(div);Tip:在css3中，新增了两个选择器：:first-line 和 :first-letter 等伪元素。这种伪元素实际上匹配的文本节点的一部分，而不是实际的元素。那么当我们使用以上的两种方法的时候，就不会匹配成功。
而且，在很多的浏览器中拒绝返回：link 和:visited等伪类的匹配结果，认为这样会泄露用户的浏览信息。
一旦选取了文档中的一个元素，有时我们需要查找文档中与之在结构上相关的部分(父亲，兄弟，子女)。针对此种问题，js给了我们两个API使用，节点对象树API 和 元素对象树API。
Node定义的重要属性:
childNodes 该节点的子节点
firstChild lastChild 该节点中的子节点的第一个或者最后一个
nextSibling previoursSibling 该节点的兄弟节点的前一个和下一个
nodeValue text节点或者Comment节点的文本内容
nodeName 元素的标签名，以大写的形式显示。
tip：以上的API对文档文本非常敏感，回车空格注释都算在内。
第二部分
children 属性 元素属性
firstElementChild lastElementChild
nextElementSibling perviousElementSibling
childElementCount 子元素的数量，返回值和childred.length相等
原文：https://www.cnblogs.com/wangjiahui/p/10884335.html