JavaScript学习笔记之二（DOM API）

深碍√TFBOYSˉ_ 2023-09-27 10:49 127阅读 0赞

**目录**

1. 获取元素（querySelector）

2. 事件(onclick)

3. 操作元素

3.1 获取/修改元素内容(innerHTML)

3.2 获取/修改元素属性(.属性名)

3.3 获取/修改元素表单属性

3.4 获取/修改样式(style className)

4. 操作结点

4.1 新增结点(createElement)

4.2 删除结点(removeChild)

--------------------

> JS  分成三个大的部分 
> 
> **（1）ECMAScript: 基础语法部分** 
> 
> **（2）DOM API: 操作页面结构** 
> 
> 浏览器给JS提供的原生接口，基于这样的接口，就可以针对页面上的元素进行操作了
> 
> DOM=》文档对象模型（html中，会把每个html标签，视为是js中可以操作的对象，这个操作的对象就可以影响到界面的显示）
> 
> **（3）BOM API: 操作浏览器**
> 
> WebAPI  就包含了  DOM + BOM.

DOM基本概念

## 1. 获取元素（querySelector） ##

> 要想操作页面上的元素，就需要先拿到对应的JS对象
> 
> **DOM中提供了一组API能够获取到网页的元素，比如querySelector，querySelectorAll**
> 
> 这是一个document（页面中的全局对象，一个页面加载完成，就会自动生成一个全局变量，就叫做document，这里面就有一些属性和方法，让我们来操作页面的内容）
> 
> 这样的对象的属性

![8418d79e90534511a4790bf225538d18.png][]

![c043bf7028d44348b008a94324eb71ed.png][]

可以看到只选中了，第一个元素![08eb79dc22734fc49e6805bdd1108512.png][]

> 所以要想全部选中，就要使用querySelectorAll，**querySelectorAll返回的是一个数组，就包含了所有被选中的元素**
> 
> 实际上是querySelectorAll返回的不是一个真正的原生数组，而是一个对象，只不过这个对象，有length，也能够通过下标的方式来访问内部元素，使用起来和数组没啥区别，这种就叫“伪数组”

![a3a455ab231443aba323d22e9750af4d.png][]

## 2. 事件(onclick) ##

> JS中很多代码，都是通过“事件”来触发的
> 
> **事件就是浏览器对于用户的操作行为进行了一个“统称”**
> 
> （实际上，事件也不一定全是用户操作产生的，但绝大部分是）
> 
> **事件的三要素：**
> 
> **a）事件源：哪个html元素产生的事件**
> 
> **b）事件类型：鼠标移动、鼠标点击、键盘事件、窗口大小改变事件...**
> 
> **c）事件的处理程序：当事件产生之后，执行什么样的JS代码（回调函数，函数不会立刻调用，而是在合适的时机，被浏览器调用）**

![b6e43c69f285490aa000354e0eba5ca0.png][]

这种写法也可以

![fb81d13d12d941bfb7a2b1d874ba62c9.png][]

类似的还有这些

![47fdfc9984714be7b95f602e71c25ce8.png][]

## 3. 操作元素 ##

### 3.1 获取/修改元素内容(innerHTML) ###

> **（1）通过对象里面的一个属性innerHTML来实现（元素里面包含的html代码是啥样的）**
> 
> **onclick作用是捕获鼠标点击事件**

![0395718aaf454dc48b66b269abc913b1.png][]

<body>
        <div id="screen">
            <ul>
                <li>aaa</li>
                <li>aaa</li>
                <li>aaa</li>
            </ul>
        </div>
        <button id="btn">这是获取内容的按钮</button>
        <button id="btn2">这是修改内容的按钮</button>
    
        <script>
            let btn = document.querySelector('#btn');
            btn.onclick = function() {
                let screen = document.querySelector('#screen');
                console.log(screen.innerHTML);
            }
            let btn2 = document.querySelector('#btn2');
            btn2.onclick = function() {
                let screen = document.querySelector("#screen");
                screen.innerHTML = '<h1>修改后的内容</h1>';
            }
        </script>
    </body>

![32a0660cd4e4486288bc7adba8f0632a.png][]

![93debcd2b8754936979d6a5aa9f332fe.png][]

java中的parselnt，是interger类的成员方法

这里JS中的parselnt相当于一个全局的函数（由于JS是动态类型，转为数字之后，仍然可以赋值给val）

![f90079ae71314d9d9c77684a72fec19f.png][]

![55b4cef434d34dd0a6c9686f14897674.png][]

### 3.2 获取/修改元素属性(.属性名) ###

> 通过DOM对象，.属性名 就可以进行操作了

