目录
一、DOM 文档对象模型
1、基本概念
把HTML的每一个标签都可以映射到JS中的一个对应对象。
通过DOM就可以让JS代码来操作页面元素。
2、DOM树
3、DOM API
a. querySelector 选中页面元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">abc</div>
<div class="id">def</div>
<h3>
<span>
<input type="text">
</span>
</h3>
<script>
let elem1=document.querySelector('.box'); //使用CSS的类名选择器,选中box
console.log(elem1); //打印所对应的html代码
console.dir(elem1); //按照对象去打印
//如果有多个.box,此时默认选中的是第一个
//如果想全选,则使用querySelectorAll,返回的是一个数组,包含所有的.box
let elem2=document.querySelector('#id'); //使用CSS的id选择器,选中id
console.log(elem2);
let elem3 = document.querySelector('h3>span>input'); //使用CSS的后代选择器,选中input
console.log(elem3);
</script>
</body>
</html>
b. innerHTML 获取/修改元素内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">abc</div>
<div class="id">def</div>
<h3>
<span>
<input type="text">
</span>
</h3>
<script>
let div = document.querySelector('.box');
div.onclick = function(){
console.log(div.innerHTML);//获取div里的内容,运行结果为abc
div.innerHTML+='a'; //每点击一次abc,都会在abc的后面添加一个a,例如如果点击三次abc,得到的结果为abcaaa
}
</script>
</body>
</html>
c. 获取/修改元素属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="C:\Users\86188\Desktop\文件\头像\22222.jpg" alt="这是一个头像" title="头像1" width="100px">
<!--原图片的属性-->
<script>
let img=document.querySelector('img');
img.onclick = function(){
//获取原图片的各种属性
console.log(img.src);
console.log(img.title);
console.log(img.alt);
console.log(img.width);
img.src='C:\\Users\\86188\\Desktop\\文件\\头像\\11111.jpg';//修改图片,把地址设成你想要的图片
}
</script>
</body>
</html>
点击图片之后
d. 获取/修改表单元素的属性
表单元素(input,textarea,select)有一些普通标签没有的属性
最重要的就两个,value和type
value,字符串,获取表单里的内容
type
应用:每点击一次按钮,则文本框中的数加1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<button>点我一下</button>
<script>
let input = document.querySelector('input');
let button = document.querySelector('button');
button.onclick = function(){
console.log(input.value);//获取表单里输入的内容,value是字符串
//想实现点击按钮,则文本框中的数字+1的效果
let value = parseInt(input.value);//将value转换成number类型
value +=1;
input.value = value;
}
</script>
</body>
</html>
应用: 隐藏密码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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>
</html>
e. 获取/修改样式属性
第一种,修改内联样式(修改style属性的值)
such as:
每点击一次文字,文字放大10个像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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;
div.style.fontSize = fontSize + 'px';
}
</script>
</body>
</html>
第二种,修改元素应用的CSS类名
suah as:
应用:切换夜间/日间模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="one" class="light" style="font-size:20px;height:500px;">这是一个div</div>
<style>
/*日间模式*/
.light{
color:black;
background-color:white;
}
/*夜间模式*/
.dark{
color:white;
background-color:black;
}
</style>
<script>
let div = document.querySelector('#one');
div.onclick = function(){
if(div.className == 'dark'){
div.className = 'light';
}else {
div.className = 'dark';
}
}
</script>
</body>
</html>
日间模式
夜间模式
f. createElement 新增元素
先创建一个元素,然后把这个元素放到dom树中
appendChild:把元素加到末尾
insertBefore:把元素加到指定子元素的前面(中间位置插入)
应用:想往div标签里放一个输入框input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="one">
这是一个div
</div>
<script>
let input = document.createElement('input');//先创建一个标签,参数填你的标签的类型,input,div等等
input.values='hello';//给input加入属性
//将input标签挂到dom树上
let div = document.querySelector('.one');//先选中div标签
div.appendChild(input);//appendChild追加一个子元素(加到末尾),将input追加到div中
</script>
</body>
</html>
g. removeChild 删除元素
先获取这个元素
父元素.removeChild(要删除的元素);
4、事件
事件的三要素:
事件源:哪个元素产生的事件。
事件类型:点击、双击、移动、键盘按下……
事件处理程序:事件发生以后,要执行哪个代码(要执行的代码都是提前设定好的)。
事件绑定的方法:
第一种方法(一般不这么使用)
点击abc时弹出内容为hello的弹窗
<div class="box" onclick="alert('hello')">abc</div>
第二种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">abc</div>
<div class="id">def</div>
<h3>
<span>
<input type="text">
</span>
</h3>
<script>
let div = document.querySelector('.box');
div.onclick = function(){
alert('hello');
}
</script>
</body>
</html>
div.onclick//鼠标点击事件
div.onmousemove//鼠标移动事件
div.onmouseenter//鼠标进入
div.onmouseleave//鼠标离开
//and so on……
5、DOM实践
a. 网页版本猜数字
要求:
生成一个1-100之间的随机数
让用户来输入一个数字
根据输入的数字的大小关系,给出提示,高了/低了/猜对了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猜数字</title>
</head>
<body>
<div>请输入要猜的数字</div>
<input type="text">
<button>提交</button>
<!--使用这个div来显示结果-->
<div class="result">
</div>
<script>
//1、生成一个1-100的随机数
let toGuess = parseInt(100*Math.random())+1;//Math.random生成的是[0,1)的小数
console.log(toGuess);//可以在控制台看答案
//2、进行猜数字操作
let button = document.querySelector('button');
let input = document.querySelector('input');
let resultDiv = document.querySelector('.result');
button.onclick = function(){
//3、取出输入框中的内容
if(input.value == ''){
//用户什么都没输入,直接返回
return;
}
let inputNum = parseInt(input.value);
//比较大小关系
if(inputNum < toGuess){
//低了
resultDiv.innerHTML = '低了';
} else if(inputNum > toGuess){
//高了
resultDiv.innerHTML = '高了';
}else{
//猜对了
resultDiv.innerHTML = '猜对了';
}
}
</script>
</body>
</html>
b. 表白墙程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表白墙</title>
<style>
/*通配符选择器,选中页面所有元素*/
*{
/*消除浏览器的默认样式*/
margin:0;
padding:0;
box-sizing:border-box;
}
.container{
width:600px;
margin: 20px auto;
}
h1{
text-align:center;/*让h1里的文字水平居中*/
}
p{
text-align:center;
color:#666;
margin:20px 0;
}
.row{
/*开启弹性布局*/
display:flex;
height:40px;
/*水平方向居中*/
justify-content:center;
/*垂直方向居中*/
align-items:center;
}
.row span{
width:80px;
}
.row input{
width:200px;
height:30px;
}
.row button{
width:280px;
height:30px;
color:white;
background-color: orange;
/*去掉边框*/
border:none;
border-radius:5px;/*圆角矩形*/
}
/*点击按钮的时候有个反馈*/
.row button:active{
background-color: grey;
}
</style>
</head>
<body>
<div class="container">
<h1>表白墙</h1>
<p>输入内容后点击提交,信息会显示到下方表格中</p>
<div class="row">
<span>谁:</span>
<input type="text">
</div>
<div class="row">
<span>对谁:</span>
<input type="text">
</div>
<div class="row">
<span>说:</span>
<input type="text">
</div>
<div class="row">
<button id="submit">提交</button>
</div>
<div class="row">
<button id ="revert">撤销</button>
</div>
</div>
<script>
//实现提交操作,点击提交按钮,能够把用户输入的内容提交到页面上显示
//点击的时候,获取三个输入框中的文本内容
//创建一个新的div.row,把内容构造到这个div中即可
let containerDiv = document.querySelector('.container');
let inputs = document.querySelectorAll('input');
let button = document.querySelector('#submit');
button.onclick = function(){
//1、获取三个输入框的内容
let person1 = inputs[0].value;
let person2 = inputs[1].value;
let message = inputs[2].value;
if(person1=='' ||person2==''||message==''){
return;
}
//2、构造新的div
let rowDiv = document.createElement('div');
rowDiv.className='row message';
rowDiv.innerHTML = person1 + '对' + person2 + '说:' + message;
containerDiv.appendChild(rowDiv);
//3、清空之前的输入框内容
for(let input of inputs){
input.value='';
}
}
let revertButton = document.querySelector('#revert');
revertButton.onclick = function(){
//删除最后一条消息
//选中所有的row,找到最后一个row,然后进行删除
let rows = document.querySelectorAll('.message');
containerDiv.removeChild(rows[rows.length-1]);
}
</script>
</body>
</html>