一. DOM
DOM(Document Object Model)
: 文档对象模型- 其实就是操作
html
中的标签的一些能力 - 我们可以操作哪些内容
- 获取一个元素
- 移除一个元素
- 创建一个元素
- 向页面里面添加一个元素
- 给元素绑定一些事件
- 获取元素的属性
- 给元素添加一些
css
样式 - …
DOM
的核心对象就是docuemnt
对象document
对象是浏览器内置的一个对象,里面存储着专门用来操作元素的各种方法DOM
: 页面中的标签,我们通过js
获取到以后,就把这个对象叫做 DOM 对象
获取一个元素
- 通过
js
代码来获取页面中的标签 - 获取到以后我们就可以操作这些标签了
非常规的标签获取
- document.documentElement(获取html)
document.documentElement可以获取整个html
<script>
console.log(document.documentElement)
</script>
- document.head(获取head)
<script>
console.log(document.head)
</script>
- document.body(获取body)
<script>
console.log(document.body)
</script>
getElementById(id获取)
-
getElementById
是通过标签的id
名称来获取标签的 -
因为在一个页面中
id
是唯一的,所以获取到的就是一个元素<body> <div id="box"></div> <script> var box = document.getElementById('box')//字符串 console.log(box) // <div></div> </script> </body>
- 获取到的就是页面中的那个 id 为 box 的 div 标签
getElementsByClassName(class获取)
-
getElementsByClassName
是用过标签的class
名称来获取标签的 -
因为页面中可能有多个元素的
class
名称一样,所以获取到的是一组元素 -
哪怕你获取的
class
只有一个,那也是获取一组元素,只不过这一组中只有一个 DOM 元素而已<body> <div calss="box"></div> <script> var box = document.getElementsByClassName('box') console.log(box) // [<div></div>] console.log(box[0]) // <div></div> </script> </body>
- 获取到的是一组元素,是一个长得和数组一样的数据结构,但是不是数组,是 伪数组,有length的属性
- 这个一组数据也是按照索引排列的,所以我们想要准确的拿到这个
div
,需要用索引来获取 - 即返回值是一个伪数组
可以利用Array的form属性来使伪数组转化为真数组
<script>
var box = document.getElementsByClassName('box')
console.log(box) // [<div></div>]
console.log(box[0]) // <div></div>
var a=Array.from(box)
console.log(a)
</script>
getElementsByTagName(标签名获取)
getElementsByTagName
是用过标签的 标签 名称来获取标签的- 因为页面中可能有多个元素的 标签 名称一样,所以获取到的是一组元素
- 哪怕真的只有一个这个标签名,那么也是获取一组元素,只不过这一组中只有一个 DOM 元素而已
<body> <div></div> <script> var box = document.getElementsByTagName('div') console.log(box) // [<div></div>] console.log(box[0]) // <div></div> </script> </body>
- 和
getElementsByClassName
一样,获取到的是一个长得很像数组的元素 - 必须要用索引才能得到准确的
DOM
元素
- 和
getElementsByName(name属性获取)
- 一般只适用于input标签
querySelector(选择器获取,单个)
有兼容性问题,不过现在基本上没太大问题
querySelector
是按照选择器的方式来获取元素- 也就是说,按照我们写
css
的时候的选择器来获取 - 这个方法只能获取到一个元素,并且是页面中第一个满足条件的元素
console.log(document.querySelector('div')) // 获取页面中的第一个 div 元素 console.log(docuemnt.querySelector('.box')) // 获取页面中第一个有 box 类名的元素 console.log(document.querySelector('#box')) // 获取页面中第一个 id 名为 box 的元素
querySelectorAll(选择器获取,所有满足条件)
有兼容性问题,不过现在基本上没太大问题
querySelectorAll
是按照选择器的方式来获取元素- 这个方法能获取到所有满足条件的元素,以一个伪数组的形式返回
console.log(document.querySelectorAll('div')) // 获取页面中的所有的 div 元素 console.log(docuemnt.querySelectorAll('.box')) // 获取页面中所有有 box 类名的元素
- 获取到的是一组数据,也是需要用索引来获取到准确的每一个
DOM
元素
- 获取到的是一组数据,也是需要用索引来获取到准确的每一个
操作属性
- 通过我们各种获取元素的方式获取到页面中的标签以后
- 我们可以直接操作
DOM
元素的属性,就能直接把效果展示在页面上
操作原生属性
我们可以通过class或id来直接操作原生的属性
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<input type="text" id="one" placeholder="????">
<script>
one.placeholder=1111
</script>
</body>
</html>
placeholder属性的值由????转化为了1111
自定义属性(还有dataset属性)
自定义属性起名规定,以data-开头,例如data-yibai,利用dataset属性可以获取和设置自定义属性
删除自定义属性
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<ul>
<li>12</li>
<li>23</li>
<li>34</li>
</ul>
<script>
var oitem=document.getElementsByTagName("li")
for(var i=0;i<oitem.length;i++){
oitem[i].dataset.yibai=i
}
</script>
</body>
</html>
显示为:
setAttribute添加自定义属性
第一个参数是属性名,第二个参数是属性值
getAttribute获取自定义属性
参数即为自定义属性名
removeAttribute删除自定义属性
参数即为自定义属性名
- 应用场景
可以给列表等进行排序
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<ul>
<li>12</li>
<li>23</li>
<li>34</li>
</ul>
<script>
var oitem=document.getElementsByTagName("li")
for(var i=0;i<oitem.length;i++){
oitem[i].setAttribute("yibai",i)
}
</script>
</body>
</html>
案例-密码可视
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<input type="password" id="password">
<button id="eyebtn">eye</button>
<script>
var passinput=document.getElementById("password")
var eyebtn=document.querySelector("#eyebtn")
eyebtn.onclick=function(){
console.log(passinput.type)
if(passinput.type=="password"){
passinput.type="text"
}else{
passinput.type="password"
}
}
</script>
</body>
</html>
点击按钮前
点击按钮后
案例-购物车全选
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<input type="checkbox" id="all">全选/全不选
<hr>
<ul class="xuan">
<li>
<input type="checkbox">商品1
</li>
<li>
<input type="checkbox">商品2
</li>
<li>
<input type="checkbox">商品3
</li>
<li>
<input type="checkbox">商品4
</li>
</ul>
<script>
var all=document.querySelector("#all")
var alll=document.querySelectorAll(".xuan input")
all.onclick=function(){
console.log(all.checked)
for(var i=0;i<alll.length;i++){
alll[i].checked=all.checked
}
}
for(var i=0;i<alll.length;i++){
alll[i].onclick=handlr
}
function handlr (){
var count=0
for(var i=0;alll.length;i++){
if(alll[i].checked)count++
// console.log(alll[i].checked)
}
if(count===alll.length){
all.checked=true
}else{
all.checked=false
}
}
</script>
</body>
</html>
操作元素文本内容
innerHTML
-
获取元素内部的
HTML
结构(所有内容)<body> <div> <p> <span>hello</span> </p> </div> <script> var div = document.querySelector('div') console.log(div.innerHTML) /*获取的内容 <p> <span>hello</span> </p> */ </script> </body>
-
设置元素的内容
<body> <div></div> <script> var div = document.querySelector('div') div.innerHTML = '<p>hello</p>' </script> </body>
- 设置完以后,页面中的
div
元素里面就会嵌套一个p
元素
- 设置完以后,页面中的
innerText
-
获取元素内部的文本(只能获取到文本内容,获取不到
html
标签)<body> <div> <p> <span>hello</span> </p> </div> <script> var div = document.querySelector('div') console.log(div.innerText) // 获得hello </script> </body>
-
可以设置元素内部的文本
<body> <div></div> <script> var div = document.querySelector('div') div.innerText = '<p>hello</p>' </script> </body>
- 设置完毕以后,会把
<p>hello</p>
当作一个文本出现在div
元素里面,而不会把p
解析成标签
- 设置完毕以后,会把
value
可以赋值
也可以读取
大多时候用于表单元素
案例-渲染页面
<!DOCTYPE html>
<html lang="en">
<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{
list-style: none;
}
li{
overflow: hidden;
}
li img{
float: left;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<ul>
<!-- <li>
<img src="" alt="">
<h3></h3>
<p></p>
</li> -->
</ul>
<script>
var shuzu=[
{
url:"https://static.maizuo.com/pc/v5/usr/movie/fceeb41a1660d097d02fbcbda3191d8f.jpg?x-oss-process=image/quality,Q_70",
title:"阿凡达:水之道",
grade:"7.4",
},
{
url:"https://static.maizuo.com/pc/v5/usr/movie/fceeb41a1660d097d02fbcbda3191d8f.jpg?x-oss-process=image/quality,Q_70",
title:"1111,2222",
grade:"7.4",
},
{
url:"https://static.maizuo.com/pc/v5/usr/movie/fceeb41a1660d097d02fbcbda3191d8f.jpg?x-oss-process=image/quality,Q_70",
title:"2222,3333",
grade:"7.4",
},
]
var newzhuzu=shuzu.map(function(item){
return `<li>
<img src="${item.url}" alt="">
<h3>${item.title}</h3>
<p>${item.grade}</p>
</li>`
})
console.log(newzhuzu.join(""))
var acc=document.querySelector("ul")
acc.innerHTML=newzhuzu.join("")
</script>
</body>
</html>
操作元素样式
获取行间样式
可以进行读写,更改样式数值
- 专门用来给元素添加
css
样式的 - 添加的都是行内样式
<body> <div></div> <script> var div = document.querySelector('div') div.style.width = "100px" div.style.height = "100px" div.style.backgroundColor = "pink" console.log(div) // <div style="width: 100px; height: 100px; background-color: pink;"></div> </script> </body>
- 页面中的
div
就会变成一个宽高都是100
,背景颜色是粉色
- 页面中的
访问复合样式时,不能使用常规的方法来获取
有以下两种方法
- 使用[] (中括号)
- 使用驼峰式命名法
<!DOCTYPE html>
<html lang="en">
<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>
div{
width: 100px;
color: black;
}
</style>
</head>
<body>
<div style="background-color: yellow;" id="box">
111111111
</div>
<script>
console.log(box.style["background-color"])
console.log(box.style.backgroundColor)
</script>
</body>
</html>
获取的非行间样式
可以获取,但是不能更改样式,可以读取
- 我们在操作
DOM
的时候,很重要的一点就是要操作元素的css
样式 - 那么在操作
css
样式的时候,我们避免不了就要获取元素的样式 - 之前我们说过可以用
元素.style.xxx
来获取 - 但是这个方法只能获取到元素 行间样式,也就是写在行内的样式
<style> div { width: 100px; } </style> <body> <div style="height: 100px;"> <p>我是一个 p 标签</p> </div> <script> var oDiv = document.querySelector('div') console.log(oDiv.style.height) // 100px console.log(oDIv.style.width) // '' </script> </body>
- 不管是外链式还是内嵌式,我们都获取不到该元素的样式
- 这里我们就要使用方法来获取了
getComputedStyle
和currentStyle
- 这两个方法的作用是一样的,只不过一个在 非 IE 浏览器,一个在 IE 浏览器
<!DOCTYPE html>
<html lang="en">
<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>
#box{
width: 100px;
color: black;
}
</style>
</head>
<body>
<div style="background-color: yellow;" id="box">
111111111
</div>
<script>
console.log(box.style["background-color"])
console.log(box.style.backgroundColor)
console.log(getComputedStyle(document.getElementById("box")).width)//这条代码时行外样式
</script>
</body>
</html>
同理,使用这种方法获取复合样式时也是与上面的style一样的
操作元素类名(class)
.className
className属性,可以用来读取和赋值html里的class值
-
专门用来操作元素的 类名的(class)
<body> <div class="box"></div> <script> var div = document.querySelector('div') console.log(div.className) // box </script> </body>
-
也可以设置元素的类名,不过是全覆盖式的操作
<body> <div class="box"></div> <script> var div = document.querySelector('div') div.className = 'test' console.log(div) // <div class="test"></div> </script> </body>
- 在设置的时候,不管之前有没有类名,都会全部被设置的值覆盖
.classList
可以用来读取和赋值html里的class值,但是是以伪数组的形式来读取或修改
<!DOCTYPE html>
<html lang="en">
<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>
#box{
width: 100px;
color: black;
}
</style>
</head>
<body>
<div style="background-color: yellow;" id="box" class="box1 box2 box3 box4">
111111111
</div>
<script>
console.log(box.classList)
</script>
</body>
</html>
-
.add()增加class值,不会添加相同的class值,一次只能添加一个值
<!DOCTYPE html>
<html lang="en">
<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>
#box{
width: 100px;
color: black;
}
</style>
</head>
<body>
<div style="background-color: yellow;" id="box" class="box1 box2 box3 box4">
111111111
</div>
<script>
console.log(box.classList)
box.classList.add("box5")
</script>
</body>
</html>
-
.remove()删除class值
<!DOCTYPE html>
<html lang="en">
<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>
#box{
width: 100px;
color: black;
}
</style>
</head>
<body>
<div style="background-color: yellow;" id="box" class="box1 box2 box3 box4">
111111111
</div>
<script>
console.log(box.classList)
box.classList.remove("box1")
</script>
</body>
</html>
-
如果原本有这个class值,就会删除这个class值,如果没有,就会添加上这个class值
<!DOCTYPE html>
<html lang="en">
<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>
.box1{
color: black;
height: 100px;
width: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="box1" id="box">
111111111
</div>
<button id="btn">
222
</button>
<script>
btn.onclick=function(){
box.classList.toggle("box1")
}
</script>
</body>
</html>
未点击按钮时
点击按钮后
案例-选项卡
头部
<!DOCTYPE html>
<html lang="en">
<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{
display: flex;
list-style: none;
}
li{
height: 50px;
line-height: 50px;
text-align: center;
flex: 1;
}
.active{
color: red;
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li class="active" id="item1">正在上映</li>
<li id="item2">即将上映</li>
</ul>
<script>
item1.onclick=function(){
item1.classList.add("active")
item2.classList.remove("active")
}
item2.onclick=function(){
item1.classList.remove("active")
item2.classList.add("active")
}
</script>
</body>
</html>
这里由于单线程和人的手速没有这么快,导致for循环执行的比onclick这个事件快,进而i就会变成4,就有点像异步执行
<!DOCTYPE html>
<html lang="en">
<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{
list-style: none;
}
.header{
display: flex;
width: 500px;
}
.header li{
flex: 1;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid black;
}
.box{
position: relative;
}
.box li{
position: absolute;
left: 0;
top: 0;
width: 500px;
height: 200px;
background-color: yellow;
display: none;
}
.header .active{
background-color: red;
}
.box .active{
display: block;
}
</style>
</head>
<body>
<ul class="header">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul class="box">
<li class="active">1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
<script>
var oheaderitem=document.querySelectorAll(".header li")
var oboxitem=document.querySelectorAll(".box li")
for(var i=0;i<oheaderitem.length;i++){
oheaderitem[i].dataset.index=i
oheaderitem[i].onclick=handlr
}
function handlr(){
// console.log(11)
// console.log(this.dataset.index)
var index=this.dataset.index
for(var n=0;n<oheaderitem.length;n++){
oheaderitem[n].classList.remove("active")
oboxitem[n].classList.remove("active")
}
oheaderitem[index].classList.add("active")
oboxitem[index].classList.add("active")
}
</script>
</body>
</html>
DOM节点
DOM
的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点- 什么是分类,比如我们在获取元素的时候,通过各种方法获取到的我们叫做元素节点(标签节点)
- 比如我们标签里面写的文字,那么就是文本节点
- 写在每一个标签上的属性,就是属性节点
元素节点
- 我们通过
getElementBy...
获取到的都是元素节点,
属性节点
- 我们通过
getAttribute
获取的就是元素的属性节点
没有父子关系
文本节点
- 我们通过
innerText
获取到的就是元素的文本节点
注释节点
节点案例
短短三行代码居然有5个节点,666
获取节点
childNodes
childNodes
:获取某一个节点下 所有的子一级节点
<body>
<div>
<p>hello</p>
</div>
<script>
// 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点
var oDiv = document.querySelector('div')
console.log(oDiv.childNodes)
/*
NodeList(3) [text, p, text]
0: text
1: p
2: text
length: 3
__proto__: NodeList
*/
</script>
</body>
- 我们会发现,拿到以后是一个伪数组,里面有三个节点
- 一个
text
:从<div> 一直到 <p>
中间有一个换行和一堆空格,这个是第一个节点,是一个文本节点 - 一个
p
:这个p
标签就是第二个节点,这个是一个元素节点 - 一个
text
:从</p> 一直到 </div>
中间有一个换行和一堆空格,这个是第三个节点,是一个文本节点 - 这个时候就能看到我们有不同的节点类型了
children
children
:获取某一节点下所有的子一级 元素节点
<body>
<div>
<p>hello</p>
</div>
<script>
// 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点
var oDiv = document.querySelector('div')
console.log(oDiv.children)
/*
HTMLCollection [p]
0: p
length: 1
__proto__: HTMLCollection
*/
</script>
</body>
- 我们发现只有一个节点了,因为
children
只要元素节点 - div 下面又只有一个元素节点,就是
p
- 所以就只有一个,虽然只有一个,但是也是一个 伪数组
firstChild
firstChild
:获取某一节点下子一级的 第一个节点
<body>
<div>
<p>hello</p>
</div>
<script>
// 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点
var oDiv = document.querySelector('div')
console.log(oDiv.firstChild) // #text
</script>
</body>
- 这个是只获取一个节点,不再是伪数组了
- 获取的是第一个
- 第一个就是
<div> 一直到 <p>
的那个换行和空格,是个文本节点
lastChild
lastChild
:获取某一节点下子一级的 最后一个节点
<body>
<div>
<p>hello</p>
</div>
<script>
// 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点
var oDiv = document.querySelector('div')
console.log(oDiv.lastChild) // #text
</script>
</body>
- 只获取一个节点,不再是伪数组
- 获取的是最后一个
- 最后一个就是
</p> 一直到 </div>
之间的换行和空格,是个文本节点
firstElementChild
firstElementChild
:获取某一节点下子一级 第一个元素节点
<body>
<div>
<p>hello</p>
</div>
<script>
// 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点
var oDiv = document.querySelector('div')
console.log(oDiv.firstElementChild) // <p>hello</p>
</script>
</body>
- 只获取一个节点,不在是伪数组
- 获取的是第一个 元素节点
- 第一个元素节点就是
p
标签,是一个元素节点
lastElementChild
lastElementChild
:获取某一节点下子一级 最后一个元素节点
<body>
<div>
<p>hello</p>
<p>world</p>
</div>
<script>
// 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点
var oDiv = document.querySelector('div')
console.log(oDiv.lastElementChild) // <p>world</p>
</script>
</body>
- 只获取一个节点,不在是伪数组
- 获取的是最后一个 元素节点
- 最后一个元素节点是
<p>world</p>
,是一个元素节点
nextSibling
nextSibling
:获取某一个节点的 下一个兄弟节点
<body>
<ul>
<li id="a">hello</li>
<li id="b">world</li>
<li id="c">!!!</li>
</ul>
<script>
// 这个 oLi 获取的是页面中的 li 元素,就是一个元素节点
var oLi = document.querySelector('#b')
console.log(oLi.nextSibling) // #text
</script>
</body>
- 只获取一个节点,不在是伪数组
- 获取的是
id="b"
这个li
的下一个兄弟节点 - 因为
id="b"
的下一个节点,是两个li
标签之间的换行和空格,所以是一个文本节点
previousSibling
previousSibling
:获取某一个节点的 上一个兄弟节点
<body>
<ul>
<li id="a">hello</li>
<li id="b">world</li>
<li id="c">!!!</li>
</ul>
<script>
// 这个 oLi 获取的是页面中的 li 元素,就是一个元素节点
var oLi = document.querySelector('#b')
console.log(oLi.previousSibling) // #text
</script>
</body>
- 只获取一个节点,不在是伪数组
- 获取的是
id="b"
这个li
的上一个兄弟节点 - 因为
id="b"
的上一个节点,是两个li
标签之间的换行和空格,所以是一个文本节点
nextElementSibling
nextElementSibling
:获取某一个节点的 下一个元素节点
<body>
<ul>
<li id="a">hello</li>
<li id="b">world</li>
<li id="c">!!!</li>
</ul>
<script>
// 这个 oLi 获取的是页面中的 li 元素,就是一个元素节点
var oLi = document.querySelector('#b')
console.log(oLi.nextElementSibling) // <li id="c">!!!</li>
</script>
</body>
- 只获取一个节点,不在是伪数组
- 获取的是
id="b"
这个li
的下一个兄弟元素节点 - 因为
id="b"
的下一个兄弟元素节点就是id="c"
的li
,是一个元素节点
previousElementSibling
previousElementSibling
:获取某一个节点的 上一个元素节点
<body>
<ul>
<li id="a">hello</li>
<li id="b">world</li>
<li id="c">!!!</li>
</ul>
<script>
// 这个 oLi 获取的是页面中的 li 元素,就是一个元素节点
var oLi = document.querySelector('#b')
console.log(oLi.previousElementSibling) // <li id="a">hello</li>
</script>
</body>
- 只获取一个节点,不在是伪数组
- 获取的是
id="b"
这个li
的上一个兄弟元素节点 - 因为
id="b"
的上一个兄弟元素节点就是id="a"
的li
,是一个元素节点
parentNode
parentNode
:获取某一个节点的 父节点
<body>
<ul>
<li id="a">hello</li>
<li id="b">world</li>
<li id="c">!!!</li>
</ul>
<script>
// 这个 oLi 获取的是页面中的 li 元素,就是一个元素节点
var oLi = document.querySelector('#b')
console.log(oLi.parentNode) // <ul>...</ul>
</script>
</body>
- 只获取一个节点,不在是伪数组
- 获取的是当前这个
li
的父元素节点 - 因为这个
li
的父亲就是ul
,所以获取到的就是ul
,是一个元素节点
attributes
attributes
:获取某一个 元素节点 的所有 属性节点
<body>
<ul>
<li id="a" a="100" test="test">hello</li>
</ul>
<script>
// 这个 oLi 获取的是页面中的 li 元素,就是一个元素节点
var oLi = document.querySelector('#a')
console.log(oLi.attributes)
/*
NamedNodeMap {0: id, 1: a, 2: test, id: id, a: a, test: test, length: 3}
0: id
1: a
2: test
length: 3
a: a
id: id
test: test
__proto__: NamedNodeMap
*/
</script>
</body>
- 获取的是一组数据,是该元素的所有属性,也是一个伪数组
- 这个
li
有三个属性,id
/a
/test
三个,所以就获取到了这三个
操作节点
- 我们所说的操作无非就是 增删改查
- 创建一个节点(因为向页面中增加之前,我们需要先创建一个节点出来)
- 向页面中增加一个节点
- 删除页面中的某一个节点
- 修改页面中的某一个节点
- 获取页面中的某一个节点
创建一个节点
-
createElement
:用于创建一个元素节点// 创建一个 div 元素节点 var oDiv = document.createElement('div') console.log(oDiv) // <div></div>
- 创建出来的就是一个可以使用的 div 元素
-
createTextNode
:用于创建一个文本节点// 创建一个文本节点 var oText = document.createTextNode('我是一个文本') console.log(oText) // "我是一个文本"
向页面中加入一个节点
-
appendChild
:是向一个元素节点的末尾追加一个节点 -
语法:
父节点.appendChild(要插入的子节点)
// 创建一个 div 元素节点 var oDiv = document.createElement('div') var oText = document.createTextNode('我是一个文本') // 向 div 中追加一个文本节点 oDiv.appendChild(oText) console.log(oDiv) // <div>我是一个文本</div>
-
insertBefore
:向某一个节点前插入一个节点 -
语法:
父节点.insertBefore(要插入的节点,插入在哪一个节点的前面)
<body> <div> <p>我是一个 p 标签</p> </div> <script> var oDiv = document.querySelector('div') var oP = oDiv.querySelector('p') // 创建一个元素节点 var oSpan = document.createElement('span') // 将这个元素节点添加到 div 下的 p 的前面 oDiv.insertBefore(oSpan, oP) console.log(oDiv) /* <div> <span></span> <p>我是一个 p 标签</p> </div> */ </script> </body>
删除页面中的某一个节点
-
removeChild
:移除某一节点下的某一个节点 -
语法:
父节点.removeChild(要移除的字节点)
<body> <div> <p>我是一个 p 标签</p> </div> <script> var oDiv = document.querySelector('div') var oP = oDiv.querySelector('p') // 移除 div 下面的 p 标签 oDiv.removeChild(oP) console.log(oDiv) // <div></div> </script> </body>
修改页面中的某一个节点
-
replaceChild
:将页面中的某一个节点替换掉 -
语法:
父节点.replaceChild(新节点,旧节点)
<body> <div> <p>我是一个 p 标签</p> </div> <script> var oDiv = document.querySelector('div') var oP = oDiv.querySelector('p') // 创建一个 span 节点 var oSpan = document.createElement('span') // 向 span 元素中加点文字 oSpan.innerHTML = '我是新创建的 span 标签' // 用创建的 span 标签替换原先 div 下的 p 标签 oDiv.replaceChild(oSpan, oP) console.log(oDiv) /* <div> <span>我是新创建的 span 标签</span> </div> */ </script> </body>
案例-动态删除
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<ul id="list">
</ul>
<script>
var arr=["111","2222","333"]
for(var i=0;i<arr.length;i++){
var oli=document.createElement("li")
oli.innerHTML=arr[i]
var obutton=document.createElement("button")
obutton.innerHTML="delate"
obutton.onclick=handlr
oli.appendChild(obutton)
list.appendChild(oli)
}
function handlr(){
this.parentNode.remove()
}
</script>
</body>
</html>
节点属性
-
节点会分成很多种,而且我们也能获取到各种不同的节点
-
下面就是各种节点之间属性的区别
-
根据这段代码
<body> <ul test="我是 ul 的一个属性"> <li>hello</li> </ul> <script> // 先获取 ul var oUl = document.querySelector('ul') // 获取到 ul 下的第一个子元素节点,是一个元素节点 var eleNode = oUl.firstElementChild // 获取到 ul 的属性节点组合,因为是个组合,我们要拿到节点的话要用索引 var attrNode = oUl.attributes[0] // 获取到 ul 下的第一个子节点,是一个文本节点 var textNode = oUl.firstChild </script> </body>
nodeType
-
nodeType
:获取节点的节点类型,用数字表示console.log(eleNode.nodeType) // 1 console.log(attrNode.nodeType) // 2 console.log(textNode.nodeType) // 3
nodeType === 1
就表示该节点是一个 元素节点nodeType === 2
就表示该节点是一个 属性节点nodeType === 3
就表示该节点是一个 注释节点
nodeName
-
nodeName
:获取节点的节点名称console.log(eleNode.nodeName) // LI console.log(attrNode.nodeName) // test console.log(textNode.nodeName) // #text
- 元素节点的
nodeName
就是 大写标签名 - 属性节点的
nodeName
就是 属性名 - 文本节点的
nodeName
都是 #text
- 元素节点的
nodeValue
-
nodeValue
: 获取节点的值console.log(eleNode.nodeValue) // null console.log(attrNode.nodeValue) // 我是 ul 的一个属性 console.log(textNode.nodeValue) // 换行 + 空格
- 元素节点没有
nodeValue
- 属性节点的
nodeValue
就是 属性值 - 文本节点的
nodeValue
就是 文本内容
- 元素节点没有
总结
- | nodeType | nodeName | nodeValue |
---|---|---|---|
元素节点 | 1 | 大写标签名 | null |
属性节点 | 2 | 属性名 | 属性值 |
文本节点 | 3 | #text | 文本内容 |
获取元素尺寸
- 就是获取元素的 “占地面积”,而不是元素的大小
- 可以实现懒加载的效果(像京东的商品栏)
offsetWith 和 offsetHeight
offsetWidth
: 获取的是元素 内容 + padding + border 的宽度offsetHeight
: 获取的是元素 内容 + padding + border 的高度
clientWidth 和 clientHeight
clientWidth
: 获取的是元素 内容 + padding 的宽度clientHeight
: 获取的是元素 内容 + padding 的高度
注意:
- 获取到的尺寸是没有单位的数字
- 不会对box-sizing有影响
- 当元素在页面中不占位置的时候, 获取到的是 0
display: none;
元素在页面不占位visibility: hidden;
元素在页面占位
获取元素的偏移量
- 就是元素在页面上相对于参考父级的左边和上边的距离
offsetParent
- 获取元素的偏移量参考父级
- 其实就是假设你要给一个元素 绝对定位 的时候
- 它是根据谁来进行定位的
- 那么这个元素的偏移量参考父级就是谁
offsetLeft 和 offsetTop
- 获取的是元素左边的偏移量和上边的偏移量
offsetLeft
: 该元素相对于参考父级的左侧偏移量offsetTop
: 该元素相对于参考父级的上侧偏移量
获取浏览器窗口尺寸
- 前面学过一个
innerWidth
和innerHeight
- 他们获取到的是窗口包含滚动条的尺寸
- 下面学习两个不包含滚动条的尺寸获取方式
document.documentElement.clientWidth
: 可视窗口的宽度document.documentElement.clientHeight
: 可视窗口的高度
<!DOCTYPE html>
<html lang="en">
<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>
div{
width: 3000px;
height: 100px;
padding: 10px;
border: 5px solid red;
background-color: yellow;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
console.log(document.documentElement.clientWidth)
console.log(document.documentElement.clientHeight)
</script>
</body>
</html>
案例-懒加载
不懂时就看96集
<!DOCTYPE html>
<html lang="en">
<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;
}
html,body{
height: 100%;
}
ul li{
overflow: hidden;
height: 150px;
}
ul li img{
float: left;
width: 80px;
}
</style>
</head>
<body>
<h1>标题</h1>
<ul id="list">
<!-- <li>
<img src="https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70" alt="">
<h3>绝望主夫</h3>
</li> -->
</ul>
<script>
var arr1=[
{
name:"绝望主夫",
url:"https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70"
},
{
name:"绝望主夫",
url:"https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70"
},
{
name:"绝望主夫",
url:"https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70"
},
{
name:"绝望主夫",
url:"https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70"
},
{
name:"绝望主夫",
url:"https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70"
},
]
var arr2=[
{
name:"绝望主夫",
url:"https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70"
},
{
name:"绝望主夫",
url:"https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70"
},
{
name:"绝望主夫",
url:"https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70"
},
{
name:"绝望主夫",
url:"https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70"
},
{
name:"绝望主夫",
url:"https://static.maizuo.com/pc/v5/usr/movie/495ff91096e9de224acc3746ec42d002.jpg?x-oss-process=image/quality,Q_70"
},
]
renderHTML(arr1)
function renderHTML(arr){
// list.innerHTML+=arr.map(function(item){
// return `<li></li>`
// }).join("")
for(var i=0;i<arr.length;i++){
var oli =document.createElement("li")
oli.innerHTML=`<img src="${arr[i].url}" alt="">
<h3>${arr[i].name}</h3>`
list.appendChild(oli)
}
}
var a=false
window.onscroll=function(){
var listheight=list.offsetHeight
var listTop=list.offsetTop
// console.log(listTop+listheight)
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
var windowHright=document.documentElement.clientHeight
if(a)return
if((listheight+listTop)-Math.round(windowHright+scrollTop+1)<100){
console.log("1`111")
a=true
//渲染下一页数据
setTimeout(function(){
renderHTML(arr2)
a=false//下一次到底事件再次触发
},1000)
}
}
</script>
</body>
</html>
二.事件
- 一个事件由什么东西组成
- 触发谁的事件:事件源
- 触发什么事件:事件类型
- 触发以后做什么:事件处理函数
var oDiv = document.querySelector('div') oDiv.onclick = function () {} // 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv // 触发什么事件 => onclick => 这个事件类型就是 click // 触发之后做什么 => function () {} => 这个事件的处理函数
- 我们想要在点击 div 以后做什么事情,就把我们要做的事情写在事件处理函数里面
var oDiv = document.querySelector('div') oDiv.onclick = function () { console.log('你点击了 div') }
- 当我们点击
div
的时候,就会执行事件处理函数内部的代码 - 每点击一次,就会执行一次事件处理函数
事件的绑定方式
-
我们现在给一个注册事件都是使用
onxxx
的方式 -
但是这个方式不是很好,只能给一个元素注册一个事件
-
一旦写了第二个事件,那么第一个就被覆盖了
oDiv.onclick = function () { console.log('我是第一个事件') } oDiv.onclick = function () { console.log('我是第二个事件') }
- 当你点击的时候,只会执行第二个,第一个就没有了
-
我们还有一种事件监听的方式去给元素绑定事件
-
使用
addEventListener
的方式添加- 这个方法不兼容,在 IE 里面要使用
attachEvent
- 这个方法不兼容,在 IE 里面要使用
-
addEventListener
: 非 IE 7 8 下使用 -
语法:
元素.addEventListener('事件类型', 事件处理函数, 冒泡还是捕获)
oDiv.addEventListener('click', function () { console.log('我是第一个事件') }, false) oDiv.addEventListener('click', function () { console.log('我是第二个事件') }, false)
- 当你点击 div 的时候,两个函数都会执行,并且会按照你注册的顺序执行
- 先打印
我是第一个事件
再打印我是第二个事件
- 注意: 事件类型的时候不要写 on,点击事件就是 click,不是 onclick
-
attachEvent
:IE 7 8 下使用(不推荐) -
语法:
元素.attachEvent('事件类型', 事件处理函数)
oDiv.attachEvent('onclick', function () { console.log('我是第一个事件') }) oDiv.attachEvent('onclick', function () { console.log('我是第二个事件') })
- 当你点击 div 的时候,两个函数都会执行,并且会按照你注册的顺序倒叙执行
- 先打印
我是第二个事件
再打印我是第一个事件
- 注意: 事件类型的时候要写 on,点击事件就写 onclick
两个方式的区别
- 注册事件的时候事件类型参数的书写
addEventListener
: 不用写 onattachEvent
: 要写 on
- 参数个数
addEventListener
: 一般是三个常用参数attachEvent
: 两个参数
- 执行顺序
addEventListener
: 顺序注册,顺序执行attachEvent
: 顺序注册,倒叙执行
- 适用浏览器
addEventListener
: 非 IE 7 8 的浏览器attachEvent
: IE 7 8 浏览器
事件的解绑
事件禁用的源码
- 解绑方法1,赋值为空
<button id="btn">11111</button>
<script>
btn.onclick=function(){
console.log("11111122222")
this.onclick=null
}
</script>
显示为:
- 解绑方法2,removeEventListener
对同一对象使用removeEventListener值,需要用到addEventListener
的方式添加事件
<!DOCTYPE html>
<html lang="en">
<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>
</style>
</head>
<body>
<button id="btn">11111</button>
<script>
function handlr(){
console.log("111111222222")
this.removeEventListener("click",handlr)
}
btn.addEventListener("click",handlr)
</script>
</body>
</html>
常见的事件
- 我们在写页面的时候经常用到的一些事件
- 大致分为几类,浏览器事件 / 鼠标事件 / 键盘事件 / 表单事件 / 触摸事件
- 不需要都记住,但是大概要知道
浏览器事件
load
: 页面全部资源加载完毕scroll
: 浏览器滚动的时候触发- …
鼠标事件
click
:点击事件dblclick
:双击事件contextmenu
: 右键单击事件
mousedown
:鼠标左键按下事件mouseup
:鼠标左键抬起事件mousemove
:鼠标移动mouseover
:鼠标移入事件mouseout
:鼠标移出事件mouseenter
:鼠标移入事件mouseleave
:鼠标移出事件
键盘事件
keyup
: 键盘抬起事件keydown
: 键盘按下事件keypress
: 键盘按下再抬起事件
表单事件
change
: 表单内容改变事件input
: 表单内容输入事件submit
: 表单提交事件
触摸事件(移动端)
touchstart
: 触摸开始事件touchend
: 触摸结束事件touchmove
: 触摸移动事件
事件对象
-
什么是事件对象?
-
就是当你触发了一个事件以后,对该事件的一些描述信息
-
例如:
- 你触发一个点击事件的时候,你点在哪个位置了,坐标是多少
- 你触发一个键盘事件的时候,你按的是哪个按钮
-
每一个事件都会有一个对应的对象来描述这些信息,我们就把这个对象叫做 事件对象
-
浏览器给了我们一个 黑盒子,叫做
window.event
,就是对事件信息的所有描述- 比如点击事件
- 你点在了
0,0
位置,那么你得到的这个事件对象里面对应的就会有这个点位的属性 - 你点在了
10, 10
位置,那么你得到的这个事件对象里面对应的就会有这个点位的属性
oDiv.onclick = function () { console.log(window.event.X轴坐标点信息) console.log(window.event.Y轴坐标点信息) }
-
这个玩意很好用,但是一般来说,好用的东西就会有 兼容性问题
-
在
IE低版本
里面这个东西好用,但是在高版本IE
和Chrome
里面不好使了 -
我们就得用另一种方式来获取 事件对象
-
在每一个事件处理函数的行参位置,默认第一个就是 事件对象
oDiv.onclick = function (e) { // e 就是和 IE 的 window.event 一样的东西 console.log(e.X轴坐标点信息) console.log(e.Y轴坐标点信息) }
-
综上所述,我们以后在每一个事件里面,想获取事件对象的时候,都用兼容写法
oDiv.onclick = function (e) { e = e || window.event console.log(e.X轴坐标点信息) console.log(e.Y轴坐标点信息) }
鼠标事件
- clientX和clientY
相对于可视窗口
这里的可视窗口就是窗口的大小
<!DOCTYPE html>
<html lang="en">
<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;
}
div{
width: 100px;
height: 100px;
background-color: skyblue;
margin: 100px;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
box.onclick=function(evt){
console.log(evt.clientX,evt.clientY)
}
</script>
</body>
</html>
显示为:
- pageX和pageY
相对于整个文档的x和y
<!DOCTYPE html>
<html lang="en">
<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;
}
div{
width: 100px;
height: 100px;
background-color: skyblue;
margin: 100px;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
box.onclick=function(evt){
console.log(evt.clientX,evt.clientY)
console.log(evt.pageX,evt.pageY)
}
</script>
</body>
</html>
点击一次
- offsetX和offsetY
即相对点击盒子左上角的位置
若大盒子包裹小盒子,点击小盒子,就会显示距离小盒子左上角的距离
<!DOCTYPE html>
<html lang="en">
<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;
}
div{
width: 100px;
height: 100px;
background-color: skyblue;
margin: 100px;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
box.onclick=function(evt){
console.log(evt.clientX,evt.clientY)
console.log(evt.pageX,evt.pageY)
console.log(evt.offsetX,evt.offsetY)
}
</script>
</body>
</html>
点击一次
案例-鼠标跟随
<!DOCTYPE html>
<html lang="en">
<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;
}
div{
width: 200px;
height: 50px;
background-color: yellow;
position: relative;
margin: 100px;
}
div p{
width: 300px;
height: 200px;
background-color: red;
position: absolute;
left: 100px;
top: 100px;
display: none;
pointer-events: none;
z-index: 100;
}
</style>
</head>
<body>
<div id="box">
头像
<p>
介绍
</p>
</div>
<div>11111</div>
<script>
box.onmouseover=function(){
this.firstElementChild.style.display="block"
}
box.onmouseout=function(){
this.firstElementChild.style.display="none"
}
box.onmousemove=function(evt){
this.firstElementChild.style.left=evt.offsetX+"px"
this.firstElementChild.style.top=evt.offsetY+"px"
}
</script>
</body>
</html>