【JavaScript基础】DOM介绍（一）

sherlockkid7
267 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活动详情

Web API 介绍:

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，帮助我们实现某种功能

Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。

image.png

文档对象模型（Document Object Model，简称DOM），是 W3C组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。

文档：一个页面就是一个文档，使用document表示

节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示

标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

1. 获取元素

1.1 ID 获取

  • 语法：document.getElementById('id')
  • 作用：根据ID获取元素对象
  • 参数：id值，区分大小写的字符串
  • 返回值：元素对象 或 null

1.2 标签名获取

  • 语法：

    1. document.getElementsByTagName('标签名')

    2. element.getElementsByTagName('标签名')

  • 作用：根据标签名获取元素对象

  • 参数：标签名

  • 返回值：元素对象集合（伪数组，数组元素是元素对象）

    注意：

    1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。

    2. 得到元素对象是动态的

    3. 如果获取不到元素,则返回为空的伪数组

1.3 HTML5 新增的方法获取

document.getElementsByClassName('类名')；// 根据类名返回元素对象集合
document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器'); // 根据指定选择器返回所有元素对象集合

注意：querySelector 和querySelectorAll里面的选择器需要加符号

document.querySelector('#nav');

  • 特殊元素获取
    • 获取body元素 doucumnet.body // 返回body元素对象
    • 获取html元素 document.documentElement // 返回html元素对象

为什么要获取页面元素?

操作页面上的某些内容(显示/隐藏，动画等动效)，需要先获取到该部分对应的元素，才进行后续操作

2. 事件基础

2.1 事件三要素

  • 事件源（谁）：触发事件的元素

  • 事件类型（什么事件）： 例如 click 点击事件

  • 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

2.2 执行事件的步骤

  • 获取事件源
  • 注册事件（绑定事件）
  • 添加事件处理程序（采取函数赋值形式）

3. 操作元素

JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。（注意：这些操作都是通过元素对象的属性实现的）

获取属性的值：元素对象.属性名

设置属性的值：元素对象.属性名 = 值

表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。

3.1 改变元素内容

  • element.innerText

    从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉

  • element.innerHTML(W3C标准)

    起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

3.2 常用元素的属性操作

  1. innerText、innerHTML 改变元素内容

  2. src、href

  3. id、alt、title

3.3 表单元素的属性操作

type、value、checked、selected、disabled

3.4 样式属性操作

  • element.style 行内样式操作

    元素对象.style.样式属性 = 值;

注意：

  1. JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor

  2. JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

  • element.className 类名样式操作

    元素对象.className = 值;

注意：

  1. 如果样式修改较多，可以采取操作类名方式更改元素样式。

  2. class因为是个保留字，因此使用className来操作元素类名属性

  3. className 会直接更改元素的类名，会覆盖原先的类名。

3.5 自定义属性的操作

H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中

1. 设置H5自定义属性

H5规定自定义属性data-开头做为属性名并且赋值。 <div data-index="1"></div>

或者使用 JS 设置 element.setAttribute('data-index', 2)

2. 获取H5自定义属性

兼容性获取 element.getAttribute('data-index');

H5新增 element.dataset.index 或者 element.dataset['index'] ie 11才开始支持

获取属性值

element.属性 获取内置属性值（元素本身自带的属性）

element.getAttribute('属性'); 主要获得自定义的属性 （标准）

设置属性值

element.属性 设置内置属性值

element.setAttribute('属性'); 主要设置自定义的属性 （标准）

移除属性

element.removeAttribute('属性');

avatar
文章
阅读
粉丝