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('类名')

alt text
晚点实现

事件监听

//事件类型
onClick:点击
onMouseOver:鼠标经过
onMouseOut:鼠标移出
OnChange:文本类容改变
OnSelect:文本框选中
onFocus:光标聚焦

对象名.addEventListener('事件类型',执行的函数)
事件发生才执行,不是按代码顺序执行

BOM:浏览器对象模型(管浏览器自身交互)

用于操作浏览器本身,核心对象:window navigator history location screen

posted @ 2025-06-25 00:02  GJ504b  阅读(11)  评论(0)    收藏  举报