ES6 | HTML DOM

简介

ES6(ES2015)是JavaScript的一个版本，它在2015年6月发布。它增加了许多新特性，例如箭头函数、解构赋值、类和模块。 HTML DOM (文档对象模型) 是 HTML 的编程接口，是对标准对象的扩展。

本文将介绍如何在ES6中使用HTML DOM。

使用 HTML DOM

获取 DOM 元素

ES6提供了两种HTML DOM元素的获取方式：querySelector和querySelectorAll。

• querySelector返回文档中匹配指定css选择器的第一个元素。

// 获取 ID 为 "myId" 的元素
const myElement = document.querySelector('#myId');

• querySelectorAll返回文档中匹配指定css选择器的所有元素。

// 获取所有类名为 "myClass" 的元素
const myElements = document.querySelectorAll('.myClass');

创建 DOM 元素

在 ES6 中创建元素的方法非常简单，我们可以使用 createElement方法。

// 创建 <p> 元素
const paragraph = document.createElement('p');
// 设置元素的文本内容
paragraph.textContent = 'Hello, World!';
// 将元素添加到 DOM 中
document.body.appendChild(paragraph);

更新 DOM 元素

ES6 中可以使用选择器来更新文档中的元素内容。例如，我们可以使用 querySelector 方法来获取要更新的元素。

// 选择元素
const heading = document.querySelector('h1');
// 更新元素内容
heading.textContent = 'New Heading';

删除 DOM 元素

为了从 DOM 中删除元素，我们可以使用 removeChild方法。

// 选择要删除的元素
const elementToRemove = document.querySelector('#myId');
// 移除元素
document.body.removeChild(elementToRemove);

结论

通过 ES6 和 HTML DOM 的结合，我们可以更加轻松快捷地操作文档中的元素。

以上就是ES6和HTML DOM的简介和使用方式。

createQuerySelector和createElement方法返回建立的节点对象，querySelectorAll方法返回的是NodeList，所以需要遍历它们：

// 遍历所有类名为 'myClass' 的元素，设置它们的文本内容
const myElements = document.querySelectorAll('.myClass');
for (let i = 0; i < myElements.length; i++) {
  myElements[i].textContent = 'Hello!';
}