Web-API-01

DOM

文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

DOM树

1550731974575.png

获取元素

1.根据ID获取
语法：document.getElementById(id)
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象 或 null
2.根据标签名获取元素
语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名')
作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象）

• 注意：getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。

3.H5新增获取元素方式

1550733518278.png
1550733734425.png

4. 获取特殊元素（body，html）

1550733794816.png

事件

1550734506084.png

操作元素

1.改变元素内容（获取或设置)

1550735016756.png
innerText和innerHTML的区别

• 获取内容时的区别：
  ​ innerText会去除空格和换行，而innerHTML会保留空格和换行
• 设置内容时的区别：
  ​ innerText不会识别html，而innerHTML会识别
  2.常用元素的属性操作
  1550735556297.png
  3.表单元素的属性操作
  1550736039005.png
  表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。

4.样式属性操作

1550736488634.png

• 通过操作style属性
  元素对象.style.样式属性 = 值;

  
  1550736620181.png
• 通过操作className属性

元素对象.className = 值;
因为class是关键字，所有使用className。

1550737214510.png
1550737354861.png