dom工作原理
代码从硬盘读取到内存会生成dom树然后我们通过修改dom树,最终渲染引擎的页面也会改变
获取页面元素
括号中的选择器都是字符串
可以定义一个变量接收获取的元素
1.获取单个元素 ： document.querySelector('选择器')
如果选择器存在则返回dom对象,不存在则返回 null
2.获取多个元素 : document.querySelectorAll('选择器')
一定会返回一个伪数组(有三要素没有方法)
若选择器不存在则返回空数组
获取的数组，一定要取下标先取出dom对象。 才可以使用dom语法
let box = document.querySelector('.box')
console.log(box)
操作元素内容
元素内容操作
元素.innerText :
返回文本 不能编译标签
元素.innerHTML :
返回文本+标签 可以编译标签
// 必须先获取元素
let box = document.querySelector('.box')
// 元素.innerText 获取元素文本 无法解析标签
console.log(box.innerText)
box.innerText = '小吴你好'
// 元素.innerHTML 获取元素 文本+标签 可以解析标签
console.log(box.innerHTML)
box.innerHTML = '<h1>小吴你好呀</h1>'
通过标签属性操作
元素属性操作(a,img等)
必须获取元素
元素.属性
a.href
img.src
//注意：要想修改元素属性，一定要先获取元素
let a = document.querySelector('a')
let img = document.querySelector('img')
//1.获取属性 元素.属性名
a.href = 'http://www.baidu.com'
//2.设置属性 元素.属性名 = 值
img.src = './images/02.jpg'
通过元素style属性操作
元素的style操作样式
获取元素
元素.style.属性
若属性中含有-则去掉-,-后面的单词首字母大写
元素.style.backgroundColor='red'
//先获取元素
let box = document.querySelector('.box')
//元素css样式：
box.style.width = '300px'
box.style.height = '300px'
box.style.backgroundColor = 'red'
通过元素类名操作
元素类名修改样式
(1)修改单个样式(行内权重)： 元素.style.样式=样式值
(2)修改多个样式： 元素.className='类名'
* 会覆盖原有的类名
(3)修改多个样式(类名权重)： 不会覆盖原有的类名
新增类名： 元素.classList.add('类名')
移除类名： 元素.classList.remove('类名')
切换类名： 元素.classList.toggle('类名') 有则移出,无则新增
查询类名： 元素.classList.contains('类名')
<!DOCTYPE html>
<html lang="en">
<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>
.one {
margin: 20px auto;
opacity: 0.5;
}
.two {
width: 200px;
height: 200px;
background-color: blue;
border: 10px solid yellow;
}
</style>
</head>
<body>
<div class="box one" style="width: 100px;height: 100px;background-color: pink"></div>
<script>
//先获取元素
let box = document.querySelector('.box')
//1.新增类名：
box.classList.add('two')
//2.移除类名：
box.classList.remove('one')
//3.切换类名：
box.classList.toggle('two')
// //1.获取类名 : 元素.className
// //原因： class是js中的关键字
// console.log( box.className )
// //2.设置类名 : 会覆盖原有的类名
// box.className = 'two'
</script>
</body>
</html>
表单元素操作
表单属性
获取表单内容:元素.value
表单状态:
元素.disabled :是否禁用
元素.checked : 是否选中
元素.selected :是否选中(下拉列表)
<!DOCTYPE html>
<html lang="en">
<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>
<!--1. html中表单元素有一种独有的属性，用于控制表单的状态。
js中这类属性的值是布尔类型： true:生效 false:不生效
html中， 不写就是false 写了就是true
-->
<input type="text" placeholder="请输入内容" value="我是输入的内容" />
<br />
<input type="radio" name="gender" checked />男
<input type="radio" name="gender" />女
<br />
<input type="checkbox" name="goods" />商品1
<input type="checkbox" name="goods" checked />商品2
<input type="checkbox" name="goods" />商品3
<input type="checkbox" name="goods" />商品4
<br />
<select name="" id="">
<option value="">前端</option>
<option value="" selected>java</option>
<option value="">ui</option>
</select>
<script>
// 获取的数组，一定要取下标先取出dom对象。 才可以使用dom语法
let inputList = document.querySelectorAll('input')
//1.表单内容 :
// 返回是的一个伪数组
console.log(inputList[0].value)
//2.表单状态
// true为禁用/false为启用
inputList[0].disabled = true
</script>
</body>
</html>
`` 事件
1.交互功能 : 什么元素 在什么时刻 做什么事情
2.事件三要素
事件源 : 什么元素
事件类型 : 什么时刻
事件处理函数 : 做什么事
3.注册事件 ： 给元素添加交互
事件源.事件类型 = 事件处理函数
4.事件原理及注意点
(1)事件处理函数在注册的时候不会执行. (函数在声明的时候不会执行)
(2)事件处理函数只有两种情况可以执行
第一种： 用户主动触发交互， 浏览器会捕捉交互，底层会自动帮我们调用对象的方法
第二种： 手动调用对象事件处理函数
<!DOCTYPE html>
<html lang="en">
<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 class="box" style="width: 100px;height: 100px;background-color: pink"></div>
<script>
// 获取元素
let box = document.querySelector('.box')
// 注册函数
// 鼠标单击
box.onclick = function () {
box.style.backgroundColor = 'red'
}
// 鼠标双击
box.ondblclick = function () {
box.style.backgroundColor = 'skyblue'
}
// 鼠标移入
box.onmouseenter = function () {
box.style.backgroundColor = 'green'
}
// 鼠标移出
box.onmouseleave = function () {
box.style.backgroundColor = 'blue'
}
</script>
</body>
</html>
