javaEE初阶 — JavaScript WebAPI

客官°小女子只卖身不卖艺 2023-10-08 20:46 79阅读 0赞

#### 文章目录 ####

*  什么是 DOM
 *  DOM 树
 *  获取元素
 *   *  1. querySelector
     *  2. querySelectorAll
 *  事件
 *   *  1. 事件三要素
     *  2. 代码案例
 *  获取 / 修改元素内容
 *   *  1. innerHTML
 *  获取 / 修改元素属性
 *  获取 / 修改表单元素属性
 *  获取 / 修改样式属性
 *   *  1. 修改内联样式（修改 style 属性的值）
     *  2. 修改元素应用的 CSS 类名
 *  新增元素
 *  删除元素

## 什么是 DOM ##

**DOM** 全称为 **Document Object Model**，即 **文档对象模型**。

文档对象模型指的是，可以把 html 的每个标签都映射到 js 中的一个对应对象的。

换句话也就是：

*  **标签上显示什么，都是可以通过 js 对象感应到的。**
 *  **js 对象修改的对应属性，能够影响到标签的展示。**

通过 DOM 就可以让 js 代码来操作页面元素。

## DOM 树 ##

一个页面的结构是一个树形结构，称为 DOM 树。  
  
![6fd3fa29571646f39ad457994f9327ef.png_pic_center][]  
  
重要概念:

*  文档：一个页面就是一个 文档，使用 **document** 表示。
 *  元素：页面中所有的标签都称为元素，使用 **element** 表示。
 *  节点：网页中所有的内容都可以称为节点(标签节点、注释节点、文本节点、属性节点等)，  
    使用 node表示。

这些文档等概念在 JS 代码中就对应一个个的对象，所以才叫 “文档对象模型”。

## 获取元素 ##

### 1. querySelector ###

**querySelector** （CSS 选择器）这个函数用来 **选中页面元素**。

<body>
        <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);
        </script>
    </body>

querySelector 是 document 对象里的一个方法。  
  
![96c12638981d42a5ac91bcf0cb998a64.png_pic_center][]  
**document** 是浏览器中的 **全局对象** 任何一个页面，都会有一个 document 对象。  
所有的 dom api 都是通过 document 对象来展开的。

上述代码中的 elem1 是一个对象，上述打印出来的结果是一个文本。

现在来打印 elem1 当做一个对象打印。

console.dir(elem1);

![46ff4bf90ef443b591fc95e26416a8c3.png_pic_center][]  
  
上面展示的这些都是选中的元素的属性。

也可以把代码中的其他标签也打印出来。

![8c34e1e3550940e7b30a135d4cc23465.png_pic_center][]

### 2. querySelectorAll ###

如果想要一次选中全部的元素，就可以使用 **querySelectorAll** 。

<div class="box">abc</div>
    <div id="id">def</div>
    <script>
        let elem4 = document.querySelectorAll('div');
        console.log(elem4);
    </script>

![4093e26392414791a052a8a5a5831fd7.png_pic_center][]  
上面的 **querySelectorAll** 会把所有的 div 都选中。

## 事件 ##

**时间就是针对用户的操作进行的一些响应**。

要能够和用户交互，就需要知道用户干了什么，用户做的一些动作就是在浏览器上产生的一些**事件**，  
代码就是要针对时间做出反应。  
  
  
这里的时间可以是**鼠标点击、鼠标双击、鼠标移动、键盘按下、调整浏览器窗口…**

### 1. 事件三要素 ###

1、**事件源**：哪个元素产生的事件。

2、**事件类型**：点击、双击、移动、键盘按下…

3、**事件的处理类型**：事件发生后，要执行哪个代码。（要执行的都是提前设定好的）

举个例子，比如张三的女朋友生气了。

此时的事件源就是 **女朋友**，事件类型就是 **生气了**，事件的处理程序就是 **张三赶紧上去哄哄女朋友**。

### 2. 代码案例 ###

最简单的方式就是，直接在元素中使用像以 **on** 开头的方法，来绑定一个事件处理程序。

**onclick** 是一个鼠标点击的事件。

<body>
        <div class="box" onclick="alert('hello boy')">点我一下试试</div>
        <h3>
            <span>
                <input type="text">
            </span>
        </h3>
    </body>

div 就是一个事件源，onclick 就是一个事件类型，alert(‘hello’) 就是一个事件的处理类型。  
  
![488936cb7033424199555fc651af4507.png_pic_center][]  
  
