当前位置：首页 > news >正文

javaEE初阶 — JavaScript WebAPI

news 2025/7/13 11:25:42

文章目录

什么是 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 树。

重要概念:

文档：一个页面就是一个文档，使用 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 对象里的一个方法。

document 是浏览器中的 全局对象 任何一个页面，都会有一个 document 对象。
所有的 dom api 都是通过 document 对象来展开的。

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

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

 console.dir(elem1);

上面展示的这些都是选中的元素的属性。

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

<script>let elem1 = document.querySelector('.box');console.dir(elem1);let elem2 = document.querySelector('#id');console.log(elem2);let elem3 = document.querySelector('h3>span>input');console.log(elem3);
</script>

2. querySelectorAll

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

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

上面的 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’) 就是一个事件的处理类型。

点击之后就会出现一个提示框。

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

可以使用 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>

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

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

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

每点击一次，就会在内容中添加一次 “这是一个 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 元素，在实现一个函数来更改它的属性。

点击上述的图片后，就回切换到另一张图片。

在这里插入图片描述

也是可以去修改其他的属性，下面就俩修改 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>

下面就是修改后的属性。

可以发现图片变大了。

获取 / 修改表单元素属性

表单元素（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>

每次在框中输入内容后，再点击按钮，就会打印一次日志。

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

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

console.log(input.innerHTML);

这是因为 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 里的强制类型转换。

输入一个数字，在每一次点击按钮后，这个数字都会累加 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>

点击隐藏，就会隐藏，点击显示，就会显示。

获取 / 修改样式属性

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 这个单位，不然不会有效果。

每次点击后，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>

两种模式会随着点击 div 而改变。

新增元素

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

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

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

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

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

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

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

还可以同时添加多个元素

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

删除元素

下面来将上面代码中的 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 下表即可。