DOM
DOM --> Document Object Model --> 文档对象模型 -->通过js来操作网页里的内容
DOM树–>一个网页文档里面的所有部分(图片 文字 样式)在html底层中,是以树形结构保存 树里面每个分支终点node(节点) 每个节点都属于一个对象(属性/方法)
网页的内容是以树形结构的方式在程序中保存 每个元素都是一个对象 都有自己对应的属性和方法
document对象是DOM树的根茎 是所有节点的根节点,通过document就可以访问html里所有的内容
操作网页元素分为两步:
1.选中 找出元素
2.对元素实施操作
DOM元素选中方法
Element – 元素
注意:语法基本都是小驼峰
1.通过id获取到元素
document.getElementById() //通过id名获取元素
2.通过class获取元素
document.getElementsByClassName() //通过类名获取元素
3.通过标签名获取元素
document.getElementsByTagName() //通过标签名获取元素
获取的元素默认值HTMLCollection.类似于数组 但是不属于数组
同:数据有下标的概念 / 数据可以被遍历
异:他不可以使用数组的方法
基于这个特性,所以如果直接对伪数组进行dom操作是无效的,因为我们要修改的不是这个伪数组 而是这个伪数组里的元素 所以要添加下标 来访问对对应元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选中方式</title>
</head>
<body>
<div id="box1">多喝水</div>
<div class="box">123</div>
<div class="box">456</div>
<div class="bxo">789</div>
<script>
//通过id名获取
let box2=document.getElementById('box1')
//查看元素文本
console.log(box1.innerText)
box1.innerText = '多喝肥宅快乐水'
//通过class名获取
let box = document.getElementsByClassName('box')
console.log(box,typeof box)
box[0].innerText='早安'
box[1].innerText='午安'
for(let i = 0; i<box.length;i++){
box[1].innerText = `多喝热水,这是第${i}杯`
}
//通过标签名获取
let p = document.getElementsByTagName(`p`)
p[0].innerText = '西北锤王'
</script>
</body>
</html>
DOM操作文本内容
innerHTML: 读取/设置元素里的文本内容 (识别标签语法)
innerText: 读取/设置元素里的文本内容 (不识别标签语法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<script>
let box = document.getElementById('box')
box.innerText = '六一快乐'
let box2 = document.getElementsByClassName('box2')
box2[0].innerHTML = '<i>六一儿童节</i>'
box2[1].innerHTML = '<b>七一建军节</b>'
box2[2].innerHTML = '<u>十一国庆节</u>'
box2[3].innerHTML = '五一劳动节'
</script>
</body>
</html>
DOM操作元素属性/样式
操作元素属性 --> 获取到元素后 通过元素名 . 的方式来进行操作
元素名.属性名 // 输出元素属性
元素名.属性名=xxx //修改元素属性
元素名.title //设置/获取到元素的标题
元素名.src //设置/获取元素的资源索引
元素名.className // 设置/获取元素的类名
操作元素样式 -->获取元素后 通过元素名.style.样式名 的方式进行操作
元素名.style.样式名 // 访问该元素的css样式
元素名.style.width // 访问元素的宽度样式
元素名.style.fontSize //访问元素的字体大小样式
如果css样式有(-)减号作为连接符 在用js写的时候 不要写连接符而是用驼峰命名法
font-size --> fontSize
background-color --> backgroundColor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<p id="water">小明闹肚子</p>
<div class="box"></div>
<script>
let water = document.getElementById('water')
water.style.color='pink'
water.style.fontSize='52px'
let box = document.getElementsByClassName('box')[0]
box.style.backgrouColor='#096'
box.style.border='3px solid pink'
</script>
</body>
</html>
交互事件(event)
事件指的是用户跟网页内容产生交互时进行的操作
按下键盘/单击鼠标/双击鼠标/输入文本
事件对象: 代表事件的状态,比如键盘按键的状态 鼠标的位置 鼠标按钮的状态
当这些事件触发时 就可以通过js的监听器来实时获取交互情况 并运行功能
就是说js可以监听到你是按下哪个键或者鼠标碰到了哪个位置然后运行对应的功能
事件流程:
1.获取事件对象 --> 会基于什么发生交互
2.绑定监听事件 -->
事件对象.监听事件 = function(){}
box.onclick = function(){功能代码}
onclick:点击
在获取到元素之后,可以使用this标签当当前的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="./img/0da299e5a52a437fdf1573b3beba451.jpg" alt="" id="pic" width="600" height="600">
<button id="up">↑</button>
<button id="down">↓</button>
<script>
let pic = document.getElementById('pic')
let up = document.getElementById('up')
let down = document.getElementById('down')
//初始为第一张图
let maxpic = 6,minpic = 1
let now_pic = minpic
down.onclick = function(){
if(now_pic == maxpic)
{now_pic == minpic}else{
now_pic++}
pic.scr = `./img/${now_pic}.jpg`
}
down.onclick = function(){
if(now_pic == minpic)
{now_pic == maxpic}else{
now_pic--}
pic.scr = `./img/${now_pic}.jpg`
}
</script>
</body>
</html>