黑马程序员技术交流社区

标题: Web APIs 基础 [打印本页]

作者: Zo. 时间: 2019-4-25 18:26
标题: Web APIs 基础
一、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 事件三要素

事件源（谁）：触发事件的元素
事件类型（什么事件）：例如 click 点击事件
事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

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的区别

获取HTML中的内容时的区别：

innerText会去除 html标签、空格和换行，而innerHTML会保留 html标签、空格和换行；

在JavaScript中设置内容时的区别：

innerText中的html标签不会被识别，会被当做文字处理，而innerHTML会识别，当做标签处理；

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2