ECMAScript(javaScript) DOM选择器

1.DOM介绍

DOM（文档对象模型）是专门指向HTML与XML文档的一种应用程序编程接口 DOM绘制一个具有层次的节点树开发人员可根据其对页面内容进行增、删、查、改

在这里会介绍DOM的增删查改的方法：

2.document介绍

当浏览器被访问就会加载HTML 文档这是你所加载的页面就是一个 Document 的对象也就是说Document 对象是 HTML 文档的根节点举个例子我们在编写HTML时 <html>标签是整个HTML中最外层的结构但这是可见结构也就是说他其实是一个根标签也就是在这个标签外面还有内容这个内容就是Document 所以这就让我们可以根据 Document 对HTML 页面中的所有元素进行访问

一、DOM选择器-getElementBy：

1. document.getElementById("id名") 利用id名进行选择

利用document.getElementById("")这种方法可以选择HTML的同一ID名内的元素这种f方法与CSS的方法相似

这行代码看似很长但是讲这句拆开立刻就可以理解 get(获得) Element(元素) By(通过) Id(ID) 从单词字面上就可以直接理解然后将单词用驼峰命名法合并

<body>
    <section id = "madeInIvan"> //选择器不会选择到这里
        <div id = "title">
        </div>
    </section>
</body>
<script>
    document.getElementById("title") //这样就可以通过ID title 选择到id名为title的div标签
</script>

在IE8以前元素 id 是不区分大小写的在IE8以后元素 id 是严格区分大小写的借用上面的例子在IE8以前如果name=title的时候通过这种选择器也可以被选择出来后面严格id大小写这种选择器也就有了严谨性

2.document.getElementsByTagName("标签名字") 利用标签名进行选择

利用document.getelmentsByTagName 可以通过标签名字选择对标签进行选择这种选择不像ID 是一一相对的所以你可以看到这里的Elements中结尾是有一个s的也就说这里是一个复数

<div>
</div>
<script>
document.getElementsByTagName("div")[0] //这样可以将所有标签div的内用加入到类数组中 然后利用类数组的下标进行选择
</script>

·用这个方法可以拿出页面内所有的div标签然后把他加入到一个类数组中请注意这里是一个类数组并非是数组也就是说不可以用数组的方法并且Dom生产的东西基本上都是类数组 getElementsByTagName的兼容性非常好从IE4开始就可以使用并且支持任何的浏览器

3.document.getElementsByClassName("class名")利用class名进行选择

利用document.getelmentsByClassName可以通过标签内的class名进行选择这种选择的方式与document.getElementById非常相似但是选择的结果与document.getelmentsByTagName 一样是一个类数组

<div class = "colour">
</div>
<div class = "colour">
</div>
<script>
document.getElementsByClassName("colour")[0] //将class内的所有内容加入类数组中 然后选择数组下标第0位
</script>

这种方法是有兼容性问题的他的问题是IE9之前的浏览器这种方法是无法操作的

4.document.getElementsByName("name")利用name名进行选择

document.getElementsByName("name")可以通过元素name的名字进行选择在开发中并不常用

<form>
<input type = "text" name = "fruit">
</form>

<script>
document.getElementsByName("fruit")[0] //选择所有的name标签加入类数组 然后再通过数组下标进行选择
</script>

这个方法在新浏览器可以使用但是在早期的浏览器中只有部分标签中的name可以生效也就是说在早期浏览器中只有类似表单或者表单元素等中的name可以被识别比如早期你在一个div标签中加如name用这种方法是无法选择的

顺便强调一下如果你选择的内容是一组即便页面上只有一个也必须标明下标

二、DOM选择器-querySelector：

1.document.querySelector(" ")

querySelector选择器相对比来说就比较厉害了他的选择方法基本与CSS一致 CSS怎么选他就怎么选

<body>
    <div id="lest">
        <ul>
            <li>伊凡AD</li>
            <li>伊凡BD</li>
            <li>伊凡CD</li>
        </ul>
        <ul>
            <li class="demo">伊凡ED</li> <--我要选择的内容-->
            <li>伊凡FD</li>
            <li>伊凡DJ</li>
        </ul>

    </div>
<script>
    var list = document.querySelector("div>ul li.demo");  //使用选择器进行选择 
</script>

这种选择器选择出的内容是独立个体被选中的内容也是以单独的个体呈现而不是一个类数组

2.document.querySelectorAll(" ")

如果你需要选择的内容是一个类数组使用的就是querySelectorAll(" ") 这种选择器会将选择的内容装入类数组并且可以多项选择

