DOM 文档对象模型
JS 运行到 HTML 文件中, 由 HTML 文件提供了 DOM 的能力
比如:
- 添加一个div
- 删除一个li
- 修改一个ol
- 获取某一个标签的样式
- 修改某一个标签的样式
- 给某一个标签添加事件
- 给某一个标签添加属性
DOM 的核心 是 document
document 是JS 内置的一个对象，北部提供了很多属性和方法，帮助我们便捷的操作页面标签
DOM
- 文档对象模型
- 标签
DOM_获取标签
获取标签
语法1： document.querySelector('像写CSS选择器一样书写标签') 反回值： 符合条件的第一个标签
语法2： document.querySelectorAll('像写CSS选择器一样书写标签')
返回值： 返回一个符合条件的标签组成的 伪数组
伪数组 长得很像数组，也有下标，也有下标，也有 length ，但是数组的方法，很多都没有
js
//获取到页面的 div 标签 并存储在 一个变量中 oDiv 中 （变量名并不重要）
var oDiv = document.querySelector('div')
//console.log(oDiv)
var oSpan = document.querySelector('.spanel')
//console.log(oSpan)
var mySpan = document.querySelectorAll('.spanel')
console.log(mySpan)
//console.log([0])
//1. 自已补全 通过 ID 获取元素
//2. 获取一个页面没有的元素DOM_获取样式
元素/标签.style 能够拿到 行内 样式,或者给添加一个行内样式
getComputedStyle('要查询样式的标签'),要查询的样式名 能够获取到元素的样式(行内和非行内都可以) 但是获取到的内容是只读的,只允许查询,不允许修改
js
var oDiv = document.querySelecter('div')
var myDiv = document.querySelect('.box')
console.log(oDiv.style.width)
console.log(oDiv.style.height)
console.log(oDiv.style.background-color) //color is not defined
console.log(oDiv.style.'background-color') //语法不支持
console.log(oDiv.style['background-color']) //能够获取,但是稍微有点麻烦
console.log(oDiv.style.backgroundColor) //推荐写法
//因为元素的样式添加在了 类名,也就是非行内的,所以 style 获取不到
console.log(myDiv.style.width)
console.log(myDiv.style.height)
getComputedStyle('要查询样式的标签').要查询的样式名
console.log(getComputedStyle(myDiv).width)
console.log(getComputedStyle(myDiv).height)
js
//非行内样式 和 行内样式,都能正常获取,但是获取到的值 不能被修改
console.log(getComputedStyle(oDiv).width)
//getComputedStyle(oDiv).width = '800px'
//修改元素的样式
myDiv.style.width = '800px'
myDiv.style.backgroundColor = 'red'案例(随机背景)
xml
<style>
body{
transition: background-color 0.5s ease;
}
</style>
<html>
<body>
<button id="btn">点击更改背景色</button>
<script>
// 0.获取标签
var btn = document.querySelector('#btn')
var body = document.qerySelector('body')
//添加时间
//1.声明一个数组,数组内部存放各种各样的颜色
//2.点击事件触发的时候,随机从数组内拿到一个颜色
//3.赋值给 body 的背景色
//1.声明一个数组,数组内部存放各种各样的颜色
var arr = ['#000000','#ffffff','#00ff00', '#0000ff', '#ffff00', '#800080', '#ffa500']
btn,oncilck = function(){
//2.点击事件触发的时候,随机从数组内拿到一个颜色
var num = Math.floor(Math.random()*arr.length)
body.style.backgroundColor = arr[num]
</script>
</body>
</html>DOM_操作元素类名
元素/标签.className => 能够得到元素目前拥有的类名
还可以给这个属性重新赋值,然后修改当前标签的类名
元素/标签.classList 返回值 是一个伪数组 数组内下表对应的是我们每一个类名 value 属性对应的是我们完整类名的字符串
js
var box = document.querySelector('.box1')
// 1. className
console.log(box.className)
box.className = 'box2' // 当前方式 不管之前有多少类名, 全都重新覆盖掉
box.className = box.className + ' box2'
box.className += ' box2' // 类名之间一定要加 空格
box.className = '' // 相当于清空之前的所有类名
// 2. classList
console.log(box.classList)
box.classList.add('box2') // 向这个标签上在追加一个类名, 原本的类名不受影响
box.classList.remove('qwe') // 删除指定类名
box.classList.remove('asd')案例_自定义弹出层
js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.overlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
left: 0;
}
.msg_box {
width: 280px;
height: 170px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: aliceblue;
border-radius: 10px;
padding: 20px;
}
.msg_box p {
margin: 24px;
}
.close {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<!-- 点击打开弹出框 -->
<button id="show_msg_box">展示弹出框</button>
<!-- 灰色的遮罩层 -->
<div class="overlay close"></div>
<!-- 弹出层的信息展示 -->
<div class="msg_box close">
<h1>这是一个自定义弹出层</h1>
<p>广告位招租</p>
<!-- 点击关闭弹出层 -->
<button id="close_msg_box">关闭</button>
</div>
<script>
// 0. 获取标签
var showMsgBox = document.querySelector('#show_msg_box')
var closeMsgBox = document.querySelector('#close_msg_box')
var overlay = document.querySelector('.overlay') // 遮罩层
var msgBox = document.querySelector('.msg_box') // 信息框
// 添加事件
// 1. 打开弹窗框 遮罩层和弹出框的信息展示
showMsgBox.onclick = function () {
// 拿遮罩层举例, 删掉 close 添加类名 show
overlay.classList.remove('close')
overlay.classList.add('show')
// 信息框和上边的遮罩层相同
msgBox.classList.remove('close')
msgBox.classList.add('show')
}
// 2. 关闭弹出框 遮罩层和弹出框的信息隐藏
closeMsgBox.onclick = function () {
// 删掉 show, 添加 close
overlay.classList.remove('show')
overlay.classList.add('close')
msgBox.classList.remove('show')
msgBox.classList.add('close')
}
</script>
</body>
</html>操作元素属性
1.获取标签属性
js
console.log(box.getAttribute('class'))
var res = box.getAttribute('qew')
console.log(res)2.设置标签属性
js
box.setAttribute('my_qwe', '这是通过 JS 添加的一个自定义属性')
box.setAttribute('class', 'qf001')
box.setAttribute('qwe', '通过 JS 将 qwe 的属性值 进行了一个修改')3.H5新增自定义属性
h5自定义属性在书写的时候有一个固定的开头就是 data- 完整语法:data-属性名=属性值
获取的语法: 元素/标签.dataset.属性名(属性名不要带data-)
注意点:在设置时,不要采用驼峰,全小写,因为哪怕你写大了,浏览器也会转换成小写
案例_全选
js
<!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="checkbox" class="all_btn">
<hr>
<input type="checkbox" class="item"> 兴趣1
<input type="checkbox" class="item"> 兴趣2
<input type="checkbox" class="item"> 兴趣3
<script>
// 0. 获取标签
var allBtn = document.querySelector('.all_btn')
var items = document.querySelectorAll('.item')
// 1. 给全选按钮添加点击事件
allBtn.onclick = function () {
for (var i = 0; i < items.length; i++) {
items[i].checked = allBtn.checked
}
}
// 2. 给所有的兴趣爱好添加事件
// 因为 items 是一个伪数组, 所以不能添加点击事件, 只有页面的元素/标签 才能添加
// items.onclick = function () {}
// items[0].onclick = function () { console.log(123) }
// items[1].onclick = function () { console.log(123) }
// items[2].onclick = function () { console.log(123) }
// 因为上述的代码比较复杂, 所以可以使用 一个循环进行优化 (前提是, 这几个函数的事件是一样的, 而我们目前案例中就是相同的事件功能)
// for (var i = 0; i < items.length; i++) {
// items[i].onclick = function () {
// console.log(123)
// }
// }
// console.log(setItemChecked) // 是一个函数体
// console.log(setItemChecked()) // undefined
// 拆分代码, 进行代码的优化(可读性)
for (var i = 0; i < items.length; i++) {
items[i].onclick = setItemChecked
// items[i].onclick = setItemChecked()
}
function setItemChecked() {
// console.log('判断内部的所有兴趣有没有被选中, 如果有那么选中 全选')
// 1. 要知道现在有没有全部选中 所有兴趣
var num = 0
for (var k = 0; k < items.length; k++) {
items[k].checked && num++
}
// console.log(num, items.length, num === items.length)
// 2. 根据上边的结果, 决定是否选中 全选
allBtn.checked = num === items.length
}
</script>
</body>
</html>