DOM API

DOM 基本概念

        DOM 全称为 Document Object Model，就是文档对象模型。html 的每个标签都可以映射到 js 中的一个对应对象上。

DOM 树      

        一个页面的结构是一个树形结构, 称为 DOM 树 . 树形结构在数据结构阶段会介绍. 就可以简单理解成类似于 " 家谱 " 这种结构。

页面结构形如：

DOM 树结构形如：

概念:

        文档: 一个页面就是一个 文档 , 使用 document 表示 .

        元素: 页面中所有的标签都称为 元素 . 使用 element 表示 .

        节点: 网页中所有的内容都可以称为 节点 ( 标签节点 , 注释节点 , 文本节点 , 属性节点等 ). 使用 node 表示.

        这些文档等概念在 JS 代码中就对应一个个的对 象. 所以也叫 "文档对象模型" .

获取元素

querySelector（CSS 选择器）

        使用 querySelector 能够完全复用 CSS 的选择器知识, 达到更快捷更精准的方式获取到元素对象.

 

        selectors 包含一个或多个要匹配的选择器的 DOM 字符串 DOMString 。 该字符串必须是有效的CSS选择器字符串；如果不是，则引发 SYNTAX_ERR 异常；

        表示文档中与指定的一组CSS 选择器匹配的第一个元素的 html 元素 Element 对象；

        如果需要与指定选择器匹配的所有元素的列表，则应该使用 querySelectorAll()；

        可以在任何元素上调用，不仅仅是 document 。 调用这个方法的元素将作为本次查找的根元素。

<div class="box">abc</div>
<div id="id">def</div>
<h3><span><input type="text"></span></h3>
<script>
    let elem1 = document.querySelector('.box');
    console.log(elem1);
    let elem2 = document.querySelector('#id');
    console.log(elem2);
    let elem3 = document.querySelector('h3 span input');
    console.log(elem3);
</script>

        正因为参数是选择器, 所以一定要通过特殊符号指定是哪种选择器 . 例如 .box 是类选择器 , #star 是 id 选择器 等 .

事件

        时间就是针对用户的操作进行一些相应。要能够和用户交互，就得先知道用户干了啥，用户做的一些动作，会在浏览器中产生一些事件（鼠标点击、按下键盘、调整浏览器窗口等），然后代码就需要针对这些事件作出反应。

事件三要素

1. 事件源 : 哪个元素触发的

2. 事件类型 : 是点击 , 选中 , 还是修改 ?

3. 事件处理程序 : 进一步如何处理 . 往往是一个回调函数 .

        就像一放学回家，老妈（事件源）就一脸严肃坐在沙发上盯着我（事件类型），我这时就紧张地回忆我犯了什么事，是考试不及格还是偷偷吃辣条（事件处理程序）。

<button id="btn">点我一下</button>
<script>
    let btn = document.getElementById('btn');
    btn.onclick = function () {
        alert("hello world");
   }
</script>

        btn.onclick = function() 这个操作称为 注册事件 / 绑定事件，即直接在元素使用 onXXX 这样的方法来绑定一个事件处理程序

操作元素

获取/修改元素内容

        使用 innerHTML 属性就能拿到元素里面的内容（开始标签 和 结束标签 夹着的内容），修改这个属性，就会影响到界面的显示。

<div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<script>
    let div = document.querySelector('div');
    // 读取页面内容
    console.log(div.innerHTML);
    // 修改页面内容
    div.innerHTML = '<span>hello js</span>'
</script>

        可以看到 innerHTML 不光能获取到页面的 html 结构 , 同时也能修改结构 . 并且获取到的内容保留的空格和换行.

获取/修改元素属性

<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
    let img = document.querySelector('img');
    img.onclick = function () {
        img.src = '蔡徐坤.jpg';
   }
</script>

此时点击图片就可以切换图片显示状态 . ( 需要提前把两个图片准备好 )

获取/修改表单元素属性

表单 ( 主要是指 input 标签，是一个单标签 ) 的以下属性都可以通过 DOM 来修改

        value: input 的值 .

        disabled: 禁用

        checked: 复选框会使用

        selected: 下拉框会使用

        type: input 的类型 ( 文本 , 密码 , 按钮 , 文件等 )

<input type="text">
    <button>密码显示 / 隐藏</button>   
    
    <script>
        let input = document.querySelector('input');
        let button = document.querySelector('button');
        button.onclick = function() {
            if (input.type == 'text') {
                input.type = 'password';
                button.innerHTML = '显示密码';
            } else {
                input.type = 'text';
                button.innerHTML = '隐藏密码';
            }
        }
    </script>

获取/修改样式属性

1. 修改内联样式（修改 style 属性的值）

<div style="font-size: 20px; font-weight: 700;">
   哈哈
</div>
<script>
    let div = document.querySelector('div');
    div.onclick = function () {
        var curFontSize = parseInt(this.style.fontSize);
        curFontSize += 10;
        this.style.fontSize = curFontSize + "px";
   }
</script>

每次点击，哈哈 字体都会变大。

2. 修改元素应用的 CSS 类名

<div class="dark">hello world</div>
    
    <style>
        .light {
            /* 日间模式 */
            color: black;
            background-color: white;
        }

        .dark {
            /* 夜间模式 */
            color: white;
            background-color: black;
        }
    </style>

    <script>
        let div = document.querySelector('div');
        div.onclick = function() {
            // 点击 div 切换日间模式和夜间模式
            if (div.className == 'dark') {
                div.className = 'light';
            } else {
                div.className = 'dark';
            }
        }
        
    </script>

        切换日间 / 黑夜模式

操作节点

新增节点

1. 创建一个元素

<div class="container">
</div>
<script>
    let div = document.createElement('div');
    div.id = 'mydiv';
    div.className = 'box';
 div.innerHTML = 'hehe';
    console.log(div);
</script>

        此时发现, 虽然创建出新的 div 了 , 但是 div 并没有显示在页面上 . 这是因为新创建的节点并没有加入到 DOM 树中

2. 把这个元素放到 DOM 树中

<div class="container">
</div>
<script>
    let div = document.createElement('div');
    div.id = 'mydiv';
    div.className = 'box';
    div.innerHTML = 'hehe';
    var container = document.querySelector('.container');
    container.appendChild(div);
</script>

删除节点

    <ul>
        <li>11</li>
        <li>22</li>
    </ul>

    <script>
        let ul = document.querySelector('ul');
        for (let n = 3; n < 10; n++) {
            let li = document.createElement('li');
            li.innerHTML = n + '' + n;
            ul.appendChild(li);
        }

        // 删除 33 这个元素
        let toDelete = document.querySelectorAll('li')[2];
        console.log(toDelete);

        ul.removeChild(toDelete);
    </script>