DOM--获取元素

1. 什么是DOM

文档对象模型（Document Object Model，简称 DOM），是 W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 

2. 什么是DOM树

(1)DOM树：在内存中，集中保存一个网页中所有内容的树状图。

(2)为什么使用DOM树：能够直观的保存上下级包含关系的数据结构，html标签就是包含的关系，所以网页中每一项内容，在内存中，都是存在树形结构的。

(3)如何形成的：① 浏览器读取html文件时，会先在内存中创建一个document对象，作为树根对象
                      ②然后解析html文件中每个元素，文本等内容，每解析一项内容，就在document下                            对应的位置创建一个节点（node）对象

(4)DOM作用：document代表整个文档，html是整个文档的根标签，DOM操作元素可以改变网页内容结构和样式，可以利用DOM操作元素来改变元素里面的内容、属性等；

(5)DOM概念：①文档：一个页面就是一个文档，DOM 中使用 document 表示
                       ②元素：页面中的所有标签都是元素，DOM 中使用 element 表示
                       ③节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使                              用node 表示

    注意：DOM 把以上内容都看做是对象。

3. 获取元素

DOM主要做的就是五件事：增删改查、事件绑定。本质就是操作元素，所以前提要先获取到元素，从而才能进行相应的操作。

获取页面中的元素可以使用以下几种方式:
 通过 ID 获取
 通过 类名获取
 通过标签名获取
 通过属性名获取
 通过css选择器获取（ES6新增）
 特殊元素获取

3.1 通过 ID 获取

使用 getElementById() 方法可以获取带有 ID 的元素对象。

document.getElementById('id');

使用id获取到的就是元素本身，如果有多个元素的id一样，只会获取到排在最前的那个元素，所以这也解释了为什么前面学习HTML时说id要保证唯一，就是为了后期方便获取。

3.2 通过 类名获取

document.getElementsByClassName(‘类名’)；

注意：根据类名获取，返回的是一个元素对象集合，就算只有一个返回的也是集合，所以要想获取到具体元素，要使用下标。

3.3 通过标签名获取

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。

document.getElementsByTagName('标签名');
比如
document.getElementsByTagName('div');  // 获取所有div元素

注意： 1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历，即要借助下标得到具体元素。

2. 得到元素对象是动态的

3.4 通过属性名获取元素

<span name="spans">6789</span>;
<script>
let span = document.getElementsByName('spans');
</script>

注意： 通过属性名获取的元素也是一个集合，需要下标才能获取到具体元素。

3.5 通过css选择器获取

// querySelector 获取元素，返回的是匹配到的第一个元素
document.querySelector('#id名'); 
document.querySelector('.类名');
// querySelectorAll 获取全部元素，返回的是页面中所有匹配到的元素数组
document.querySelectorAll('标签名');
如：document.querySelectorAll('div');

注意：① querySelector根据指定选择器返回第一个元素对象，所以得到的就是元素本身；               ② querySelectorAll根据指定选择器返回元素对象集合，所以要想获取到具体元素，要使用下标。

           ③ querySelector 和 querySelectorAll里面的选择器需要加符号,这些符合和css中保持一致，比如:document.querySelector('#nav'); 

3.6 获取特殊元素（body，html）

（1） 获取body元素

document.body // 返回body元素对象

（2）获取html元素

document.documentElement // 返回html元素对象

4. 实例操作--更改元素样式

（1）html结构

<div class="wrap">
<h2>请修改下面div的样式
    <button id="revise">点击修改</button>
</h2>
<div id="box"></div>
</div>
<div class="mask">
<ul class="setlist">
    <li class="color_li">
        <strong>请选择颜色：</strong>
        <span>红色</span>
        <span>黄色</span>
        <span>蓝色</span>
    </li>
    <li class="width_li">
        <strong>请选择宽度(px)：</strong>
        <span>100</span>
        <span>300</span>
        <span>400</span>
    </li>
    <li class="height_li">
        <strong>请选择高度(px)：</strong>
        <span>100</span>
        <span>300</span>
        <span>400</span>
    </li>
</ul>
<button>恢复</button>
<button>确定</button>
</div>

（2）css样式

<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        margin: 20px;
    }
    #box {
        width: 200px;
        height: 200px;
        border: 1px solid #333;
        margin-top: 10px;
    }
    .mask {
        display: none;
        position: absolute;
        top: 20%;
        left: 40%;
        padding: 25px 0 0 30px;
        width: 330px;
        height: 200px;
        border: 1px solid #666;
    }
    .setlist {
        list-style: none;
    }
    .setlist li {
        font-size: 14px;
        margin-bottom: 15px;
    }
    .mask button {
        width: 70px;
        height: 30px;
        margin: 15px 8px 0 0;
        background-color: brown;
        border: 0;
        color: #fff;
        cursor: pointer;
    }
    .setlist li strong {
        font-weight: normal;
    }
    .setlist li span {
        display: inline-block;
        width: 36px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border: 1px solid #666;
        margin-right: 10px;
        cursor: pointer;
    }
    .width_li span,
    .height_li span {
        background-color: #ccc;
    }
    .color_li span:nth-child(2) {
        background-color: red;
        color: #fff;
    }
    .color_li span:nth-child(3) {
        background-color: yellow;
    }
    .color_li span:nth-child(4) {
        background-color: blue;
        color: #fff;
    }
</style>

（3）js效果

<script>
    // 1. 获取修改按钮 和 弹出窗体
    var revise = document.getElementById('revise');
    var mask = document.querySelector('.mask');
    // 2. 给修改按钮绑定点击事件
    revise.onclick = function() {
            mask.style.display = 'block';
        }
        // 3. 获取需要修改样式的div 和颜色选项并绑定点击事件
    var div = document.getElementById('box');
    var color_spans = document.querySelectorAll('.color_li span');
    color_spans[0].onclick = function() {
        div.style.backgroundColor = 'red';
    }
    color_spans[1].onclick = function() {
        div.style.backgroundColor = 'yellow';
    }
    color_spans[2].onclick = function() {
            div.style.backgroundColor = 'blue';
        }
        // 4. 获取宽度选项并绑定点击事件
    var width_spans = document.querySelectorAll('.width_li span');
    width_spans[0].onclick = function() {
        div.style.width = '100px';
    }
    width_spans[1].onclick = function() {
        div.style.width = '300px';
    }
    width_spans[2].onclick = function() {
            div.style.width = '500px';
        }
        // 5. 获取高度选项并绑定点击事件
    var height_spans = document.querySelectorAll('.height_li span');
    height_spans[0].onclick = function() {
        div.style.height = '100px';
    }
    height_spans[1].onclick = function() {
        div.style.height = '300px';
    }
    height_spans[2].onclick = function() {
            div.style.height = '500px';
        }
        // 6. 获取恢复和确定按钮 并分别绑定点击事件
    var btns = document.querySelectorAll('.mask button');
    console.log(btns);
    // 点击恢复按钮，则div恢复如初，并且mask隐藏
    btns[0].onclick = function() {
            mask.style.display = 'none';
            div.style.cssText = 'width:200px;height:200px;border:1px solid #333';
        }
        // 点击确定按钮div应用样式且mask隐藏
    btns[1].onclick = function() {
        mask.style.display = 'none';
    }
</script>

（4）实现效果

   

点击修改按钮弹出右侧窗体，然后根据自己的需求选择对应的颜色宽度高度，最后点击确定就可更改div的样式。如果点击恢复则不改变，保持原状。