（javascript）（基础知识+实例） 10.DOM
DOM（document object model）
-
文档对象模型 和网页相关
-
操作网页样式
-
实现动画
-
实现事件交互
-
document是js自带的，可以通过document获取整个网页
-
获取标签几种方式
- 通过id名来获取标签，返回就是这个标签
- document.getElementById(id名称)
- 通过类名来获取标签，返回是一个数组，数组里面是匹配的标签
- document.getElementsByClassName(类名)
- 通过标签名来获取标签，返回是一个数组，数组里面是匹配的标签
- document.getElementsByTagName(标签名)
- 通过querySelector选择器，css选择器
- 只会匹配第一个标签
- document.querySelector(css选择器)
- 通过querySelector选择器，css选择器
- 匹配所有满足的标签
- document.querySelectorAll(css选择器)
- 通过id名来获取标签，返回就是这个标签
-
操作标签的样式
- 获取样式
- 获取行内的样式
- 获取标签（元素）.style.css属性名
- 获取任何地方写的样子(获取的是经过浏览器解析的样式) 非IE
- getComputedStyle(元素).css属性名
- ie8一下获取样式
- 元素.currentStyle.css属性名
- 获取行内的样式
- 设置样式
- 获取标签（元素）.style.css属性名 = css属性值
- 通过js设置的是行内样式
- 不是所有的样式都需要通过js来设置，一般通过js设置是动态样式
- 获取样式
-
操作元素（标签）的属性
- 获取属性值
- 元素.getAttribute(属性名)
- 设置属性值
- 元素.setAttribute(属性名, 属性值)
- 获取自定义
data-名称的属性- dataset
- 元素.dataset.名称
- 获取属性值
-
操作元素的类名
- 通过添加或者移除类名的方式来实现修改样式
- 获取
- 元素.getAttribute(‘class’)
- 元素.className
- 设置
- 元素.setAttribute(‘class’, 类名)
- 元素.className = 类名
- 添加
- 元素.classList.add(类名)
- 移除
- 元素.classList.remove(类名)
-
操作内容
- 获取
- 元素.innerHTML 带标签
- 元素.innerText 不带标签
- 元素.value
- 设置
- 元素.innerHTML = 内容 能够识别标签
- 元素.innerText = 内容 不能够识别标签
- 元素.value = 内容
- 获取
-
操作元素尺寸
- 尺寸： 宽高
- 获取宽度
- 元素.clientWidth 获取内容区+左右padding
- 元素.offsetWidth 获取内容区+左右padding + 左右border
- 获取高度
- 元素.clientHeight
- 元素.offsetHeight
- 不支持设置的
-
操作元素的偏移
- 偏移： 某一个元素左上角和页面左上角的距离
- 偏移是有两个方向 一个距离页面顶部 一个距离页面左边
- 哪些方式可以使元素发生偏移
- 如何获取偏移
- 获取距离顶部偏移 元素.offsetTop
- 获取距离左边偏移 元素.offsetLeft
- 设置元素的偏移
- 元素.offsetTop = 值 无法设置
事件 event
-
含义: 由用户行为触发的代码
-
组成部分
- 事件源 （给哪个元素绑定事件）
- 事件类型 （什么样用户行为）
- 事件处理函数（要做什么事情）
-
绑定事件
- html+js的方式
- 在html某个标签上面写上一个on+事件类型=“事件处理函数()”
- 在js里面定义一个事件处理函数
- 纯js的方式绑定事件
- 获取要绑定事件的元素
- 元素（事件源）.on+事件类型 = 事件处理函数
- html+js的方式
-
this关键字
- 在事件处理函数里面 this代表触发事件的事件源
实例
（以下代码均为课程实例）
（1）设置样式
<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>Documenttitle>
<style>
.header{
background-color: blue;
}
style>
head>
<body>
<div class="header">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat aperiam illo aliquam maiores voluptatum hic modi vitae non, incidunt rerum accusantium libero necessitatibus. Nulla assumenda minima distinctio nostrum, labore modi!
div>
<div class="header">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat aperiam illo aliquam maiores voluptatum hic modi vitae non, incidunt rerum accusantium libero necessitatibus. Nulla assumenda minima distinctio nostrum, labore modi!
div>
<script>
// 1. 获取到这个元素
var header = document.getElementsByClassName('header')
console.log(header)
// 设置样式不是给数组设置 是给数组里面每一个元素来设置
for(var i=0;i<header.length;i++){
header[i].style.width = '200px'
header[i].style.height = '200px'
header[i].style.border = '1px solid black'
// 如果是多个单词要使用驼峰命名法
header[i].style.backgroundColor = 'red'
header[i].style.color = 'white'
}
script>
body>
（2）间隔放大
<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>Documenttitle>
<style>
.box{
width: 50px;
height: 50px;
background-color: red;
}
style>
head>
<body>
<div class="box">
div>
<script>
// 获取元素
var box = document.querySelector('.box')
// 间隔放大1倍
setInterval(function(){
// 每一秒钟都需要获取最新的宽高
var oldWidth = getComputedStyle(box).width
var oldHeight = getComputedStyle(box).height
console.log(oldWidth, oldHeight) // '50px' * 2
oldWidth = parseInt(oldWidth) // 50
oldHeight = parseInt(oldHeight) // 50
console.log(oldWidth, oldHeight) // '50px' * 2
box.style.width = oldWidth * 2 + 'px'
box.style.height = oldHeight * 2 + 'px'
}, 1000)
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>Documenttitle>
<style>
.box{
width: 50px;
height: 50px;
background-color: red;
}
.red{
width: 100px;
height: 100px;
background-color: blue;
}
style>
head>
<body>
<div class="box">
div>
<div id="red">
div>
<script>
// 获取元素
var box = document.querySelector('.box')
console.log(box)
// 只能获取到行内的样式
console.log(box.style.width)
console.log(box.style.height)
// 获取任何地方写的样式
// console.log(box.currentStyle.width)
console.log(getComputedStyle(box).width)
console.log(getComputedStyle(box).height)
console.log(getComputedStyle(box).position)
console.log(getComputedStyle(box).backgroundColor)
// 获取元素
var box02 = document.getElementById('red')
console.log(box02)
console.log(getComputedStyle(box02))
script>
body>
（4）操作元素的属性
<body>
<div id="box" class="red" style="width:100px">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos ab voluptates tempora, voluptatum maiores autem enim atque iure ipsa vero nam itaque nobis cumque corrupti, ducimus architecto quaerat libero voluptas.
div>
<script>
// 获取元素
var div = document.querySelector('div')
// 获取属性值
console.log(div.getAttribute('id'))
console.log(div.getAttribute('class'))
console.log(div.getAttribute('style'))
// 设置属性值
div.setAttribute('id', 'header')
div.setAttribute('class', 'blue')
div.setAttribute('style', 'border:1px solid black')
script>
body>
（5）轮播图
<body>
<img src="./imgs/01.png" alt="">
<script>
// 采用数组将所有图片的路径进行存储
var imgList = ['./imgs/01.png', './imgs/02.jpg', './imgs/03.jpg', './imgs/04.jpg']
// 获取元素
var img = document.querySelector('img')
// 定义一个变量用来表示当前是第几张图片
var index = 0
// 间隔换图
setInterval(function(){
// 让图片的下标+1
index++
// 如果到达最后一张 返回第一张
if(index === imgList.length){
index = 0
}
// 通过设置img的src属性来更换图片
img.setAttribute('src', imgList[index])
}, 2000)
script>
body>
（6）自定义属性
<body>
<div id="box" data-key="1" data-age="18" data-id="20">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum voluptatem rerum corporis autem, culpa nisi ea incidunt placeat in numquam optio recusandae voluptate soluta expedita, voluptatum quo et quos corrupti.
div>
<script>
// 获取元素
var box = document.getElementById('box')
// 获取属性值
// console.log(box.getAttribute('data-key'))
// console.log(box.getAttribute('data-age'))
console.log(box.dataset) // {key: '1', age: '18'}
console.log(box.dataset.key) // 1
console.log(box.dataset.age) // 18
script>
body>
（7）操作类名
<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>Documenttitle>
<style>
.box{
width: 300px;
height: 300px;
overflow-y: scroll;
border: 1px solid #000;
}
.blue{
background-color: blue;
color: red;
}
.green{
background-color: green;
color: #fff;
}
style>
head>
<body>
<div id="box" class="box">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas repellat reprehenderit mollitia tenetur in dolores natus alias, amet fuga aliquam dolore iusto aliquid expedita totam necessitatibus suscipit delectus debitis. Reprehenderit!
div>
<script>
var box = document.getElementById('box')
console.log(box.getAttribute('class'))
console.log(box.className)
// box.setAttribute('class', 'blue') // 加上类名 就相当于加了一段样式
// box.setAttribute('class', 'green') // 加上类名 就相当于加了一段样式
// box.className = 'green'
box.classList.add('green')
script>
body>
（8）操作内容
<body>
<div id="box">
<ul>
<li>1li>
<li>2li>
<li>3li>
ul>
<p>圣诞节奥斯卡的骄傲送达时间p>
<b>大家啊谁看得见爱撒娇b>
div>
<script>
// 获取box里面的内容
var box = document.getElementById('box')
console.log(box.innerHTML)
console.log(typeof box.innerHTML)
console.log('=================')
console.log(box.innerText)
console.log(typeof box.innerText)
// 设置box里面的内容
// box.innerHTML = '超链接'
box.innerText = '超链接'
document.body.innerHTML = ''
script>
body>
（9）输入框里面的内容
<body>
<input type="text">
<textarea name="" id="" cols="30" rows="10">textarea>
<button onclick="get()">获取内容button>
<button onclick="set()">设置内容button>
<script>
var inputEle = document.querySelector('input')
var textArea = document.querySelector('textarea')
function get(){
console.log('get函数调用了...')
// 获取输入input textarea里面的内容
console.log(inputEle.value)
console.log(textArea.value)
}
function set(){
console.log('set函数调用了...')
inputEle.value = '输入框的值'
textArea.value = '文本域的值'
}
script>
body>
（10）敏感字过滤
<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>Documenttitle>
<style>
.root{
background-color: gray;
color: #fff;
font-size: 20px;
border: 1px solid black;
width: 50%;
height: 300px;
}
style>
head>
<body>
<textarea name="" id="" cols="30" rows="10">textarea>
<button onclick="send()">发送button>
<div class="root">
div>
<script>
function send(){
// 获取textarea里面的内容
var textarea = document.querySelector('textarea')
var value = textarea.value
// 将内容做一个替换
while(value.indexOf('傻逼') !== -1){
value = value.replace('傻逼', '**')
}
// 将内容当成文本添加到root
var root = document.querySelector('.root')
root.innerHTML = value
}
// var str = 'aaaaaaa'
// str = str.replace('a', 'b') // 'baaaaaa'
// console.log(str)
// str = str.replace('a', 'b')
// console.log(str)
script>
body>
（11）获取一个元素的宽高
<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>Documenttitle>
<style>
.box{
width: 200px;
height: 200px;
padding: 50px 30px 20px 10px;
border: 10px solid #ddd;
border-left-width: 20px;
border-right-width: 9px;
border-top-width: 18px;
border-bottom-width: 7px;
background-color: red;
}
style>
head>
<body>
<div class="box">
div>
<script>
// 用js获取box的宽和高
var box = document.querySelector('.box')
// 内容区宽度
var content = getComputedStyle(box).width
content = parseInt(content)
// 左边padding
var pl = getComputedStyle(box).paddingLeft
pl = parseInt(pl)
// 右边padding
var pr = getComputedStyle(box).paddingRight
pr = parseInt(pr)
// 左边border
var bl = getComputedStyle(box).borderLeftWidth
bl = parseInt(bl)
// 右边border
var br = getComputedStyle(box).borderRightWidth
br = parseInt(br)
console.log(content + pl + pr + bl + br)
// 宽度= 内容区宽度 + 左右padding + 左右的border
// console.log(getComputedStyle(box).height) // 320
console.log(box.offsetWidth)
console.log(box.clientWidth)
script>
body>
（12）设置元素的尺寸
<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>Documenttitle>
<style>
.box{
width: 200px;
height: 200px;
padding: 50px 30px 20px 10px;
border: 10px solid #ddd;
border-left-width: 20px;
border-right-width: 9px;
border-top-width: 18px;
border-bottom-width: 7px;
background-color: red;
}
style>
head>
<body>
<div class="box">
div>
<script>
// 用js获取box的宽和高
var box = document.querySelector('.box')
// box.clientWidth = 300
box.offsetWidth = 100
script>
body>
（13）获取偏移
<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>Documenttitle>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
/* margin: 20px 80px; */
/* position: absolute; */
/* left: 50px; */
/* top: 90px; */
float: right;
/* transform: translate(50px, 100px); */
}
style>
head>
<body>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et laboriosam quod modi sit error dolor libero fugit dolores doloremque quae enim ad sed eos molestiae incidunt, esse animi placeat quasi.
<div class="box">
div>
<script>
// 获取元素
var box = document.querySelector('.box')
// 获取距离顶部
console.log(box.offsetTop)
// 获取距离左边
console.log(box.offsetLeft)
box.offsetTop = 300
script>
body>
（14）html+js的方式绑定事件
<body>
<button onclick="doClick()">按钮button>
<script>
function doClick(){
console.log('事件处理函数')
}
script>
body>
（15）html+js的方式绑定事件案例
<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>Documenttitle>
<style>
ul>li{
height: 40px;
line-height: 40px;
border-bottom: 1px solid black;
}
style>
head>
<body>
<ul>
<li onclick="getContent(0)">这还是打算考虑到发射基地li>
<li onclick="getContent(1)">2大萨达萨达啥多li>
<li onclick="getContent(2)">3大萨达所该4234234234li>
<li onclick="getContent(3)">3大萨达所该4234234234li>
ul>
<script>
// 获取所有的li
var lis = document.querySelectorAll('ul>li')
function getContent(num){
console.log('获取内容...')
alert(lis[num].innerText)
}
script>
body>
（16）纯js绑定事件
<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>Documenttitle>
<style>
ul>li{
height: 40px;
line-height: 40px;
border-bottom: 1px solid black;
}
style>
head>
<body>
<button id="btn">按钮button>
<ul>
<li>这还是打算考虑到发射基地li>
<li>2大萨达萨达啥多li>
<li>3大萨达所该4234234234li>
<li>3大萨达所该4234234234li>
ul>
<script>
var btn = document.getElementById('btn')
btn.onclick = function(){
console.log('按钮被点击了')
}
// 获取所有的li
var lis = document.querySelectorAll('ul>li')
function doClick(){
console.log('点击了...')
}
// console.log(lis)
// 遍历数组获取里面每一项元素
for(var i=0;i<lis.length;i++){
// console.log(lis[i])
// 事件源.on+事件类型 = 事件处理函数
// 不加小括号相当于把doClick事件赋值给点击事件
// 加小括号相当于把doClick的返回值赋值给点击事件
// lis[i].onclick = undefined
lis[i].onclick = doClick
}
script>
body>
（17）this 关键字
<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>Documenttitle>
<style>
ul>li{
height: 40px;
line-height: 40px;
border-bottom: 1px solid black;
}
style>
head>
<body>
<ul>
<li>这还是打算考虑到发射基地li>
<li>2大萨达萨达啥多li>
<li>3大萨达所该4234234234li>
<li>3大萨达所该4234234234li>
ul>
<script>
var btn = document.getElementById('btn')
function doClick(){
console.log(this) // 代表当前是哪个li触发的点击事件
alert(this.innerHTML)
}
// 获取所有的li
var lis = document.querySelectorAll('ul>li')
for(var i=0;i<lis.length;i++){
lis[i].onclick = doClick
}
script>
body>
（18）思考题01（保留原来的box样式，设置当前的类名）
<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>Documenttitle>
<style>
.box{
width: 300px;
height: 300px;
overflow-y: scroll;
border: 1px solid #000;
}
.blue{
background-color: blue;
color: red;
}
.green{
background-color: green;
color: #fff;
}
style>
head>
<body>
<div id="box" class="box red haha">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas repellat reprehenderit mollitia tenetur in dolores natus alias, amet fuga aliquam dolore iusto aliquid expedita totam necessitatibus suscipit delectus debitis. Reprehenderit!
div>
<script>
var box = document.getElementById('box')
// 保留原来的box样式
// 获取之前的类名
var oldClass = box.className
/// 设置当前的类名
box.className = oldClass + ' green'
script>
body>
（19）思考题02（替换类名）
<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>Documenttitle>
<style>
.box{
width: 300px;
height: 300px;
overflow-y: scroll;
border: 1px solid #000;
}
.blue{
background-color: blue;
color: red;
}
.green{
background-color: green;
color: #fff;
}
style>
head>
<body>
<div id="box" class="box haha red">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas repellat reprehenderit mollitia tenetur in dolores natus alias, amet fuga aliquam dolore iusto aliquid expedita totam necessitatibus suscipit delectus debitis. Reprehenderit!
div>
<script>
var box = document.getElementById('box')
// 只删除haha这个类名
// replace 字符串替换
/*
字符串.replace(要替换的内容, 替换后的内容)
*/
var str = box.className
str = str.replace('haha', '')
console.log(str)
box.className = str
script>
body>