DOM与BOM
目录
DOM 与 BOM
*GJ504b最近要考web期末了,总结一下DOM常见操作*
DOM:
- 定义:根据html元素生成的文档对象模型(管网页内容和结构)
把html文档转为节点树,核心对象:document(window的属性) - 作用:提供接口使得javascript可以操作页面内容,结构和样式
常见操作(先获取元素存在变量里,然后变量.***修改)
操作元素内容
innerText:修改/添加纯文本内容,不解析标签
innerHTML:修改/添加文本内容,解析标签
操作元素属性
对象名.属性 = 属性值
// 1.
获取元素
const pic = Document.querySelector('img')
// 2.
操作元素
pic.src = './images/example.jpg'
pic.title = '⽰例图⽚'
操作css样式
By style(修改样式多,书写不方便)
对象名.style.样式属性 = 值
// 1. 获取元素
const box = Document.querySelector('.box')
// 2. 修改样式属性
box.style.width = '200px' // ⚠注意加引号和单位
box.style.backgroundColor = 'teal' // 原CSS属性有连接符的⽤⼩驼峰命名法(最后一个单词大写开头)代替
By className
// myclass 是⼀个CSS 选择了的类名
元素名.className = 'myclass'
//myclass把原来的类名完全覆盖
myclass把原来的类名完全覆盖
⽤于⼀个元素需要设置较多的样式时,配合CSS 类选择器设置样式
By classList
给元素添加或删除 ⼀个 HTML 类名
// 追加⼀个HTML类名
元素名.classList.add('类名')
// 删除⼀个HTML 类名
元素名.classList.remove('类名')
// 切换⼀个HTML类名,有该类名就删除,没有就加上(类似开关灯)
元素名.classList.toggle('类名')
晚点实现
事件监听
//事件类型
onClick:点击
onMouseOver:鼠标经过
onMouseOut:鼠标移出
OnChange:文本类容改变
OnSelect:文本框选中
onFocus:光标聚焦
对象名.addEventListener('事件类型',执行的函数)
事件发生才执行,不是按代码顺序执行
BOM:浏览器对象模型(管浏览器自身交互)
用于操作浏览器本身,核心对象:window navigator history location screen