1.DOM的基本操作（上）
- DOM-Document Object Model
1.获取元素的方式
①根据id名称获取元素
②根据元素类名获取
③根据元素标签名获取
④根据选择器获取一个
⑤根据选择器获取一组
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>一号</div>
<div class="box">二号</div>
<div class="box content">三号</div>
<div class="box" id="container">四号</div>
<script>
// 获取元素的方式
// 根据 id 获取页面元素
// var ele = document.getElementById( 'abc' )
// 输出返回值
// console.log(ele)
// 根据类名获取页面元素
// var eles = document.getElementsByClassName( 'box' )
// 输出返回值
// console.log( eles )
// 根据标签名获取页面元素
// var eles = document.getElementsByTagName( 'div' )
// 输出返回值
// console.log( eles )
// 根据选择器获取一个
// var ele = document.querySelector( '.box' )
// 输出返回值
// console.log( ele )
// 根据选择器获取一组
var eles = document.querySelectorAll( '.abc' )
// 输出返回值
console.log( eles )
</script>
</body>
2.操作元素内容
<body>
<button>操作内容</button>
<div>
<p>文本内容</p>
</div>
<script>
// 操作元素文本内容
// 获取元素
// var ele = document.querySelector( 'div' )
// var btn = document.querySelector( 'button' )
// // 获取元素的文本内容
// console.log( ele.innerText )
// // 给 按钮 绑定点击事件
// btn.onclick = function () {
// // 设置 div 内的文本内容
// ele.innerText = '新内容'
// }
// 获取元素
var ele = document.querySelector( 'div' )
var btn = document.querySelector( 'button' )
// 获取元素的文本内容
console.log( ele.innerHTML )
// 给 按钮 绑定点击事件
btn.onclick = function () {
// 设置 div 内的文本内容
ele.innerHTML = '<span>新内容</span>'
}
</script>
</body>
<body>
<button>操作属性</button>
<div id="box" hello="world">div 标签</div>
<script>
// 操作元素属性
// 原生属性
// 获取元素
var box = document.querySelector( 'div' )
var inp = document.querySelector( 'input' )
var btn = document.querySelector( 'button' )
// // 获取元素属性
// console.log( box.id )
// console.log( inp.type )
// // 给按钮绑定点击事件
// btn.onclick = function () {
// // 修改元素属性
// box.id = 'content'
// inp.type = 'checkbox'
// }
// 获取自定义属性
var res = box.getAttribute( 'hello' )
console.log( res )
// 给按钮绑定点击事件
btn.onclick = function () {
// 修改自定义属性
box.removeAttribute( 'hello', '新来的' )
}
</script>
</body>
操作元素类名
<body>
<button>操作类名</button>
<div class="content">文本内容</div>
<script>
// 操作元素类名
// 获取元素
var box = document.querySelector( 'div' )
var btn = document.querySelector( 'button' )
// 获取类名
console.log( box.className )
// 给 按钮 绑定点击事件
btn.onclick = function () {
// 设置 div 内的类名
box.className = '新内容'
}
</script>
</body>
操作元素行内样式
- 注意带有下划线的样式名的时候要修改为驼峰命名
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
font-size: 20px;
}
</style>
</head>
<body>
<button>操作样式</button>
<div style="width: 100px; height: 100px; background-color: pink;">文本内容</div>
<script>
// 操作元素类名
// 获取元素
var box = document.querySelector( 'div' )
var btn = document.querySelector( 'button' )
// 获取样式
console.log( box.style.width )
console.log( box.style.height )
console.log( box.style.backgroundColor )
// 给 按钮 绑定点击事件
btn.onclick = function () {
// 设置 div 的样式
box.style.width = '200px'
box.style.height = '300px'
box.style.backgroundColor = 'skyblue'
}
</script>
</body>
操作元素非行内样式
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
font-size: 20px;
}
</style>
</head>
<body>
<button>操作类名</button>
<div style="width: 100px; height: 100px; background-color: pink;">文本内容</div>
<script>
// 操作元素类名
// 获取元素
var box = document.querySelector( 'div' )
var btn = document.querySelector( 'button' )
// 获取样式
console.log( window.getComputedStyle(box).width )
console.log( window.getComputedStyle(box).height )
console.log( window.getComputedStyle(box).fontSize )
</script>
</body>
总结
3.案例
回到顶部
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 3000px;
}
.header {
width: 100%;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: #fff;
background-color: skyblue;
transition: top .5s linear;
position: fixed;
top: -80px;
left: 0;
}
.goTop {
width: 50px;
height: 50px;
background-color: pink;
font-size: 20px;
text-align: center;
line-height: 25px;
color: #fff;
position: fixed;
bottom: 50px;
right: 50px;
display: none;
}
</style>
</head>
<body>
<div class="header">顶部通栏</div>
<div class="goTop">回到顶部</div>
<script>
// 1. 获取元素
var header = document.querySelector('.header')
var goTop = document.querySelector('.goTop')
// 2. 绑定滚动事件
window.onscroll = function () {
// 2-1. 获取浏览器卷去的高度
var height = document.documentElement.scrollTop || document.body.scrollTop
// 2-2. 判断卷去的高度
if (height >= 300) {
// 显示
header.style.top = '0px'
goTop.style.display = 'block'
} else {
// 隐藏
header.style.top = '-80px'
goTop.style.display = 'none'
}
}
// 3. 绑定点击事件
goTop.onclick = function () {
// 3-1. 让页面滚动回到顶部
window.scrollTo({
top: 0,
behavior: 'smooth'
})
}
</script>
</body>
全选
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
padding: 20px;
border: 1px solid pink;
margin: 30px auto;
border-radius: 5px;
}
hr {
margin: 10px 0;
}
</style>
</head>
<body>
<div class="box">
全选 : <input type="checkbox"> <br>
<hr>
<input type="checkbox"> 选项一 <br>
<input type="checkbox"> 选项二 <br>
<input type="checkbox"> 选项三 <br>
<input type="checkbox"> 选项四 <br>
</div>
<script>
// 1. 获取元素
var allBtn = document.querySelector('input')
// 表示选中从第2个开始的子元素
var items = document.querySelectorAll('input:nth-child(n + 2)')
// 2. 给全选按钮绑定事件
allBtn.onclick = function () {
// 2-1. 拿到自己的选中状态
var type = allBtn.checked
// 2-2. 把自己的选中状态设置给每一个选项按钮
for (var i = 0; i < items.length; i++) {
items[i].checked = type
}
}
// 3. 循环给每一个选项按钮绑定点击事件
for (var i = 0; i < items.length; i++) {
// 3-1. 给每一个选项按钮绑定点击事件
items[i].onclick = function () {
// 3-2. 首先定义假设变量, 假设所有按钮都是选中的
var flag = true
// 3-3. 通过循环来验证我们的假设
for (var j = 0; j < items.length; j++) {
if (items[j].checked === false) {
flag = false
break
}
}
// 3-4. 把我们得到的结果设置给全选按钮
allBtn.checked = flag
}
}
</script>
</body>
选项卡
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, ol, li {
list-style: none;
}
.box {
width: 600px;
height: 400px;
border: 3px solid pink;
margin: 50px auto;
display: flex;
flex-direction: column;
}
.box > ul {
height: 60px;
display: flex;
}
.box > ul > li {
flex: 1;
color: #fff;
background-color: skyblue;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.box > ul > li.active {
background-color: orange;
}
.box > ol {
flex: 1;
position: relative;
}
.box > ol > li {
width: 100%;
height: 100%;
background-color: purple;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 100px;
position: absolute;
left: 0;
top: 0;
display: none;
}
.box > ol > li.active {
display: flex;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<script>
// 1. 获取元素
var btns = document.querySelectorAll('ul > li')
var tabs = document.querySelectorAll('ol > li')
// 2. 给 btns 里面所有按钮添加点击事件
btns.forEach(function (item, index) {
item.onclick = function () {
// 2-2. 给 btns 和 tabs 里面的所有内容取消 active 类名
btns.forEach(function (t, i) {
t.className = ''
tabs[i].className = ''
})
// 2-3. 当前点击的按钮和索引对应的盒子添加 active 类名
item.className = 'active'
tabs[index].className = 'active'
}
})
</script>
</body>
4.DOM的基本操作（下）
1.节点操作
①创建节点
// 创建一个 div 标签
var div = document.createElement('div')
// 控制台输出
console.log(div)
②插入节点
<div>
<p>我是 div 内本身的 p 标签</p>
</div>
<script>
// // 创建一个 span 标签
// var span = document.createElement('span')
// // 向 span 内添加一些文本内容
// span.innerText = '我是创建出来的 span 标签'
// // 输出一下
// console.log(span)
// // 获取到页面上的 div 元素
// var div = document.querySelector('div')
// // 把创建的 span 标签插入到 div 内部
// div.appendChild(span)
// 创建一个 span 标签
var span = document.createElement('span')
// 向 span 内添加一些文本内容
span.innerText = '我是创建出来的 span 标签'
// 输出一下
console.log(span)
// 获取到页面上的 div 元素
var div = document.querySelector('div')
// 获取到 div 内部本身的 p 标签
var p = document.querySelector('p')
// 把创建的 span 标签插入到 div 内部, 并且放在 p 标签的前面
div.insertBefore(span, p)
③删除节点
<body>
<div>
<p>我是 div 内部本身的 p 标签</p>
<span>我是 div 内部本身的 span 标签</span>
</div>
<script>
// // 获取到 div 元素
// var div = document.querySelector('div')
// // 获取到 p 元素
// var p = document.querySelector('p')
// // 从 div 内删除 p 元素
// div.removeChild(p)
// 获取到 div 元素
var div = document.querySelector('div')
// 把 div 删除
div.remove()
</script>
</body>
④替换节点
<body>
<div>
<p>我是 div 内的 p 标签</p>
<span>我是 div 内的 span 标签</span>
<p>我是 div 内的 p 标签</p>
</div>
<script>
// 创建一个 i 标签
var i = document.createElement('i')
// 向 i 标签内添加一些文本
i.innerText = '我是创建出来的 i 标签'
// 获取到 div 元素
var div = document.querySelector('div')
// 获取到 span 元素
var span = document.querySelector('span')
// 使用创建的 i 标签去替换 div 内本身的 span 标签
div.replaceChild(i, span)
</script>
</body>
⑤克隆节点
<body>
<div>
<p>我是 div 内的 p 标签</p>
</div>
<script>
// 获取 div 元素
var div = document.querySelector('div')
// 克隆一个 div 元素, 不克隆后代元素
var clone1 = div.cloneNode(false)
// 克隆一个 div 元素, 克隆后代元素
var clone2 = div.cloneNode(true)
// 输出
console.log('不克隆后代节点 : ', clone1)
console.log('克隆后代节点 : ', clone2)
</script>
</body>
总结
2.获取元素尺寸
5.动态渲染页面（数据）
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
width: 300px;
text-align: center;
}
</style>
</head>
<body>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<!-- JS 渲染 -->
</tbody>
</table>
<script>
// 提前准备好的数据
var users = [
{ id: 1, name: '前端小灰狼', age: 18 },
{ id: 2, name: '公羊无衣', age: 22 },
{ id: 3, name: '古艺散人', age: 30 }
]
// 0. 获取到 tbody 标签
var tbody = document.querySelector('tbody')
// 1. 循环遍历 users 数据
users.forEach(function (item) {
// 这里的 item 就是数组中的每一个对象
console.log(item)
// 2. 每一个对象生成一个 tr 标签
var tr = document.createElement('tr')
// 3. 循环遍历 item
for (var key in item) {
// 4. 生成 td 标签
var td = document.createElement('td')
td.innerHTML = item[key]
// 5. 把 td 插入到 tr 标签内部
tr.appendChild(td)
}
// 6. 把本次的 tr 插入到 tbody 的内部
tbody.appendChild(tr)
})
</script>
</body>
6.事件（上）
事件绑定
事件类型
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
// 给 div 绑定点击事件
// 1. 获取 div 元素
var div = document.querySelector('div')
// 2. 绑定点击事件
div.onclick = function () {
// 3. 书写点击的时候执行的代码
console.log('啊 ! 救命啊 !!')
}
</script>
</body>
事件对象
-
当事件触发的时候, 一个描述该事件信息的对象数据类型
-
鼠标事件–
-
-
此外还有键盘事件等
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div')
// 直接接受一个形参
div.onclick = function (e) {
// 会在事件触发的时候由浏览器自动传递实参
// 传递进来的实参就是本次事件的事件对象
console.log(e)
}
</script>
</body>
7.鼠标跟随
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img {
width: 50px;
height: 50px;
position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<img src="./a.png" alt="">
<script>
var imgBox = document.querySelector('img')
// 给 document 绑定一个鼠标移动事件
document.onmousemove = function (e) {
// 拿到光标相对于窗口的坐标点位
var x = e.clientX
var y = e.clientY
// 把 x 和 y 的值赋值给 img 标签的 left 和 top 样式
imgBox.style.left = x + 5 + 'px'
imgBox.style.top = y + 5 + 'px'
}
</script>
</body>
8.事件（下）
事件传播
- 浏览器响应事件的机制
- window->document->html->body->outer->center->inner->inner->center->outer->body->html->document->window
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.outer {
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
background-color: pink;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.center {
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background-color: skyblue;
}
.inner {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<div class="center">
<div class="inner"></div>
</div>
</div>
<script>
// 绑定事件
// 1. 获取到需要用到的元素
var outer = document.querySelector('.outer')
var center = document.querySelector('.center')
var inner = document.querySelector('.inner')
// 2. 给三个元素都绑定点击事件
outer.onclick = function () { console.log('我是 outer 元素, 我被点击了') }
center.onclick = function () { console.log('我是 center 元素, 我被点击了') }
inner.onclick = function () { console.log('我是 inner 元素, 我被点击了') }
</script>
</body>
阻止事件传播
- 语法：
事件对象.stopPropagation()
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.outer {
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
background-color: pink;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.center {
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background-color: skyblue;
}
.inner {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<div class="center">
<div class="inner"></div>
</div>
</div>
<script>
// 绑定事件
// 1. 获取到需要用到的元素
var outer = document.querySelector('.outer')
var center = document.querySelector('.center')
var inner = document.querySelector('.inner')
// 2. 给三个元素都绑定点击事件
outer.onclick = function () { console.log('我是 outer 元素, 我被点击了') }
center.onclick = function () { console.log('我是 center 元素, 我被点击了') }
inner.onclick = function (e) {
// 阻止事件传播
e.stopPropagation()
console.log('我是 inner 元素, 我被点击了')
}
</script>
</body>
事件委托
- 利用事件冒泡的机制, 把自己的事件委托给结构父级中的某一层
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
ul {
width: 800px;
height: 600px;
background-color: skyblue;
margin: 50px;
overflow: hidden;
}
ul > li {
float: left;
width: 100px;
height: 100px;
margin: 20px;
background-color: pink;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
/*
事件委托
*/
// 1. 获取到 ul 元素
var ul = document.querySelector('ul')
// 2. 给 ul 绑定点击事件
ul.onclick = function (e) {
// 3. 通过事件目标来判断你点击的是 li
console.log(e.target.tagName)
if (e.target.tagName === 'LI') {
console.log('你点击的是 li')
}
}
</script>
</body>
9.轮播图
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, ol, li {
list-style: none;
}
img {
width: 100%;
height: 100%;
display: block;
}
.banner {
width: 100%;
height: 500px;
position: relative;
margin: 50px 0;
}
.banner > ul {
width: 100%;
height: 100%;
position: relative;
}
.banner > ul > li {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity .5s linear;
}
.banner > ul > li.active {
opacity: 1;
}
.banner > ol {
width: 200px;
height: 30px;
position: absolute;
left: 30px;
bottom: 30px;
background-color: rgba(0, 0, 0, .5);
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 15px;
}
.banner > ol > li {
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
cursor: pointer;
}
.banner > ol > li.active {
background-color: orange;
}
.banner > div {
width: 40px;
height: 60px;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, .5);
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: #fff;
cursor: pointer;
}
.banner > div.left {
left: 0;
}
.banner > div.right {
right: 0;
}
</style>
</head>
<body>
<div class="banner">
<!-- 图片区域 -->
<ul class="imgBox">
<li class="active"><img src="./imgs/01.jpg" alt=""></li>
<li><img src="./imgs/02.jpg" alt=""></li>
<li><img src="./imgs/03.jpg" alt=""></li>
<li><img src="./imgs/04.jpg" alt=""></li>
</ul>
<!-- 焦点区域 -->
<ol>
<li data-i="0" data-name="point" class="active"></li>
<li data-i="1" data-name="point"></li>
<li data-i="2" data-name="point"></li>
<li data-i="3" data-name="point"></li>
</ol>
<!-- 左右切换按钮 -->
<div class="left"><</div>
<div class="right">></div>
</div>
<script>
// 获取到所有承载图片的 li 和所有承载焦点的 li
var imgs = document.querySelectorAll('ul > li')
var points = document.querySelectorAll('ol > li')
var banner = document.querySelector('.banner')
// 准备一个变量, 表示当前是第几张, 默认是 0, 因为默认显示的是索引第 0 张
var index = 0
// 书写一个切换一张的函数
// 约定:
// 参数为 true, 我们切换下一张
// 参数为 false, 我们切换上一张
// 参数为 数字, 我们切换到指定索引的那一张
function changeOne(type) {
// 1. 让当前这一张消失
imgs[index].className = ''
points[index].className = ''
// 2. 根据 type 传递来的参数, 来切换 index 的值
if (type === true) {
index++
} else if (type === false) {
index--
} else {
index = type
}
// 判定一下 index 的边界值
if (index >= imgs.length) {
index = 0
}
if (index < 0) {
index = imgs.length - 1
}
// 3. 让改变后的这一张显示出来
imgs[index].className = 'active'
points[index].className = 'active'
}
// 给 轮播图区域 盒子绑定点击事件
banner.onclick = function (e) {
// 判断点击的是左按钮
if (e.target.className === 'left') {
console.log('点击的是左按钮')
// 切换上一张, 调用 changeOne 方法传递参数为 false
changeOne(false)
}
// 判断点击的是右按钮
if (e.target.className === 'right') {
console.log('点击的是右按钮')
// 切换下一张, 调用 changeOne 方法传递参数为 true
changeOne(true)
}
// 判断点击的是焦点盒子
if (e.target.dataset.name === 'point') {
console.log('点击的是焦点盒子')
// 拿到自己身上记录的索引
var i = e.target.dataset.i - 0
// 切换某一张, 调用 changeOne 方法传递参数为要切换的索引
changeOne(i)
}
}
// 自动切换功能
setInterval(function () {
// 切换到下一张
changeOne(true)
}, 5000)
</script>
</body>
2293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