<body>
    <div id="lest">
        <ul>
            <li>伊凡AD</li>
            <li>伊凡BD</li>
            <li>伊凡CD</li>
        </ul>
        <ul>
            <li class="demo">伊凡ED</li> <--我要选择的内容-->
            <li>伊凡FD</li>
            <li>伊凡DJ</li>
        </ul>

    </div>
<script>
    var list = document.querySelectorAll("div>ul li");  //这里使用querySelectorAll
</script>

虽然这种方法看似非常的方便但是这两种方法有很大的弊端第一点这两种方法 IE8之前的版本不能使用第二点非常重要他们具有实时性问题 这种方法选择出的内容是一个副本他没办法进行实时改变这点要非常注意一般除非想保存副本一般不用

三、遍历节点树选择：

1.parentNode 父级节点选择

每一个DOM都有很多的属性其中一个属性叫做parentNode 存放的是这个DOM的父元素用着这方法我也可以证明<html>的父级就是<docment>请看实例来证明我上面说的话而且最顶层的元素就是docment

<script>
    // var list = document.querySelectorAll("div>ul li.demo");  //这里使用querySelectorALL
    var DOM = document.getElementsByTagName("html")[0]
    DOM = DOM.parentNode
    console.log(DOM)
</script>
//输出一定是 #docment

父级节点选择只能选择出一个节点也就是这个DOM的父级

2.childNodes子节点选择

介绍childNodes要先介绍一下节点的问题首先要说明节点分为1.元素节点 2.属性节点 3.元素节点 4.注释节点 5.docment节点

6.DocmentFragment节点 所以在获取子节点时子节点种的所有节点都会被选择

<div>
    我是第一个text节点
    <ul>
    我和下面的li都是第三个text节点
        <li>伊</li>
        <li>凡</li>
        <li>E</li>
        <li>D</li>
    </ul>
    <h3>我是第五个text节点</h3>
    <p>伊凡ED 我是第七个text节点</p>
    <div>
        <strong>!别看我 我和他们不是一伙的 但是我的父级和他们同流合污</strong>
    </div>
    <!--我是第10个我是comment-->
</div>
<script>
    var DOM = document.getElementsByTagName("div")[0]
    DOM = DOM.childNodes
    console.log(DOM.length)
    console.log(DOM)
</script>
/*
上面的div的子节点一共有11个 最后打印的结果也是11
NodeList(11) [text, ul, text, h3, text, p, text, div, text, comment, text]
这里遍历了所有节点的内容
*/

这里注意一点虽然注释不会有任何功能但是他依然是DOM的一个节点

3.firstChild 第一子节点选择

childNodes可以选择到所有的子节点但是只想选择其中第一子节点我就可以使用firstChild

<div>伊凡ED
    <h1>不会选中我</h1>
    <p>DJ伊凡</p>
</div>
<script>
    // var list = document.querySelectorAll("div>ul li.demo");  //这里使用querySelectorALL
    var DOM = document.getElementsByTagName("div")[0]
    DOM = DOM.firstChild;
    console.log(DOM)

</script>
//最后的输出 他会选择div下面的第一个text节点 也就是第一行伊凡ED
/*
"伊凡ED
"
*/

4.lastChild 末尾节点选择

从一般的逻辑上来想有第一节点选择的方法就可能会有最后一个节点的选择方法 lastChild 就是用于选择在末尾的节点的方法

<div>
    <!--comment-->
</div>
<script>
    var DOM = document.getElementsByTagName("div")[0];
    DOM = DOM.lastChild;
    console.log(DOM);
</script>
/*
请注意 这里打印出的结果是 #text  是因为最后一个节点 也就是注释的节点什么也没有
 所以默认会显示#text这也就说明了注释的text节点在注释的内容的后面
*/

5.previousSibling 之前同级节点选择

如果想选择这个某个节点的前一个兄弟节点就可以使用 previousSibling来选择前一个兄弟节点

<div>
    我是前一个
    <p>伊凡ED</p>
    我是后一个
</div>
<script>
    var DOM = document.getElementsByTagName("p")[0];
    DOM = DOM.previousSibling; //前一个同级关系选择
    console.log(DOM);
</script>

//这里的输出是"我是前一个" 也就是选中了P标签同级的前一个节点 这个节点是div标签的text节点

6.nextSibling 之后同级节点选择

和上面的一样能选前一个就会有最后一个enxtSibling就是用于选择最后一个的方法

