DOM和BOM笔记

Posted 2023-02-19 The Qing

1.JS组成
ECMAScript核心语法 语句 运算符 函数 数组 关键字…
DOM 文档对象模型 可以操作网页内容
BOM 浏览器对象模型 可以操作浏览器

2.window对象
window是BOM的直接体现，与其说操作BOM，不如说操作window
window是JS中的顶级对象 在任何地方都可以使用window对象
使用window下的属性和方法时 window. 可以省略
全局变量和函数 可以视作window的成员 在ES6之前可以这么认为！

3.window对象的成员
window.scrollY 获得滚动条距离顶部的位置 这个属性 只读不可写
window.scrollTo(x,y) 控制滚动条在纵轴和横轴上位置
window.setInterval(function()执行的函数,间隔的时间毫秒数) 开启周期定时器 执行多次
window.clearInterval(定时器ID) 清除周期定时器
window.setTimeout(function()执行的函数,间隔的时间毫秒数) 开启超时定时器 只会执行一次
window.clearTimeout(定时器ID) 清除超时定时器

4.其他BOM对象
location对象 保存的是URL信息
location.href 控制URL的跳转
history对象 保存的浏览器的历史记录信息
navigator对象 保存的是浏览器的相关信息
screen对象 保存的是屏幕的相关信息

5.document对象
document对象是DOM的直接体现，与其说操作DOM，不如说操作document

6.DOM元素的获取
ES6之前的老方法
getElementById 通过ID获取DOM元素
getElementsByClassName 通过类名获取DOM元素组成的类数组！
getElementsByTagName 通过标签名获取DOM元素组成的类数组！
getElementsByname 通过name属性获取DOM元素组成的类数组！

ES6中的新方法
querySelector(选择器)获取匹配选择器的第一个DOM元素
querySelectorAll(选择器)获取匹配选择器的所有DOM元素组成的类数组

7.DOM元素的值操作
innerhtml 获取/设置标签对内的文本内容 可以解析标签
innerText 获取/设置标签对内的文本内容 不可以解析标签
value 获取/设置表单元素的文本内容
style 获取/设置行内样式
className 获取/设置类名

思维导图

DOM操作和事件

1.DOM节点操作
1.1 特殊节点的获取
document.body 获取body节点
document.documentElement 获取html节点
1.2 节点查找
查找父节点 parentNode
查找子节点 children 【类数组】
查找兄弟节点 上一个兄弟 previousElementSibling 下一个兄弟 nextElementSibling
1.3 节点新增
1)创建新节点 document.createElement(标签)
2)父节点追加子节点 父节点.appendChild(子节点)
1.4 节点删除
remove()
2.属性操作
1)原生属性 通过.原生属性的方式来获取/设置
2)自定义属性
获取 getAttribute()
设置 setAttribute()
3.DOM事件
事件的定义:用户和浏览器的一切交互行为都可以叫做事件
事件四要素:
事件源:发生事件的DOM元素
事件类型:发生的事件类型
事件处理函数:发生了什么事情(执行了具体的函数)
事件对象:记录了事件发生时的 相关信息
事件注册的2种方式
事件属性
WC3标准方式 addEventListener
常见事件：
鼠标事件：
单击事件：click
双击事件：dblclick
移入事件：mouseover
移出事件：mouseout
键盘事件：
键抬起事件：keyup
窗口事件：
加载事件:load
表单事件：
获得焦点事件：focus
失去焦点事件：blur
输入事件：input
改变事件：change
提交事件：submit