一、DOM工作原理 :
1.代码从 硬盘 读取 到 内存中
2.生成一颗dom树
dom树 : 网页的内容
dom工作原理: 修改内存中的dom树结构,最终页面渲染也会变化
3.渲染DOM树
二、查询页面元素
-
document.querySelector('css选择器')
2. document.querySelectorAll('css选择器')
3. querySelector 和 querySelectorAll的区别
3.1 作用不同
querySelector : 只能找到满足条件第一个元素
querySelectorAll : 可以找到满足条件所有元素
3.2 语法不同
querySelector : 返回值是dom对象, 可以使用dom点语法
querySelectorAll : 返回值是伪数组, 不可以使用dom点语法。必须要先下标取出dom对象才可以使用dom点语法- @description: 获取满足选择器条件第一个元素
- @param {string} css选择器
- @return: DOM对象 | null
三、元素内容操作
1.元素内容操作 : <标签头> 元素内容 </标签尾>
1.1 元素.innerText : 获取元素文本
1.2 元素.innerHTML : 获取元素文本+标签
1.3 两者区别 : innerText不能解析标签, innerHTML可以解析标签
2.元素属性操作 : <标签头 元素属性名="属性值" > 元素内容 </标签尾>
3.元素样式操作 : <标签头 style="样式名:样式值" > 元素内容 </标签尾>任何属性操作前提： 要先获取元素 1. 元素.innerText 2. 元素.innerHTML 3. innerText与innerHTML区别 3.1 innerText : 无法解析字符串中的 html标签 3.2 innerHTML : 可以解析 字符串中的html标签四、元素属性操作
<标签头 元素属性名="属性值" style="样式名:样式值" > 元素内容 </标签尾>
1.元素内容操作 : 1.1 元素.innerText : 获取元素文本 1.2 元素.innerHTML : 获取元素文本+标签 1.3 两者区别 : innerText不能解析标签, innerHTML可以解析标签 2.元素属性操作 : 元素.属性名 元素.href : a标签的链接 元素.src : img标签的图片路径 3.元素样式操作 :
五、元素style操作样式
<标签头 元素属性名="属性值" style="样式名:样式值" > 元素内容 </标签尾>
1.元素内容操作 :
1.1 元素.innerText : 获取元素文本
1.2 元素.innerHTML : 获取元素文本+标签
1.3 两者区别 : innerText不能解析标签, innerHTML可以解析标签
2.元素属性操作 : 元素.属性名
元素.href : a标签的链接
元素.src : img标签的图片路径
3.元素样式操作 :
3.1 通过style属性操作 : 元素.style.样式名 = 样式值
(1)style方式权重是: 行内权重
(2)有-的属性需要去掉-,后面的首字母大写
元素任何属性操作前提： 获取元素
获取
/* 由于css的命名规则 与 js命名规则 不一致，所以css的样式和js样式也有区别
凡是带-的样式,例如 border- margin- font-,在js中需要转成小驼峰命名
(1)去掉- (2)-后面的首字母大写
*/
六、元素className操作样式
<标签头 元素属性名="属性值" style="样式名:样式值" > 元素内容 </标签尾>
1.元素内容操作 :
1.1 元素.innerText : 获取元素文本
1.2 元素.innerHTML : 获取元素文本+标签
1.3 两者区别 : innerText不能解析标签, innerHTML可以解析标签
2.元素属性操作 : 元素.属性名
元素.href : a标签的链接
元素.src : img标签的图片路径
3.元素样式操作 :
3.1 通过style属性操作 : 元素.style.样式名 = 样式值
(1)style方式权重是: 行内权重
(2)有-的属性需要去掉-,后面的首字母大写
3.2 通过className操作类名(了解) : 元素.className = '类名'
(1)元素类名是className, 而不是class(因为class是js关键字)
(2)className修改类名, 会覆盖以前的类名
3.3 通过classList操作类名(掌握)
1.获取类名 : 元素.className
由于class是js中的关键字，所以获取类名需要用className
2.设置类名
如果元素以前有类名，会被覆盖
七、元素classList操作样式
<标签头 元素属性名="属性值" style="样式名:样式值" > 元素内容 </标签尾>
1.元素内容操作 :
1.1 元素.innerText : 获取元素文本
1.2 元素.innerHTML : 获取元素文本+标签
1.3 两者区别 : innerText不能解析标签, innerHTML可以解析标签
2.元素属性操作 : 元素.属性名
元素.href : a标签的链接
元素.src : img标签的图片路径
3.元素样式操作 :
3.1 通过style属性操作 : 元素.style.样式名 = 样式值
(1)style方式权重是: 行内权重
(2)有-的属性需要去掉-,后面的首字母大写
3.2 通过className操作类名(了解) : 元素.className = '类名'
(1)元素类名是className, 而不是class(因为class是js关键字)
(2)className修改类名, 会覆盖以前的类名
3.3 通过classList操作类名(掌握)
(1)新增类名: 元素.classList.add( '类名' )
(2)删除类名: 元素.classList.remove( '类名' )
(3)切换类名: 元素.classList.toggle( '类名' )
切换: 有则移除,无则新增
(4)判断类名: 元素.classList.contains( '类名' )
true:有类名 false:没有
(1)新增类名: 元素.classList.add( '类名' )
(2)删除类名: 元素.classList.remove( '类名' )
(3)切换类名 :元素.classList.toggle( '类名' )
判断类名
console.log( box.classList.contains( 'two' ) )//打印返回值 true:有
八、表单的常用属性
html中的表单元素有一种非常特殊的布尔类型属性, 用于表示表单的状态.
disabled : 是否禁用
checked : 是否选中 (radio标签和checkbox标签)
selected : 是否选中 (option标签)
表单元素特殊属性
1.表单内容 : 表单元素.value
2.表单布尔类型属性
表单元素.disabled : 是否禁用
表单元素.checked : 是否选中 (单选+多选)
表单元素.selected : 是否选中（下拉菜单）
九、事件及注册事件
0.交互功能 : 什么元素 在什么时候 做什么事情
1.事件技术 : 实现交互功能
2.事件三要素
事件源 : 什么元素
事件类型 : 什么时候 鼠标点击、移入
事件处理 : 做什么事情
3.注册事件 : 事件源.事件类型 = 事件处理函数
4.事件工作原理 :
4.1 事件在注册的时候,不会执行。 ( 函数在声明的时候不会执行的 )
4.2 要想执行事件处理函数,只有两种方式
(1)用户触发交互,浏览器自动调用
(2)主动触发: 事件源.事件类型()
对元素进行任何属性操作前提： 获取元素
let box = document.querySelector('.box')
//给 box添加事件
//1.鼠标点击事件
box.onclick = function(){
box.style.backgroundColor = 'green'
}
//2.鼠标双击事件
box.ondblclick = function(){
box.style.backgroundColor = 'pink'
}
//3.鼠标移入
box.onmouseenter = function(){
box.style.backgroundColor = 'purple'
}
//4.鼠标离开
box.onmouseleave = function(){
box.style.backgroundColor = 'skyblue'
}
十、获取元素的其他方式
//1.根据id名获取元素
let btn = document.getElementById('btn')
console.log(btn)//dom对象
//2.根据标签名获取元素
let liList = document.getElementsByTagName('li')
console.log( liList )
//3.根据类名获取元素
let box = document.getElementsByClassName('box')
console.log( box )
//4.根据name值获取表单元素
let genderList = document.getElementsByName('gender')
console.log(genderList)