<div>
    我是前一个
    <p>伊凡ED</p>
    我是后一个
</div>
<script>
    var DOM = document.getElementsByTagName("p")[0];
    DOM = DOM.nextSibling; //后一个同级关系选择
    console.log(DOM);
</script>

//这里的输出是"我是后一个" 也就是选中了P标签同级的后一个节点 和上面的是同一个道理

四、基于元素节点树的遍历

以上的方法不但看上去就让人摸不到头脑尤其是text节点你或许都想不通我要这个节点何用换乔老爷的话 "简单比复杂更难你必须费尽心思，让你的思想更单纯，让你的产品更简单 "

那么我简单粗暴的就是想要这些所有的元素节点我该怎么做呢

1.parentElement 元素父节点选择

到这里你会发现我前面介绍的东西都发挥了最大作用只要把后面的节点简单的改成元素Element 上面介绍的东西你会发现都发挥作用了

<div>←瞄准目标
    <p>伊凡ED</p>
</div>
<script>
    var DOM = document.getElementsByTagName("p")[0];
    DOM = DOM.parentElement;
    console.log(DOM);
</script>
//这次我们成功的就会选择到这个div标签

这种选择是有兼容问题

2.children 元素子节点选择

不好意思让你失望了你是不是以为元素子节点选择会是"childElement"呢可是不是但是children可以选择到所有的子节点的元素节点

<div>
    <h3>CSDN</h3>
    <p>伊凡ED</p>
    <div>
        <ul>孙
            <li>孙</li>
            <li>子</li>
            <li>节</li>
            <li>点</li>
        </ul>子
    </div>
</div>
<script>
    var DOM = document.getElementsByTagName("div")[0];
    DOM = DOM.children;
    console.log(DOM);
</script>


/*
输出
HTMLCollection(3) [h3, p, div]
0: h3
1: p
2: div
length: 3
*/

这样会便利到所有的子级元素节点而下面次子机是不会被选择到的

3.childElementCount 元素子节点长度选择

我懒得解释这个复制一段官方文档

This property was initially defined in the ElementTraversal pure interface. As this interface contained two distinct set of properties, one aimed at Node that have children, one at those that are children, they have been moved into two separate pure interfaces, ParentNode and ChildNode. In this case, childElementCount moved to ParentNode. This is a fairly technical change that shouldn't affect compatibility.

这个完全可以用lenth方法取代得出的结论就是可以测算这个子节点的长度仅此而已而且写的长的一批就算了他还有兼容问题建议不用

4.firstElementChild 第一个元素子节点选择

用于选择元素子节点的第一个子节点用firstElementChild可以直接选择出第一个元素子节点

<div>
    <h3>CSDN</h3>
    <p>伊凡ED</p>


</div>
<script>
    var DOM = document.getElementsByTagName("div")[0];
    DOM = DOM.firstElementChild;
    console.log(DOM);
</script>

/*
输出结果
<h3>CSDN</h3>
*/

5.lastElementChild 最后一个元素子节点选择

lastElementChild用于选择最后一个元素子节点

<div>
    <h3>CSDN</h3>
    <p>伊凡ED</p>


</div>
<script>
    var DOM = document.getElementsByTagName("div")[0];
    DOM = DOM.lastElementChild;
    console.log(DOM);
</script>

/*
输出结果
<p>伊凡ED</p>
*/

拥有同样的兼容问题

6.previousElementSibling 前一个同级元素节点选择

previousElementSiblin 可以选某个节点的上一个哥哥级元素子节点

<div>
    <h3>CSDN</h3>
    <h1>!</h1>
    <p>伊凡ED</p>


</div>
<script>
    var DOM = document.getElementsByTagName("h1")[0];
    DOM = DOM.previousElementSibling;
    console.log(DOM);
</script>

/*
输出
<h3>CSDN</h3>
*/

7.nextElementSibling后一个同级元素节点选择

同上面一样只是可以选择后一个同级元素节点

<div>
    <h3>CSDN</h3>
    <h1>!</h1>
    <p>伊凡ED</p>


</div>
<script>
    var DOM = document.getElementsByTagName("h1")[0];
    DOM = DOM.nextElementSibling;
    console.log(DOM);
</script>

/*
输出
<p>伊凡ED</p>
*/

总结以上元素节点树遍历除children外都不支持IE10之前的IE浏览器 IE到IE9当时应为IE的市场占有率大所以没有遵守W3C规范导致许多规范于其他浏览器不同从IE9之后有了 Element Traversal 规范有了这个规范后增加了这6个属性