DOM内容梳理2

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相等