Day39 DOM操作、事件
- DOM操作
webapi的概念
浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
DOM又称为文档树模型
文档:一个网页可以称为文档
节点:网页中的所有内容都是节点(标签、属性、文本、注释等)
元素:网页中的标签
属性:标签(元素)的属性
1.1 获取元素对象的方式
1.1.1 根据ID获取
1.1.2 根据class获取
1.1.3 根据标签名获取
1.1.4 根据name获取
1.1.5 querySelector
1.1.6 querySelectorAll
其中 根据id与根据querySelector 返回单个DOM对象,
根据 name,class,标签名,querySelectorAll获取的是 伪数组
2. 事件
事件:触发-响应机制
Event接口表示在DOM中发生的任何事件,一些是用户生成的(例如鼠标或键盘事件),而其他由API生成。
三要素 :
事件源:触发(被)事件的元素
事件类型:事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序:事件触发后要执行的代码(函数形式)
2.1绑定方式
2.2 Onload事件
获取DOM对象的语句,必须放在body之后,否则会因为代码执行顺序的原因,导致获取不到对应的DOM对象
而onload事件,就是用来解决这个问题的,
Onload : 文档加载完之后,立即触发执行
- 属性操作
4.1 表单操作
4.1.1 常用属性
value 用于大部分表单元素的内容获取(option除外)
type 可以获取input标签的类型(输入框或复选框等)
disabled 禁用属性checked 复选框选中属性
selected 下拉菜单选中属性
checked
Readonly
4.2 非表单操作
href、title、id、src、className width height等等
比如宽高属性,并不是所有标签都有的,比如img 有宽高属性,所以可以直接通过DOM对象.width = 222 来进行设置
但是比如div等 是没有宽高标签属性的,但是可以通过css进行设置
DOM.style.width=”222px”;
这种设置CSS的写法,如果是两个单词的话,就需要把-改为字母大写
比如 : font-size 通过js设置 就要这样 fontSize
- innerText
可以获取和设置标签中的内容
与之相似的有一个innerHTML