lesson 5: 使用 JavaScript 进行 DOM 操作
发布于 3 年前 作者 HugoJing 1766 次浏览 来自 分享

原文地址: https://github.com/hugojing/web-lessons/blob/master/lesson5/README.md

目标

了解 DOM 与 DOM JS API.

知识点

  1. 了解 DOM
  2. 使用 JS 操作 DOM

课程内容

DOM 是什么

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。

DOM 提供了一种表述形式 — 将文档作为一个结构化的节点组以及包含属性和方法的对象。

尽管通常会使用 JavaScript 来访问 DOM, 但它并不是 JavaScript 的一部分,它也可以被其他语言使用,

以上引用自 MDN .

简单说,通过 DOM 就可以用编程语言对 HTML 和 XML 文档进行查看和操作。

DOM 节点

在 HTML DOM 中,所有事物都是节点。

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改,也可以创建或删除节点。

节点树中的节点彼此拥有层级关系。父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。

DOM 属性

所有 HTML 元素被定义为对象,而编程接口则是对象属性和对象方法。

属性是能够获取或设置的值(比如节点的名称或内容)。

一些常用的属性:

属性 描述
nodeName 节点名
nodeType 节点类型
innerText 文字内容
innerHTML HTML 内容
id 元素节点 id
className 元素 class 名
style 元素样式
nextSibling 下一个同胞节点

DOM 方法

方法是能够执行的动作(比如添加或修改元素)。

一些常用的方法:

方法 描述
getElementById() 返回带有指定 ID 的元素
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表
appendChild() 把新的子节点添加到指定节点
removeChild() 删除子节点
replaceChild() 替换子节点
insertBefore() 在指定的子节点前面插入新的子节点
createAttribute() 创建属性节点
createElement() 创建元素节点
createTextNode() 创建文本节点
getAttribute() 返回指定的属性值
setAttribute() 把指定属性设置或修改为指定的值
addEventListener() 添加事件监听器
removeEventListener() 去除事件监听器

DOM 实战

为了方便学习,避免繁琐的配置,我做了一个脚手架 generator-webpack-babel,可以用来快速生成项目基础代码。

目前版本 (v1) 是个最小可行产品,仅包含必要的模块加载、开发服务器、打包功能。

安装之后,执行 yo webpack-babel,即可在当前目前生成代码。

使用 yarn run dev 启动开发服务器,然后在 src 目录下进行开发。

这里引入一个简单的外部样式库 purecss ,用来美化外观。

改变 DOM 结构

首先,编辑 src/main.js,创建两个 DOM 元素:

const title = document.createElement('h1')
title.innerText = 'DOM 实战'

const grids = document.createElement('div')
grids.setAttribute('class', 'pure-g')

然后,可以创建另外一些 DOM 元素,如输入框、按钮、图片等,添加到 grids 中,详见代码。

最后,将这两个元素添加到 src/index.html 中预设的 app 节点下:

const app = document.getElementById('app')
app.appendChild(title)
app.appendChild(grids)

监听 DOM 事件

button 添加事件监听器,监听 click 事件。

当该事件发生时,指定的函数就会执行。代码如下:

button.addEventListener('click', () => {
  image.style.transform = 'rotateX(180deg)'
  setTimeout(() => {
    image.style.transform = 'rotateX(360deg)'
  }, 500)
})

这样,在点击按钮时,图片将以 X 为轴旋转 180°,500ms 后再更改为旋转 360°.

线上效果:https://hugojing.github.io/web-lessons/lesson5/dist

回到顶部