JavaScript-DOM2（内容整理）
这两天新的知识有点多有点杂一时半会没有整理过来，以后不出意外会一直更行。
js节点类型（NODETYPE）
查看节点类型 nodetype属性，返回的结果会根据对象节点的不同返回不同的值。
-
文档节点（document） 返回值9为对应的常量
Node.document_node -
元素节点 （element）返回值1为对应常量
Node.ELEMENT_NODE
- 属性节点(attr) 返回值2为对应常量
Node.ATTRIBUTE_NODE
-
文本节点(text) 返回值3为对应常量
Node.TEXT_NODE -
文档片断节点（documentFragment）返回值11为对应常量
Node.DOCUMENT_FRAGMENT_NODE
- 文档类型节点 返回值10为对应常量
Node.DOCUMENT_TYPE_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;
}
DOM通过标签名获取元素
getElementsByTagName()方法可以用来选取指定类型的(标签名)所有的HTML元素或者XML元素。
//此时之所以要加【0】是应为标签选择器选择的不是一个可以直接使用的量
var test = document.getElementsByTagName(‘p’)[0];
Tip:html标签不区分大小写，在html文档中使用getElementsByTagName()时，将进行不区分大小写的标签名比较。
Tip：给getElementsByTagName()传递通配符*,将获得页面中的所有的元素。
如果要获取一个元素内的子元素可以看一下demo：
<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>
DOM制定css类名选择元素
使用方式和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属性值包含所有指定的标识符时才能匹配，但是顺序无关紧要。
DOM通过name属性来选取元素
html中也可以通过name来选区元素，但是html中并不是每个元素都拥有name属性的，这其中包括表单，表单元素，iframe 和 img元素。，在表单数据提交到服务器的时候使用改属性的值，类似与id。但是和id的区别是，name属性的值不是必须唯一的，多个元素可以存在相同的name值，类似于input标签里的checkbox多选标签radios单选标签
使用方法：
var input = document.getElementsByName('username');
DOM通过css选择器选取元素
学习了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>
querySelector()
这个方法与上面类似，只是这个选择器只返回第一个匹配的元素，按照文档顺序返回，如果没有匹配就返回null。
var div = document.querySelector('div');
console.log(div);
Tip:在css3中，新增了两个选择器：:first-line 和 :first-letter 等伪元素。这种伪元素实际上匹配的文本节点的一部分，而不是实际的元素。那么当我们使用以上的两种方法的时候，就不会匹配成功。
而且，在很多的浏览器中拒绝返回：link 和:visited等伪类的匹配结果，认为这样会泄露用户的浏览信息。
文档结构和遍历
一旦选取了文档中的一个元素，有时我们需要查找文档中与之在结构上相关的部分(父亲，兄弟，子女)。针对此种问题，js给了我们两个API使用，节点对象树API 和 元素对象树API。
节点对象树API（作为节点树的文档）
Node定义的重要属性:
-
parentNode 找到节点的父节点;
-
childNodes 该节点的子节点
-
firstChild lastChild 该节点中的子节点的第一个或者最后一个
-
nextSibling previoursSibling 该节点的兄弟节点的前一个和下一个
-
nodeValue text节点或者Comment节点的文本内容
-
nodeName 元素的标签名，以大写的形式显示。
tip：以上的API对文档文本非常敏感，回车空格注释都算在内。
元素对象树API -- 作为元素树的文档
这个API所提供的方法会将文档看做Element文档树，会忽略掉Text和Comment节点。（简单点讲就是忽略文本和注释的节点）。
- 第一部分
children 属性 子属性 - 第二部分
children 属性 元素属性
elememt属性详解：
-
firstElementChild lastElementChild
-
nextElementSibling perviousElementSibling
-
childElementCount 子元素的数量，返回值和childred.length相等