比如搞一个图片点击切换图片的功能

<body>
        <img src="111.jpg" alt="">
    
        <script>
            let img = document.querySelector('img');
            img.onclick = function() {
                console.log(img.src);
                if(img.src.indexOf('111.jpg') >= 0) {
                    img.src = '222.jpg';
                } else if (img.src.indexOf('222.jpg' >= 0)) {
                    img.src = '111.jpg'
                }
            }
        </script>
    </body>

> **可以通过console.dir这个方法，打印出一个dom对象的全部属性和值**

![bdbd9488096644278bc2c0aaebfc7789.png][]

### 3.3 获取/修改元素表单属性 ###

> 表单 ( 主要是指  input  标签 ) 的以下属性都可以通过  DOM  来修改
> 
> **value:input的值**
> 
> **disabled:禁用**
> 
> **checked:复选框使用**
> 
> **selected:下拉框使用**
> 
> **type:input的类型（文本、密码、按钮、文件等）**

实现一个按钮切换的功能

<body>
        <input type="button" value="播放">
    
        <script>
            let input = document.querySelector('input');
            input.onclick = function() {
                if(input.value == '播放') {
                    input.value = '暂停';
                } else if(input.value == '暂停') {
                    input.value = '播放';
                }
            }
        </script>
    </body>

全选/取消全选按钮

<body>
        <input type="checkbox" id="all"> 全选 <br>
        <input type="checkbox" class="girl"> 貂蝉 <br>
        <input type="checkbox" class="girl"> 关羽 <br>
        <input type="checkbox" class="girl"> 马超 <br>
        <input type="checkbox" class="girl"> 孙尚香 <br>
    
        <script>
            //1. 先获取元素
            let all = document.querySelector('#all');
            let girls = document.querySelectorAll('.girl');
    
            //2. 给 all 注册点击事件
            all.onclick = function() {
                for(let i = 0; i < girls.length; i++) {
                    // all.checked 就是 all 这个复选框的选中状态
                    girls[i].checked = all.checked;
                }
            }
    
            //3. 针对每个girl注册点击事件，实现对于 all 的取消操作
            for(let i = 0; i < girls.length; i++) {
                girls[i].onclick = function() {
                    all.checked = checkGirls(girls);
                }
            }
    
            function checkGirls(girls) {
                //判断是不是所有的girl都被选中了
                for(let i = 0; i < girls.length; i++) {
                    if(!girls[i].checked) {
                        return '';
                    }
                }
                //遍历完发现，所有都被选中着，就让 all 也是选择状态
                return 'checked';
            }
        </script>
    </body>

### 3.4 获取/修改样式(style className) ###

> **1.style 对应 行内样式（直接把样式写到style里面）**
> 
> **2.className / classList 对应 内部样式/外部样式，应用了一个/一组css类名**
> 
> 在HTML中，表示类名的属性，就是class
> 
> 在JS中，属性名就变成了 className/classList 
> 
> 因为JS中 class也是一个关键字（JS ES6版本以上，也引入了类这个概念）

**实现 点击文字放大字体的操作**

parseInt进行数字字符，转数字操作时，是从前往后开始转换，如果遇到非数字字符，就转换停止

当修改CSS属性值的时候，一定要注意单位，不写单位就会失效

<body>
        <div style="font-size:20px;">这是一个文本</div>
        <script>
            let div = document.querySelector('div');
            div.onclick = function() {
                //1. 先获取当前字体的大小(要进行字符串转数字操作)
                console.log(parseInt(div.style.fontSize)); 
                let fontSize = parseInt(div.style.fontSize);
                //2. 在当前字体大小的基础上， 多增加 5px
                fontSize += 5;
                div.style.fontSize = fontSize + 'px';
            }
        </script>
    </body>

![af4aede1c87f43b191f27d1f0a47d574.png][]

如果要修改的样式比较多，通过style来修改就比较麻烦

可以直接借助CSS类来修改

> **修改元素的 CSS 类名. 适用于要修改的样式很多的情况.**

**实现一个 开启夜间模式**

<body>
        <style>
            .light {
                background-color: #fff;
                color: black;
            }
    
            .dark {
                background-color: black;
                color: #fff;
            } 
        </style>
    
        <div class="light" style="height: 500px;">这是一段话</div>
        <button>夜间模式</button>
    
        <script>
            let div = document.querySelector('div');
            let button = document.querySelector('button');
            button.onclick = function() {
                if(div.className == 'light') {
                    div.className = 'dark';
                    button.innerHTML = '白天模式';
                }else if(div.className == 'dark') {
                    div.className = 'light';
                    button.innerHTML = '夜间模式';
                }
            }
        </script>
    </body>

