JavaScript-DOM学习归纳总结

JavaScript-DOM学习归纳总结

现在所说的JavaScript包含了三个部分

1. ECMAScript：js的语法规范
2. DOM：操作网页的功能
3. BOM：操作浏览器的功能

DOM（Document Object Model文档对象模型）：

1.概念

DOM 是 W3C（万维网联盟）的标准。
（1）W3C DOM 标准被分为 3 个不同的部分：
① 核心 DOM - 针对任何结构化文档的标准模型
② XML DOM - 针对 XML 文档的标准模型
③ HTML DOM - 针对 HTML 文档的标准模型

（2）XML DOM：
XML 文档对象模型定义访问和操作XML文档的标准方法。
DOM 将 XML 文档作为一个树形结构，而树叶被定义为节点。

（3）HTML DOM：
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

（4）常见概念
文档：document指的是整个页面，网页视为一个对象
节点：页面中任何内容（标签，属性，文字等等）都是节点
元素：element指的是网页中的标签
DOM又被称为文档树模型：能够查找该节点的父、子、亲戚

2.DOM获取页面中的元素

（1）通过id获取

document.getElementById('id')

参数：参数是string类型，是获取元素的id
返回值：获取到的元素，没有获取到元素返回null
（2）通过标签名获取

document.getElementsByTagName('div')

参数：标签名(div p)
返回值：伪数组（类数组对象）
（3）通过类名获取

document.getElementByClassName('className')

参数：类名（className）
返回值：伪数组
存在兼容性问题：IE678不支持
（4）通过name属性获取

document.getElementByName('name')

该方法只支持表单元素，因为只有表单元素才有name属性
参数：name属性
返回值：伪数组
（5）通过选择器获取一个元素

document.querySelector('.className')

参数：选择器（div .className）
返回值：获取到的元素的第一个，没有获取到元素返回null
（6）通过选择器获取一组元素

document.querySelectorAll('.className')

参数：选择器（div .className）
返回值：伪数组

3.事件（触发-响应机制）

（1）事件的三要素&