点击之后就会出现一个提示框。

上面展示的代码会显得有点乱，还有一种比较整齐的写法。

可以使用 **querySelector** 先选中一个元素，然后再创建一个事件处理类型的 function 函数。

<body>
        <div class="box" onclick="alert('hello boy')">点我一下试试</div>
        <h3>
            <span>
                <input type="text">
            </span>
        </h3>
    
        <script>
            let div = document.querySelector('.box');
            div.onclick = function() {
        
                alert('hello');
            }
        </script>
    </body>

## 获取 / 修改元素内容 ##

### 1. innerHTML ###

先获取到该元素，使用 **innerHTML** 属性，就能拿到元素里的内容。  
修改该属性，就会影响到界面的显示。

<body>
        <div class="box" onclick="alert('hello boy')">点我一下试试</div>
        <h3>
            <span>
                <input type="text">
            </span>
        </h3>
    
        <script>
            let div = document.querySelector('.box');
            div.onclick = function(){
        
                console.log(div.innerHTML);
            }
        </script>
    </body>

![ed32aaecb76e46e488d035a0639643eb.png_pic_center][]  
  
当前点击一次 div 就会打印一次日志，但是因为这里相同的日志不会显示，因此只会在前显示一个点击的数量。

如果想修改元素里的内容，就需要使用下面的语句。

div.innerHTML += '这是一个 div';

![ab2f994e562f48f584e63dadd69bf648.png_pic_center][]  
  
每点击一次，就会在内容中添加一次 “这是一个 div”。

## 获取 / 修改元素属性 ##

html 的标签的属性，也会映射到 js 对象中。

<body>
        <img src="image/xiaojiejie.jpg" width="200">
        
        <script>
            let img = document.querySelector('img');
            img.onclick = function() {
        
                img.src = 'image/xjj.jpg';
            }
        </script>
    </body>

先选中当前的 img 元素，在实现一个函数来更改它的属性。  
  
![39fdf1ffffa54f76a05af1d9cf345a86.png_pic_center][]

点击上述的图片后，就回切换到另一张图片。  
  
![在这里插入图片描述][d41a83cfe3f848dfade5f5ad6605b4d7.png_pic_center]

也是可以去修改其他的属性，下面就俩修改 **src、width、title** 属性。

<body>
        <img src="image/xiaojiejie.jpg" alt="这是一个漂亮的小姐姐" width="200" title="小姐姐">
        
        <script>
            let img = document.querySelector('img');
            img.onclick = function() {
        
                img.src = 'image/xjj.jpg';
                img.width = 400;
                img.title = '性感小姐姐';
    
                console.log('src:' + img.src);
                console.log('width:' + img.width);
                console.log('title:' + img.title);
                console.log('alt:' + img.alt);
            }
        </script>
    </body>

下面就是修改后的属性。  
  
![8252efe3a5f54ab99ddc9c058eacc7f9.png_pic_center][]

![767fa3230e6b4237b469ff78c2a2d024.png_pic_center][]  
  
可以发现图片变大了。

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

表单元素（input、textarea、select…）中有一些特殊的属性是普通标签没有的，

<body>
        <input type="text">
        <button>点我一下</button>
        
        <script>
            let input = document.querySelector('input');
            let button = document.querySelector('button');
            button.onclick = function() {
        
                console.log(input.value);
            }
        </script>
    </body>

![9bf16b2e07a74c2aa4144ce4d1bd837f.png_pic_center][]  
  
![8e7caa64d17145d38863b8101ad1aa3c.png_pic_center][]  
  
每次在框中输入内容后，再点击按钮，就会打印一次日志。

这里不能使用 **innerHTML**，而只能使用 **value**。

将下面的语句添加到上面的代码中，会得到以下结果。

console.log(input.innerHTML);

![476ab00de09f40228bf3eed92ad569db.png_pic_center][]  
  
这是因为 **innerHTML** 得到的是标签的内容，input 标签是单标签，是没有内容的。

**接下来给 input 里放个数字，每次点击按钮，都会让数字 +1 并显示出来。**

<body>
        <input type="text">
        <button>点我一下</button>
    
        <script>
            let input = document.querySelector('input');
            let button = document.querySelector('button');
            button.onclick = function() {
        
                let value = parseInt(input.value);
                value += 1;
                input.value = value;
            }
        </script>
    </body>

当前的 **input.value** 是一个 string 类型，所以要将它转化为 正数。

