一:首先让我们了解一下DOM工作原理,如何用js语法去增删改查页面内容
1>DOM原理:修改DOM树中的内容,最终呈现的网页也会发生改变
1.代码从硬盘 读取到 内存 （代码）
2.生成DOM树,改了dom树，最终渲染的页面也会改变
3.渲染引擎开始渲染dom树 （页面）
2>素点style点样式点=样式值 (单个操作) 行内权重
例如:box.style.backgroundColor='skyblue'
1.DOM的增删改查
1.1 查元素:
document.querySelector
document.querySelectorAll
1.2 两者区别:
第一个之直接生成dom树,可以直接修改对象,选不到就是null
第二个是选着全部的属性,形成伪数组
1.3 查元素内容属性:
inner.Text：获取文本
inner.HTML:获取文本与标签
1.4 HTML属性:
元素.点属性名(img.src / a.href)
1.5 css属性:
单个属性修改:元素.style.样式名='样式值'(权重:css行内元素)
多个属性修改:元素.className='类名'
classList语法:
新增:元素classList.add('类名')
移除:元素.classList.remove('类名')
切换:元素.classList.toggle('类名')(有则移除无则新增)
1.6表单属性:
表单值(输入文本框):元素.value
表单状态(布尔):是否禁用
是否选中(radio与checkbox) 元素.checked
是否选中(option) 元素.selected
1.7.查询节点:
1.获取子元素:元素.children
2.获取兄弟元素:
元素上级:元素.previousElementSibling
元素下级:元素.nextElementSibling
3.获取父元素:元素.parentNode
1.8.介绍dom新增元素三种方式:
1.document.write('')
2.元素.innerHTML=''
3.document.createElement()
*重点讲解:document.createElement 用法
(1)在内存自定义一个 空标签
(2)添加内容
(3)在dom树里生成,在父盒子后面添加
1.9新增到后面与新增到指定位置
(1)添加到最前面:ul.insertBefore(newli,ul.children[0])
(2)添加到li2前面:父元素.insertBefore(ul.insertBefore(newli,li2))
(3)添加到最后:父元素.appendChild
拓展:
克隆节点:复制节点
元素.cloneNode(true)
默认false:浅克隆,只克隆元素自身
true:深克隆,克隆元素自身+所有后代元素
增删改查总结:节点增删改查
1.查节点 :
查子元素:元素.children
查兄弟元素:
上一个元素：元素.previousElementSibling
下一个元素：元素.nextElementSibling
查父元素: 元素.parentNode
2.增 ：document.createElement()
(1)内存创建空节点:document.createElement('标签名')
(2)设置标签内容
inner.Text：获取文本
inner.HTML:获取文本与标签
(3)添加到页面dom
新增到最后面 ：父元素.appendChild(元素)
新增到元素前面 ：父元素.insertBefore(要加的元素,哪一个元素前面)
3.删:父元素.removeChild(子元素)
/* 点击x : 隐藏box */
let x = document.querySelector('#x') //获取
x.onclick = function () { 、、点击子元素，将其父元素隐藏
this.parentNode.style.display = 'none'
}
*在dom树中生成新元素‘三部曲’：
//1. 在内存创建 空标签
let newli = document.createElement('li')
// 2.设置内容
newli.innerHTML = '<a herf="#">我是新来的</a>'
newli.style.backgroundColor = 'red'
// 3.新增到dom树
// 父元素.appendChild(子元素)
document.querySelector('ul').appendChild(newli) //appendChild附加子项
2.BOM
2.1.定时器:
1>定时器作用:一段代码 间隔时间 反复执行
2>定时器语法:
(1>永久定时器 setInterval()
开启: let timeID= setInterval( 回调函数, 时间间隔 )
清除：clearInterval(timeID)
(2)一次定时器 setTimeout()
开启：let timeID = setTimeout( 回调函数, 时间间隔 )
清除：clearTimeout(timeID)
3>定时器场景:
(1)一次定时器:3s消失广告
(2)永久定时器:多用于(秒杀)(无限轮播)
3.五大对象
1>window浏览窗口:打开窗口:window.open() 关闭窗口:window.close()
2>location:地址栏:跳转网页:location.href='url'
location.assign('url'):跳转
location.replace('url'):替换(不能回退)
location.reload():刷新
3>history:历史记录:history.forward() : 前进一页
history.go(数字):负数:回退-1页 -2 页
0 : 刷新
正数:前进 1页 2 页
4>navigator:用户信息(了解):naviagtor.userAgent
5>screen:用户电脑屏幕(了解)
拓展:4.存储器 localStorage与seeionStorage
4.1作用一致(都是存储数据):存储大小:5MB 只能存储字符串
4.2语法一致:设置:setItem('属性名',属性值)
获取:getItem ('属性名')
删除:removeItem('属性名')
清空:clear
4.33.面试点:两者区别
localStorage: 硬盘存储
seeionStorage:内存存储
