DOM工作流程
1.代码读取到内存
? ? ? ? 2.生成DOM树 （dom语法增删改查，渲染也会跟着改变）
? ? ? ? 3.渲染DOM树
?查询元素两种方式
?1.查询单个元素 : document.querySelector('选择器')? ? ? ? ? ??
? ? ? ? ? ? 2.查询所有元素 : document.querySelectorAll('选择器')
? ? ? ? ? ? 3.querySelector() 和 querySelectorAll() 区别
? ? ? ? ? ? ? ? 3.1 querySelector() 返回一个dom对象，可以直接修改
? ? ? ? ? ? ? ? 3.2 querySelectorAll() 返回一个伪数组,不可以直接修改。 需要通过下标获取里面的dom对象才可以修改
?
* @description: 根据选择器查询满足条件的第一个元素
? ? ? ? * @param {string} ?选择器字符串
? ? ? ? * @return: DOM对象 | null(选择器写错)
let box = document.querySelector('.box')
console.log( box )
* @description:根据选择器查询满足条件所有元素
? ? ? ? * @param {string} ?选择器字符串
? ? ? ? * @return: ?一定会返回伪数组,如果选择器写错就会得到空数组
? ? ? ? ? ? 伪数组： 只有数组三要素（元素，下标,长度）,没有数组方法
let boxList = document.querySelectorAll('.box')
console.log( boxList )
操作元素内容
元素.innerText : ?获取元素文本
? ? ? ? ? ? 元素.innerHTML : ?获取元素内容(文本+标签)
? ? ? ? ? ? innerText和innerHTML异同点
? ? ? ? ? ? ? ? 相同： 都是获取字符串
? ? ? ? ? ? ? ? 不同： 获取内容不同
? ? ? ? ? ? ? ? ? ? innerText : 获取文本，无法解析字符串的标签
? ? ? ? ? ? ? ? ? ? innerHTML : 获取内容， 可以解析字符串的标签
?获取元素
let box = document.querySelector('.box')
//1. 元素.innerText : 只能获取文本（自己+子元素）
console.log( box.innerText )
//2. 元素.innerHTML: 获取内容(文本+标签)
console.log( box.innerHTML )
//3. innerText和innerHTML两者区别
//3.1 innerText无法解析字符串中的标签
box.innerText = '<b>我是ikun</b><a href="#">我是链接</a>'
//3.1 innerHTML：可以解析字符串中的标签
box.innerHTML = '<b>我是ikun</b><a href="#">我是链接</a>'
?
元素常用属性操作
? ? ? ? ? ? 语法: ?对象.属性名
? ? ? ? ? ? ? ? 元素.href : 链接，常用于a标签
? ? ? ? ? ? ? ? 元素.src : 路径，常用于img标签
//获取元素
let a = document.querySelector('a')
let img = document.querySelector('img')
//1.元素.href : 链接，常用于a标签
//1.1 获取
console.log( a.href )//http://www.itheima.com/
//1.2 设置
a.href = 'http://www.itcast.cn'
//2.元素.src : 路径，常用于img标签
//2.1 获取
console.log( img.src )//获取绝对路径
//2.2 设置
img.src = './images/02.jpg'
操作元素属性
1.内容属性
? ? ? ? ? ? ? ? 元素.innerText : 文本
? ? ? ? ? ? ? ? 元素.innerHTML : 文本+标签
? ? ? ? ? ? 2.元素html属性
? ? ? ? ? ? ? ? 元素.href : a标签链接
? ? ? ? ? ? ? ? 元素.src : img标签图片路径
? ? ? ? ? ? 3.元素css属性
? ? ? ? ? ? ? ?语法 ?： ?元素.style.样式名
? ? ? ? ? ? ? ?注意点： ?css样式有-，需要转成小驼峰
? ? ? ? ? ? ? ? ? ? 原因 ： -不符合js命名规则
? ? ? ? ? ? ? ? ? ? 驼峰： -去掉,后面首字母大写
?
let box = document.querySelector('.box')
//1.获取样式属性 : 元素.style.样式名
console.log( box.style.width )//100px
/* 细节：如果样式属性有- , font- border- padding-,都需要转成驼峰命名法
原因： -不符合js命名规则
驼峰： 去掉-,后面首字母大写
*/
console.log( box.style.backgroundColor )//rgb(255, 0, 0)
box.style.backgroundColor = 'pink'
元素样式属性操作三种方式
? ? ? ? ? ? 1.元素.style.样式名
? ? ? ? ? ? ? ? * 场景： 修改单个样式
? ? ? ? ? ? 2.元素.className
? ? ? ? ? ? ? ? * 了解 ： 通过类名可以修改多个样式，但是会覆盖原先的类样式
//获取元素
let box = document.querySelector('.box')
//获取类名: 元素.className
//细节： 元素类名不能使用class，它是js中的关键字。 需要使用className
console.log( box.className )
//修改类名 : 会覆盖之前的类名
box.className = 'one'
?
元素样式属性操作三种方式
? ? ? ? ? ? 1.元素.style.样式名
? ? ? ? ? ? ? ? * 场景： 修改单个样式
? ? ? ? ? ? 2.元素.className
? ? ? ? ? ? ? ? * 了解 ： 通过类名可以修改多个样式，但是会覆盖原先的类样式
? ? ? ? ? ? 3.classList语法： 操作类名，但是不会覆盖原来的类名
? ? ? ? ? ? ? ? 3.1 新增类名 : ?元素.classList.add('类名')
? ? ? ? ? ? ? ? 3.2 移除类名 : ?元素.classList.remove('类名')
? ? ? ? ? ? ? ? 3.3 切换类名 : ?元素.classList.toggle('类名')
? ? ? ? ? ? ? ? ? ? 切换： 有则移除，无则新增
?
//获取元素
let box = document.querySelector('.box')
//1.新增类名
box.classList.add('one')
box.classList.add('two')
//2.移除类名 : 元素.classList.remove('类名')
box.classList.remove('two')
//3.切换类名 : 元素.classList.toggle('类名')
//切换： 有则移除，无则新增
box.classList.toggle('one')
?
tml中表单元素有一种特殊的属性，表示表单元素的两种状态。他们在js中是布尔类型
? ? ? ? disabled : 是否禁用
? ? ? ? checked : 是否选中 ?radio和checkbox
? ? ? ? selected : 是否选中 ?下拉option
<input type="text" value="我是输入内容" disabled>
<br>
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
<br>
<input type="checkbox" name="good" checked>商品1
<input type="checkbox" name="good" checked>商品2
<input type="checkbox" name="good">商品3
<input type="checkbox" name="good">商品4
<br>
<select name="" id="">
<option value="">前端</option>
<option value="" selected>UI</option>
<option value="">Java</option>
<option value="">测试</option>
1.事件作用 ： 实现交互功能的
? ? ? ? ? ? 交互 ： 什么元素 什么时刻 做什么事
? ? ? ? 2.事件三要素 ：
? ? ? ? ? ? 事件源： 什么元素
? ? ? ? ? ? 事件类型: 什么时刻 ? ? ?onclick：单击 ? ondblclick:双击
? ? ? ? ? ? 事件处理函数: 做什么事情
? ? ? ? 3.注册事件 ： 给元素添加交互功能
? ? ? ? ? ? 事件源.事件类型 = 事件处理函数
? ? ? ? 4.事件工作原理 ：
? ? ? ? ? ? 注册事件 ： ?本质是给对象添加方法， 函数在声明的时候不会立即执行的。（声明函数）
? ? ? ? ? ? 触发事件 ： 点击元素的时候，浏览器会自动捕捉到交互。 主动帮我们调用这个事件的方法。（调用函数）
//获取元素
let box = document.querySelector('.box')
//注册事件：给按钮添加点击交互
box.onclick = function(){
//事件处理：修改颜色
box.style.backgroundColor = 'red'
}
//点击盒子，浏览器会偷偷帮你执行这行代码
// box.onclick()
//注册双击事件
box.ondblclick = function(){
alert(6666)
}
//鼠标移入
box.onmouseenter = function(){
box.style.border = '5px solid green'
}
//鼠标移出
box.onmouseleave = function(){
//我们给样式设置空字符串，元素就会加载默认样式
box.style.border = ''
}
?
|