文章目录
什么是 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 下表即可。