这里的 **parseInt** 作用是将类型转化为 number，相当于是 java 里的强制类型转换。  
  
![3ad371d989b8450b9e47483d9f641d78.png_pic_center][]  
  
输入一个数字，在每一次点击按钮后，这个数字都会累加 1。

**接下来实现一个切换密码是否显示的案例。**

<body>
        <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>
    </body>

![e21942d527244db4ac01498d6edeb61a.png_pic_center][]  
  
![7cd7566f1f234bd89a888d58a5d22513.png_pic_center][]  
  
点击隐藏，就会隐藏，点击显示，就会显示。

## 获取 / 修改样式属性 ##

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

现在写一个 div ，每次点击都会让里面的字体放大。

将 div 里的字体初始值设为 20px，这里的 20px 是一个字符串，如果想把它相加则需要把它提取出一个数字来。

这里需要使用 **parseInt** 这个库函数，给它转成整数。

<body>
        <div style="font-size: 20px;">这是一个div,点击后会放大</div>
    
        <script>
            let div = document.querySelector('div');
            div.onclick = function() {
        
                // 先获取当前的字体大小
                let fontSize = parseInt(div.style.fontSize);
                fontSize += 10;
                // 要加上 px 这个单位
                div.style.fontSize = fontSize + 'px';
            }
        </script>
    </body>

需要注意的是给字体放大像素后，要加上 px 这个单位，不然不会有效果。  
  
![051e7ed46a7d4a7eb265a4865fb3faa4.png_pic_center][]  
  
每次点击后，div 里的字体就会放大 10px。

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

下面写一个切换日间模式与夜间模式的案例。

<body>
        <div id="one" class = 'light' style="font-size: 20px; height: 200px;">这是个div, 默认是夜间模式, 点击切换日间模式</div>
    
        <style>
            .light {
        
                /* 日间模式 */
                color: rgb(255, 255, 255);
                background-color: black;
            }
    
            .dark {
        
                /* 夜间模式 */
                color: rgb(0, 0, 0);
                background-color: white;
            }
        </style>
    
        <script>
            let div = document.querySelector('#one');
            div.onclick = function() {
        
                // 点击 div 切换日间和夜间模式
                if (div.className == 'dark') {
        
                    // 此时是夜间模式 - 改为日间模式
                    div.className = 'light';
                } else {
        
                    // 改为夜间模式
                    div.className = 'dark';
                }
            }
        </script>
    </body>

![36b83404d948477baae03bda3d8af2f8.png_pic_center][]  
  
![c887fb6319834acca97dcc8a36c23fd1.png_pic_center][]  
两种模式会随着点击 div 而改变。

## 新增元素 ##

首先第一步是 **创建一个元素**。

<body>
        <div class="one">
            这是一个 div
        </div>
    
        <script>
            let input = document.createElement('input');
            // 让输入框中默认显示 hello 这个内容
            input.value = 'hello';
        </script>
    </body>

此时只是创建了一个元素，还没有放到 dom 树中，所以此时还不会显示出效果。  
  
![ea22d1635e4145ba9ce1f10a96982d4d.png_pic_center][]

接下来第二步就是 **将元素放到 dom 树中**。

let div = document.querySelector('.one');
    div.appendChild(input);

![07c0b6e5841444e79a07450fe92333fb.png_pic_center][]  
  
**div.appendChild(input);** 这一条语句含义就是 **将 input 作为 div 的子元素给添加进去。**

appendChild 会把子元素加入到子元素的末尾。

还可以同时添加多个元素

![1c09a2b3fe4e45738197c34d82034dd9.png_pic_center][]

## 删除元素 ##

下面来将 上面代码中的 33 这个元素删除。

<body>
        <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>
    </body>

33 这个元素是在 2 下标的位置，所以写上 2 下表即可。  
  
![c88c2d33d1fa4d5791c2fdc56610fe10.png_pic_center][]

![43317688612e472d9dca13203569bd7a.png_pic_center][]

