一、DOM介绍
文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。 1.1 DOM树 DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。 文档：一个页面就是一个文档，DOM中使用document表示 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示 标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示
二、 获取元素
2.1 根据ID获取
语法：document.getElementById(id)
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象 或 null
2.2 根据标签名获取元素
语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名') 作用：根据标签名获取元素对象参数：标签名返回值：元素对象集合（伪数组，数组元素是元素对象）
2.3 H5新增获取元素方式
（1）document.getElementsByClassName('类名'); 根据类名返回元素对象集合
（2）document.querySelector('选择器'); 根据指定选择器返回第一个元素对象
（3）document.querySelectorAll('选择器'); 根据选择器返回元素对象集合
2.4 获取特殊元素
（1）获取body元素
document.body
（2）获取html元素
document.documentElement
三、 事件基础
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。 简单理解： 触发--- 响应机制。 网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。 3.1 事件三要素 3.2 执行事件的步骤
<body> <div>123</div> <script> // 执行事件步骤 // 点击div 控制台输出 我被选中了 // 1. 获取事件源 var div = document.querySelector('div'); // 2.绑定事件 注册事件 // div.onclick // 3.添加事件处理程序 div.onclick = function() { console.log('我被选中了'); } </script></body>
四、 操作元素
innerText和innerHTML的区别 innerText会去除 html标签、空格和换行，而innerHTML会保留 html标签、空格和换行； innerText中的html标签不会被识别，会被当做文字处理，而innerHTML会识别，当做标签处理；
| 
收藏
淘帖
踩
