什么是DOM
DOM,全称
Document Object Model
文档对象模型
文档
:文档表示的就是整个的HTML网页文档对象
:对象表示将网页中的每一个部分都转换为了一个对象。模型
:使用模型来表示对象之间的关系,这样方便我们获取对象- DOM 树
- DOM 树
DOM查询
1.通过id名获得元素,返回一个对象
let box = document.getElementById('box');
console.log(box);
2.通过标签获得元素,返回一个伪数组
// 获得数组内的元素,利用下标
let divBox = document.getElementsByTagName('div');
console.log(divBox);
console.log(divBox[1]);
// 把所有的元素都打印出来
for (let i = 0; i < divBox.length; i++) {
console.log(divBox[i]);
3.通过类名获得元素,返回一个伪数组
let divBoxs = document.getElementsByClassName('items');
console.log(divBoxs);
4.通过name值获取,返回元素节点集合(相当于伪数组)
let inputs = document.getElementsByName('gender');
console.log(inputs);
console.log(Object.prototype.toString.call(inputs));
5.通过选择器名获取元素
document.querySelector
:获得满足条件的第一个元素document.querySelectorAll
:获得满足条件的所有元素
<script>
// 通过选择器名获取元素
// #box
// .items
// 1.document.querySelector--->获得满足条件的第一个元素
let divBox1 = document.querySelector('#box');
console.log(divBox1);
let divBox2 = document.querySelector('.items');
console.log(divBox2);
// 2.document.querySelectorAll--->获得满足条件的所有元素
// let divBoxs = document.querySelectorAll('items');
// console.log(divBoxs);
let divBox3 = document.querySelectorAll('div')
console.log(divBox3);
let targetA = document.querySelector('.nav .links a');
console.log(targetA);
</script>
利用点语法设置属性
<!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="box">
吃肉不吃蒜,滋味少一半
</div>
</body>
</html>
<script>
let divBox = document.getElementById('box');
// console.log(divBox);
console.dir(divBox); //将对象展开打印
// 样式
// 样式属性值--->字符串
divBox.style.color = 'pink';
divBox.style.width = '400px';
// 注意css属性名带有-,应该去掉,然后首字母大写
divBox.style.backgroundColor = 'red';
divBox.style.fontsize = '30px';
// js设置属性连写
divBox.style.border = '5px solid blue';
</script>
- 查询案例:隔行换色
<!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>
<ul>
<li>奇数</li>
<li>偶数</li>
<li>奇数</li>
<li>偶数</li>
<li>奇数</li>
<li>偶数</li>
<li>奇数</li>
<li>偶数</li>
<li>奇数</li>
<li>偶数</li>
<li>奇数</li>
<li>偶数</li>
<li>奇数</li>
<li>偶数</li>
<li>奇数</li>
<li>偶数</li>
<li>奇数</li>
<li>偶数</li>
<li>奇数</li>
<li>偶数</li>
</ul>
</body>
</html>
<script>
// 奇数行红色
// 偶数行粉色
// list 是li标签的数组.数组中没有color属性
let list = document.querySelectorAll('ul li');
for (let i = 0; i < list.length; i++) {
if (i % 2 == 0) {
list[i].style.color = 'red';
} else {
list[i].style.color = 'pink';
}
}
</script>
事件
就是文档或浏览器窗口中发生的一
些特定的交互瞬间。(需要元素执行什么操作)
事件属性
:dom对象内置 若干on开头的属性,用来保存事件处理函数!事件触发
:当 浏览器 发现 事件触发,就会 调用 dom对象相应的 事件属性 中 保存的函数!
事件三要素
事件源
—谁来做事件类型
—怎么做事件结果
(事件处理函数 )—做什么
<!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>
<button>你来点我啊!</button>
<ul>
<li><a href="#">按钮1</a></li>
<li><a href="#">按钮2</a></li>
<li><a href="#">按钮3</a></li>
<li><a href="#">按钮4</a></li>
<li><a href="#">按钮5</a></li>
<li><a href="#">按钮6</a></li>
<li><a href="#">按钮7</a></li>
<li><a href="#">按钮8</a></li>
</ul>
<a href="#">不要控制我</a>
<script>
// 事件: 需要元素执行什么操作,称为事件
// 事件三要素:
// 事件源-----谁来做
// let btn = document.getElementsByTagName('button')[0];// 拿到的是数组,所以要加下标
let btn = document.querySelector('button');// 直接拿到元素
// 事件类型---怎么做
// 当元素被点击的时候,执行某个函数
btn.onclick = function () {
// 事件结果---做什么
alert('我,被点击了!!!');
}
// 小练习: 控制列表中的a标签,给每个a标签设置点击事件,打印:我学会了
let aArr = document.querySelectorAll('li a');
for(let i = 0;i < aArr.length;i++) {
aArr[i].onclick = function () {
console.log(this);
// 谁调用就指向谁
}
}
</script>
</body>
</html>
鼠标移入移出事件
tip:当把鼠标移入的时候,先把原来的颜色保存,然后再改吧颜色
<!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>
<ul>
<li>奇数</li>
<li>偶数</li>
<li>奇数</li>
<li>偶数</li>
<li>奇数</li>
<li>偶数</li>
<li>奇数</li>
<li>偶数</li>
<li>奇数</li>
<li>偶数</li>
<li>奇数</li>
<li>偶数</li>
<li>奇数</li>
<li>偶数</li>
<li>奇数</li>
<li>偶数</li>
<li>奇数</li>
<li>偶数</li>
<li>奇数</li>
<li>偶数</li>
</ul>
<script>
let liArr = document.querySelectorAll('li');
// 用来保存原来颜色的容器
let oldColor;
for (let i = 0; i < liArr.length; i++) {
if (i % 2 == 0) {
liArr[i].style.backgroundColor = 'red';
} else {
liArr[i].style.backgroundColor = 'pink';
}
}
for (let i = 0; i < liArr.length; i++) {
liArr[i].onmouseover = function () {
oldColor = this.style.backgroundColor;
this.style.backgroundColor = 'gold';
}
liArr[i].onmouseout = function () {
this.style.backgroundColor = oldColor;
}
}
// 问题:鼠标移出的时候,恢复原来的颜色
// 前提:不允许再次判断奇偶数
// 当把鼠标移入的时候,先把原来的颜色保存,然后再改吧颜色
</script>
</body>
</html>