[6fd3fa29571646f39ad457994f9327ef.png_pic_center]: https://img-blog.csdnimg.cn/6fd3fa29571646f39ad457994f9327ef.png#pic_center
[96c12638981d42a5ac91bcf0cb998a64.png_pic_center]: https://img-blog.csdnimg.cn/96c12638981d42a5ac91bcf0cb998a64.png#pic_center
[46ff4bf90ef443b591fc95e26416a8c3.png_pic_center]: https://img-blog.csdnimg.cn/46ff4bf90ef443b591fc95e26416a8c3.png#pic_center
[8c34e1e3550940e7b30a135d4cc23465.png_pic_center]: https://img-blog.csdnimg.cn/8c34e1e3550940e7b30a135d4cc23465.png#pic_center
[4093e26392414791a052a8a5a5831fd7.png_pic_center]: https://img-blog.csdnimg.cn/4093e26392414791a052a8a5a5831fd7.png#pic_center
[488936cb7033424199555fc651af4507.png_pic_center]: https://img-blog.csdnimg.cn/488936cb7033424199555fc651af4507.png#pic_center
[ed32aaecb76e46e488d035a0639643eb.png_pic_center]: https://img-blog.csdnimg.cn/ed32aaecb76e46e488d035a0639643eb.png#pic_center
[ab2f994e562f48f584e63dadd69bf648.png_pic_center]: https://img-blog.csdnimg.cn/ab2f994e562f48f584e63dadd69bf648.png#pic_center
[39fdf1ffffa54f76a05af1d9cf345a86.png_pic_center]: https://img-blog.csdnimg.cn/39fdf1ffffa54f76a05af1d9cf345a86.png#pic_center
[d41a83cfe3f848dfade5f5ad6605b4d7.png_pic_center]: https://img-blog.csdnimg.cn/d41a83cfe3f848dfade5f5ad6605b4d7.png#pic_center
[8252efe3a5f54ab99ddc9c058eacc7f9.png_pic_center]: https://img-blog.csdnimg.cn/8252efe3a5f54ab99ddc9c058eacc7f9.png#pic_center
[767fa3230e6b4237b469ff78c2a2d024.png_pic_center]: https://img-blog.csdnimg.cn/767fa3230e6b4237b469ff78c2a2d024.png#pic_center
[9bf16b2e07a74c2aa4144ce4d1bd837f.png_pic_center]: https://img-blog.csdnimg.cn/9bf16b2e07a74c2aa4144ce4d1bd837f.png#pic_center
[8e7caa64d17145d38863b8101ad1aa3c.png_pic_center]: https://img-blog.csdnimg.cn/8e7caa64d17145d38863b8101ad1aa3c.png#pic_center
[476ab00de09f40228bf3eed92ad569db.png_pic_center]: https://img-blog.csdnimg.cn/476ab00de09f40228bf3eed92ad569db.png#pic_center
[3ad371d989b8450b9e47483d9f641d78.png_pic_center]: https://img-blog.csdnimg.cn/3ad371d989b8450b9e47483d9f641d78.png#pic_center
[e21942d527244db4ac01498d6edeb61a.png_pic_center]: https://img-blog.csdnimg.cn/e21942d527244db4ac01498d6edeb61a.png#pic_center
[7cd7566f1f234bd89a888d58a5d22513.png_pic_center]: https://img-blog.csdnimg.cn/7cd7566f1f234bd89a888d58a5d22513.png#pic_center
[051e7ed46a7d4a7eb265a4865fb3faa4.png_pic_center]: https://img-blog.csdnimg.cn/051e7ed46a7d4a7eb265a4865fb3faa4.png#pic_center
[36b83404d948477baae03bda3d8af2f8.png_pic_center]: https://img-blog.csdnimg.cn/36b83404d948477baae03bda3d8af2f8.png#pic_center
[c887fb6319834acca97dcc8a36c23fd1.png_pic_center]: https://img-blog.csdnimg.cn/c887fb6319834acca97dcc8a36c23fd1.png#pic_center
[ea22d1635e4145ba9ce1f10a96982d4d.png_pic_center]: https://img-blog.csdnimg.cn/ea22d1635e4145ba9ce1f10a96982d4d.png#pic_center
[07c0b6e5841444e79a07450fe92333fb.png_pic_center]: https://img-blog.csdnimg.cn/07c0b6e5841444e79a07450fe92333fb.png#pic_center
[1c09a2b3fe4e45738197c34d82034dd9.png_pic_center]: https://img-blog.csdnimg.cn/1c09a2b3fe4e45738197c34d82034dd9.png#pic_center
[c88c2d33d1fa4d5791c2fdc56610fe10.png_pic_center]: https://img-blog.csdnimg.cn/c88c2d33d1fa4d5791c2fdc56610fe10.png#pic_center
[43317688612e472d9dca13203569bd7a.png_pic_center]: https://img-blog.csdnimg.cn/43317688612e472d9dca13203569bd7a.png#pic_center