Javascript学习笔记之DOM操作、事件

DOM操作和事件

1.1 DOM概述

事件基础文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

DOM又称为文档树模型

文档：一个网页可以称为文档
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
元素：网页中的标签
属性：标签(元素)的属性

1.2获取元素对象的方式

想要操作DOM,核心问题,你得先找到它,而获取对象的方式,就是用来找到某个/某些元素的

伪数组定义：
1、拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)

2、不具有数组所具有的方法
伪数组，就是像数组一样有 length 属性，也有 0、1、2、3 等属性的对象，看起来就像数组一样，但不是数组
常见的参数的参数 arguments，DOM 对象列表（比如通过 document.getElementsByTags 得到的列表）

1.2.1 根据ID获取

1.2.2 根据class获取

1.2.3 根据标签名获取

1.2.4 根据name获取

1.2.5 querySelector

1.2.6 querySelectorAll

2. 事件

2.1 概述
事件：触发-响应机制

三要素 :
事件源:触发(被)事件的元素
事件类型:事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序:事件触发后要执行的代码(函数形式)

2.2 绑定方式

2.3 Onload事件

获取DOM对象的语句,必须放在body之后,否则会因为代码执行顺序的原因,导致获取不到对应的DOM对象

而onload事件,就是用来解决这个问题的,
Onload : 文档加载完之后,立即触发执行

3. 属性操作

3.1 表单操作
3.1.1 常用属性

value 用于大部分表单元素的内容获取(option除外)
type 可以获取input标签的类型(输入框或复选框等)
disabled 禁用属性
checked 复选框选中属性
selected 下拉菜单选中属性

3.2 非表单操作
3.2.1 基础语法

href、title、id、src、className width height等等

比如宽高属性,并不是所有标签都有的,比如img 有宽高属性,所以可以直接通过DOM对象.width = 222 来进行设置

但是比如div等 是没有宽高标签属性的,但是可以通过css进行设置
DOM.style.width=”222px”;

这种设置CSS的写法,如果是两个单词的话,就需要把-改为字母大写
比如 : font-size 通过js设置 就要这样 fontSize

4、innerText

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

与之相似的有一个innerHTML

5、扩展-text和html函数