DOM操作、事件

Day39 DOM操作、事件

1. 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. 属性操作
   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

5. innerText
   
   可以获取和设置标签中的内容

与之相似的有一个innerHTML