## 4. 操作结点 ##

### 4.1 新增结点(createElement) ###

> **1. 创建新结点**
> 
>     var element = document.createElement(tagName[, options])
> 
> **createTextNode 创建文本节点** 
> 
> **createComment 创建注释节点** 
> 
> **createAttribute 创建属性节点**
> 
> **2. 把结点挂在dom树上**
> 
>     element.appendChild(aChild)

**（1）创建新结点**

![bf887d8e3e5f4d4987731bdb18273bef.png][]

此处创建的结点，并没有被挂在dom树上

所以在浏览器页面上，是显示不出来的

**（2）把结点挂在dom树上**

> **使用appendChild把节点插入到某个结点的子元素中**

<body>
        <div class="containor">
        </div>
    
        <script>
            let newDiv = document.createElement('div');
            newDiv.id = 'newDiv';
            newDiv.className = 'one';
            newDiv.innerHTML = 'hello';
            console.log(newDiv);
    
            let containor = document.querySelector('.containor');
            containor.appendChild(newDiv);
        </script>
    </body>

### 4.2 删除结点(removeChild) ###

> **使用 removeChild 删除子节点**
> 
>     oldChild = element.removeChild(child);
> 
> child  为待删除节点 
> 
> **element 为 child 的父节点** 
> 
> 返回值为该被删除节点 
> 
> **被删除节点只是从 dom 树被删除了, 但是仍然在内存中, 可以随时加入到 dom 树的其他位** 
> 
> **置.** 
> 
> 如果上例中的  child 节点  不是  element  节点的子节点 , 则该方法会抛出异常

<body>
        <div class="containor">
        </div>
    
        <button>删除 div</button>
        <script>
            let newDiv = document.createElement('div');
            newDiv.id = 'newDiv';
            newDiv.className = 'one';
            newDiv.innerHTML = 'hello';
            console.log(newDiv);
    
            let containor = document.querySelector('.containor');
            containor.appendChild(newDiv);
    
            let button = document.querySelector('button');
            button.onclick = function() {
                containor.removeChild(newDiv);
            }
        </script>
    </body>

[8418d79e90534511a4790bf225538d18.png]: https://img-blog.csdnimg.cn/8418d79e90534511a4790bf225538d18.png
[c043bf7028d44348b008a94324eb71ed.png]: https://img-blog.csdnimg.cn/c043bf7028d44348b008a94324eb71ed.png
[08eb79dc22734fc49e6805bdd1108512.png]: https://img-blog.csdnimg.cn/08eb79dc22734fc49e6805bdd1108512.png
[a3a455ab231443aba323d22e9750af4d.png]: https://img-blog.csdnimg.cn/a3a455ab231443aba323d22e9750af4d.png
[b6e43c69f285490aa000354e0eba5ca0.png]: https://img-blog.csdnimg.cn/b6e43c69f285490aa000354e0eba5ca0.png
[fb81d13d12d941bfb7a2b1d874ba62c9.png]: https://img-blog.csdnimg.cn/fb81d13d12d941bfb7a2b1d874ba62c9.png
[47fdfc9984714be7b95f602e71c25ce8.png]: https://img-blog.csdnimg.cn/47fdfc9984714be7b95f602e71c25ce8.png
[0395718aaf454dc48b66b269abc913b1.png]: https://img-blog.csdnimg.cn/0395718aaf454dc48b66b269abc913b1.png
[32a0660cd4e4486288bc7adba8f0632a.png]: https://img-blog.csdnimg.cn/32a0660cd4e4486288bc7adba8f0632a.png
[93debcd2b8754936979d6a5aa9f332fe.png]: https://img-blog.csdnimg.cn/93debcd2b8754936979d6a5aa9f332fe.png
[f90079ae71314d9d9c77684a72fec19f.png]: https://img-blog.csdnimg.cn/f90079ae71314d9d9c77684a72fec19f.png
[55b4cef434d34dd0a6c9686f14897674.png]: https://img-blog.csdnimg.cn/55b4cef434d34dd0a6c9686f14897674.png
[bdbd9488096644278bc2c0aaebfc7789.png]: https://img-blog.csdnimg.cn/bdbd9488096644278bc2c0aaebfc7789.png
[af4aede1c87f43b191f27d1f0a47d574.png]: https://img-blog.csdnimg.cn/af4aede1c87f43b191f27d1f0a47d574.png
[bf887d8e3e5f4d4987731bdb18273bef.png]: https://img-blog.csdnimg.cn/bf887d8e3e5f4d4987731bdb18273bef.png