作为一种 Web 开发语言，JavaScript 赋予了开发者创建动态和交互式网页的能力，其中一个实现这种交互性的 JavaScript 关键特性是文档对象模型（DOM）操作。

DOM 操作允许开发者修改网页的结构、样式和内容。在本文中，我们将探讨 JavaScript 中 DOM 操作的基础知识，将复杂的概念分解成易于理解的代码片段。

什么是 DOM

文档对象模型（DOM）是一种用于 Web 文档的编程接口。它以对象树的形式表示文档的结构，其中每个对象对应于文档的一部分，例如元素、属性和文本。JavaScript 可以操作这个树状结构，允许开发者动态地改变网页的内容和外观。

如何访问 DOM 元素

为了操作 DOM，我们需要访问它的元素，这一步通常使用代表整个 HTML 文档的 document 对象来实现。让我们看一个简单的例子：

// 使用一个元素的 ID 访问这个元素
const headerElement = document.getElementById('header');

// 使用类名访问元素
const paragraphs = document.getElementsByClassName('paragraph');

// 使用标签名访问元素
const images = document.getElementsByTagName('img');

在上面的代码片段中，我们使用 getElementById , getElementsByClassName , 和 getElementsByTagName 三个函数来检索特定的元素。这三个函数的返回值可以存储在变量中，以供开发者进行进一步的操作。

如何修改元素内容

一旦我们已经访问了一个元素，我们就可以使用这个元素的innerHTML属性来修改它的内容：

// 修改一个元素的内容
headerElement.innerHTML = 'New Header Text';

在上面的例子中，我们将 headerElement 的内容更改为 New Header Text 。这是一种简单而行之有效的方法，可以更新元素中的文本内容。

事件和事件处理

事件是在浏览器中发生的操作或事务，例如用户点击按钮或调整窗口大小。JavaScript 允许我们处理这些事件并执行相应的代码作为对事件的响应。事件处理是创建交互式网页的关键方面。

如何添加事件监听器

为了响应事件，我们可以使用事件监听器，它们是用于“监听”特定元素上的特定事件的函数。让我们以一个按钮点击事件为例：

// 访问一个按钮元素
const myButton = document.getElementById('myButton');

// 添加点击事件监听器
myButton.addEventListener('click', function() {
    alert('Button Clicked!');
});

在这个例子中，当 ID 为 myButton 的按钮被点击时，浏览器将弹出一个内容为 Button Clicked! 的提示框。事件监听器提供了一种根据用户交互执行自定义代码的方式。

如何修改样式

DOM 操作还包括修改元素的样式，使我们能够创建视觉上吸引人的、动态的网页。

如何动态地修改样式

我们可以使用元素的 style 属性来改变其外观。让我们以点击按钮时改变段落颜色的例子来说明：

// 访问一个段落元素
const myParagraph = document.getElementById('myParagraph');

// 访问一个按钮元素
const colorButton = document.getElementById('colorButton');

// 为按钮添加一个点击事件
colorButton.addEventListener('click', function() {
    // 修改段落的颜色样式
    myParagraph.style.color = 'blue';
});

在这个例子中，当 ID 为 colorButton 的按钮被点击时，ID 为 myParagraph 的段落的文本颜色将被更改为蓝色。

如何创建和修改元素

除了修改现有元素之外，JavaScript 还允许我们创建新元素并将它们添加到 DOM 中。

如何创建新的元素

使用 createElement 方法来创建一个新的 HTML 元素。让我们创建一个新的段落元素，并将其追加（添加）到文档的 body 中：

// 新建一个段落元素
const newParagraph = document.createElement('p');

// 为新段落设置文本内容
newParagraph.textContent = 'This is a new paragraph.';

// 将新创建的段落追加到文档的 body 中
document.body.appendChild(newParagraph);

在这个例子中，我们创建了一个新的 p（段落）元素，设置了它的文本内容，然后将其追加到文档的 body 中。

如何修改属性

我们还可以修改现有元素的属性。让我们思考如何动态更改图像的来源：

// 访问一个图像元素
const myImage = document.getElementById('myImage');

// 修改图像的来源属性
myImage.src = 'new-image.jpg';

这个例子中, 我们访问了 ID 为 myImage 的图像元素，并将其 src 属性更改为 new-image.jpg，动态更新显示的图像。

如何更新表单的输入值

让我们思考这样一个情景：你希望根据用户的交互来更新文本输入框的值：

// 访问一个文本输入框元素
const myInput = document.getElementById('myInput');

// 添加一个输入事件监听器
myInput.addEventListener('input', function() {
    // 使用输入值更新一个段落的内容
    document.getElementById('inputValue').textContent = myInput.value;
});

在这个例子中，当用户在 ID 为 myInput 的文本输入框中输入内容时，ID 为 inputValue 的段落将根据输入值动态更新段落内容。

如何切换可见性

你可以通过使用 display 样式属性来切换元素的可见性。让我们创建一个按钮用于切换段落的可见性：

// 访问一个按钮元素
const toggleButton = document.getElementById('toggleButton');

// 访问一个段落元素
const toggleParagraph = document.getElementById('toggleParagraph');

// 添加一个点击事件监听器
toggleButton.addEventListener('click', function() {
    // 切换段落的可见性
    toggleParagraph.style.display = toggleParagraph.style.display === 'none' ? 'block' : 'none';
});

在这里，ID 为 toggleParagraph 的段落最初是可见的，单击 ID 为 toggleButton 的按钮会切换其可见性。

DOM 操作中的常见陷阱

虽然 DOM 操作是创建动态网页的强大工具，但初学者经常会遇到一些常见陷阱，这些陷阱可能导致意外行为或错误。让我们探讨一些这样的陷阱，并提供如何避免它们的建议。

在 DOM 渲染完成前操作它们

有时我们可能会在 DOM 尚未完全加载之前尝试操作它，这可能导致 JavaScript 尝试访问尚未呈现的元素。为了避免这种情况，最重要的是在执行任何 JavaScript 代码之前都需要等待 DOM 完全加载：

document.addEventListener('DOMContentLoaded', function() {
    // DOM 操作代码放在这里
});

通过将执行 DOM 操作的代码包裹在 DOMContentLoaded 事件监听器内部，你就可以确保它仅在 DOM 准备就绪时运行。

没有确认一个元素是否存在

在尝试使用诸如 getElementById 这样的方法访问元素时，我们可能会假设元素存在并继续进行操作。但是，如果元素不存在于页面上，则可能会导致错误。

在操作元素之前，我们始终应该先检查该元素是否存在：

const myElement = document.getElementById('myElement');

if (myElement) {
    // 在这里对这个元素进行操作
} else {
    console.error('Element not found!');
}

这个简单的检查可以防止在操作不确定是否存在的元素时出现的错误。

忘记阻止默认行为

在处理事件时，忘记阻止默认行为可能会导致意外的页面行为。例如，如果在没有阻止默认行为的情况下提交表单，页面可能会重新加载，导致数据丢失：

const myForm = document.getElementById('myForm');

myForm.addEventListener('submit', function(event) {
    // 阻止默认的表单提交
    event.preventDefault();

    // 你的表单处理代码放在这里
});

通过调用event.preventDefault()，你可以阻止与表单提交事件关联的默认行为，从而完全控制事件的处理方式。

执行效率低下的 DOM 查询

在循环中执行效率低下的 DOM 查询会降低性能。每次查询都涉及遍历 DOM，不必要的查询会减慢网页的加载速度。

与其重复查询 DOM，不如缓存元素的引用：

// 在循环中执行的效率低下的查询
for (let i = 0; i < 10; i++) {
    const myElement = document.getElementById('myElement');
    // 操作 `myElement`
}

// 循环之外的高效的查询
const myElement = document.getElementById('myElement');
for (let i = 0; i < 10; i++) {
    // 操作 `myElement`
}

通过一次查询 DOM 并重复使用该 DOM 的引用，可以优化你的代码。

无法处理跨浏览器的兼容性

不同的浏览器可能会略有不同地解释 JavaScript 和 DOM 操作。如果没有考虑跨浏览器兼容性，可能会导致代码的行为不一致。

使用特性检测，并考虑使用像 jQuery 或现代框架这样的库来处理跨浏览器的不一致性：

// 使用特性检测检查浏览器对 `addEventListener` 方法的支持：
if (document.addEventListener) {
    // 使用 addEventListener
} else {
    // 回退到另一种受支持的方法
}

通过在使用一些功能特性之前检查它们，你可以确保您的代码在各种浏览器上正常工作。

如何在框架中使用 DOM 操作

虽然 JavaScript 允许直接操作 DOM，但现代 Web 开发通常涉及使用诸如 React 或 Vue.js 等框架。这些框架提供了一种更加结构化的方式来构建和管理用户界面。

React 示例

// React 组件渲染一个按钮并处理其点击事件
class MyButton extends React.Component {
    handleClick() {
        alert('React Button Clicked!');
    }

    render() {
        return (
            <button onClick={() => this.handleClick()}>Click me</button>
        );
    }
}

// 将 React 组件渲染到 DOM 中
ReactDOM.render(<MyButton />, document.getElementById('reactRoot'));

这个 React 示例创建了一个组件来处理按钮点击事件，它演示了一种更加声明式的 UI 开发方法。

Vue.js 示例

// 具有一个数据属性和一个方法的 Vue.js 实例
new Vue({
    el: '#vueRoot',
    data: {
        message: 'Vue.js Message'
    },
    methods: {
        showMessage: function () {
            alert(this.message);
        }
    }
});

这个例子创建了一个 Vue.js 实例来管理数据和方法，展示了 Vue.js 的响应性和基于组件的结构。

总结

在这个全面的指南中，我们深入探讨了 JavaScript 中的 DOM 操作。从访问元素到处理事件，从修改样式到创建新元素，我们以简单直接的方式涵盖了 DOM 操作的基本概念。

请记住，DOM 操作是创建动态和交互式网页的核心。通过掌握这些基本技术，你将能够构建引人入胜且用户友好的 Web 应用程序。随着你继续进行你的 JavaScript 学习之旅，更多的练习与实践将加深你对这些概念的理解，为你成为一名成功的 Web 开发者铺平道路。

浏览器中的 JavaScript 代码使用事件驱动编程模式。这意味着当浏览器中发生特定的 DOM 事件时，将执行一段代码作为对该操作的响应。

在本文中，我将帮助你理解如何使用 JavaScript 监听和响应 DOM 事件。

如果你需要复习一下 DOM，我已经写了一篇文章来解释什么是 DOM 以及 JavaScript 如何与之交互。

什么是 DOM 事件，它们为什么有用

DOM 事件是浏览器暴露的信号，你可以利用这些信号运行一段 JavaScript 代码。

这些 DOM 事件会在用户与我们创建的应用程序进行交互时发生，例如点击按钮或在输入框中输入字母。

作为 web 开发人员，你可以指示 JavaScript 监听特定事件，并对该事件做出响应。

例如：

• 点击按钮时，更改段落文本。
• 提交表单时，使用 Fetch API 发送 POST 请求。

如何监听 DOM 事件

要监听事件，需要使用 addEventListener() 方法将事件监听器附加到元素上。

addEventListener() 方法接受两个参数：

• 要监听的事件 type
• 事件触发时要运行的函数

Element.addEventListener(type, function);

回到示例，假设你想在点击按钮元素时更改段落文本，你可以这样做：

<body>
  <p id="myParagraph">This is an example paragraph</p>
  <button id="changeText">Change Text</button>
  <script>
    const button = document.querySelector('#changeText');

    function newText(event) {
      const p = document.querySelector('#myParagraph');
      p.innerText = 'The text has been changed';
    }

    button.addEventListener('click', newText);
  </script>
</body>

要在 HTML 文档中插入 JavaScript 代码，我们需要使用 script 标签，如上图所示。

使用 document.querySelector() 方法选择按钮元素，然后在该元素上调用 addEventListener() 方法，为按钮附加一个事件监听器。

首先，指定要监听的事件类型 type，在本例中为 click 事件。然后，指定该事件发生时要运行的函数。

在上面的代码中，当 click 事件被触发时，newText 函数将被执行。

事件监听器还将发送一个 event 对象，其中包含触发事件的相关信息。这就是为什么在上面的 newText 函数中有一个 event 参数。

你可以将事件记录到控制台，查看其详细信息：

function newText(event) {
  console.log(event);
}

如果你再次点击按钮，将得到以下输出结果：

根据事件触发时要做的事情，你可能需要使用 event 对象中包含的信息。

在这里，我们要做的只是更改段落文本，因此不需要 event 对象。稍后，我们将在处理键盘事件时看到使用 event 对象的示例。

在浏览器中可以监听的事件有很多。以下是开发 web 应用时可能需要的一些最常见事件：

如果你想阅读 DOM 事件类型的完整列表，可以访问此页面。

DOM 事件分为多个类别。在此，我们将只介绍两个在项目中最常用的事件：键盘事件和鼠标事件。

键盘事件

对于键盘，你可以跟踪按下和松开键时分别运行的 keydown 和 keyup 事件。

举例说明，请在控制台运行以下代码：

document.addEventListener('keydown', event => {
  console.log(`A key is pressed: ${event.key}`);
});

document.addEventListener('keyup', event => {
  console.log(`A key is released: ${event.key}`);
});

运行上述代码后，慢慢按下键盘上的一个键，然后慢慢松开。

你应该会看到如下日志输出：

请注意 “keydown” 日志是如何在你按下按键时立即显示的，而 “keyup” 日志只有在你松开按键时才会显示。

键盘事件通常会附加到 document 对象而不是特定元素上，因为整个网站都应能监听到该事件。

鼠标事件

除了键盘事件，DOM 还提供了一种跟踪鼠标事件的方法。

最常见的鼠标事件有：

• mousedown - 鼠标按钮被按下
• mouseup - 鼠标按钮被释放
• click - 点击事件
• dblclick - 双击事件
• mousemove - 当鼠标移动到元素上时
• contextmenu - 打开上下文菜单时，例如单击鼠标右键时

同样，你可以直接在 document 对象中添加事件监听器来测试这些事件：

document.addEventListener('mousedown', event => {
  console.log(`The mouse is pressed`);
});

document.addEventListener('mouseup', event => {
  console.log(`The mouse is released`);
});

运行上面的代码，然后点击浏览器中的任意位置。你应该会看到 mousedown 和 mouseup 事件分别被记录下来。

如何移除事件监听器

要移除附加到元素上的事件监听器，需要调用 removeEventListener() 方法，并传递事件的 type 和你传递给 addEventListener() 方法的 function，如下所示：

button.removeEventListener('click', newText);

上述代码可以从 button 元素中移除 “click” 事件监听器。请注意，你需要在元素上调用 removeEventListener() 方法，同时将函数 newText 传递给该方法。

要正确地移除事件监听器，需要为事件附加函数引用。如果向 addEventListener() 方法传递一个无名函数，就无法移除该事件：

button.addEventListener('click', function (event) {
  alert('Button save is clicked');
});

如果没有上面例子中的函数名，就无法移除事件监听器。

如何使用 HTML 属性监听事件

除了使用 addEventListener() 方法外，你还可以通过在 HTML 元素中添加 on[eventname] 属性来监听事件。

例如，假设你想监听按钮点击，你可以为按钮添加 onclick 属性，如下所示：

<body>
  <button onclick="handleClick()">Click Me!</button>
  <script>

    function handleClick(event) {
      alert('The button is clicked!');
    }
  </script>
</body>

在上面的按钮元素中，我们添加了 onclick 属性，并将 handleClick() 函数传递给它。

当我们点击按钮时，`handleClick()` 函数将被执行。

你也可以使用 JavaScript 添加 onclick 属性，如下所示：

<body>
  <button id="myBtn">Click Me!</button>
  <script>
    const myBtn = document.querySelector('#myBtn');
    myBtn.onclick = handleClick;

    function handleClick(event) {
      alert('The button is clicked!');
    }
  </script>
</body>

在这里，我们使用 JavaScript 将 handleClick 函数的引用赋值给 onclick 属性。

要删除 onclick 属性，可以将该属性赋值为空：

const myBtn = document.querySelector('#myBtn');
myBtn.onclick = null;

你应该使用哪一种

如你所见，有两种方法可以监听 DOM 事件：addEventListener() 方法和 on[eventname] HTML 属性。你应该使用哪一种呢？

答案是，当你需要更多扩展性时，可以使用 addEventListener() 方法，而当你希望事情简单化时，可以使用 on[eventname] 方法。

在开发 web 应用程序时，.html 文件只应作为页面的结构，而 .js 文件则应定义 web 应用程序的任何行为。

为了使应用程序更易于维护和扩展，JavaScript 应能访问 HTML 元素，但 HTML 元素不能执行 JavaScript 函数。这就是推荐使用 addEventListener() 方法的原因。

但是，addEventListener() 并不是没有代价的，这使得代码的阅读相当繁琐。

使用 on[eventname] 属性时，你只需在 HTML 元素中指定函数名称：

<body>
  <button onclick="handleClick()">Click Me!</button>
  <script>

    function handleClick(event) {
      alert('The button is clicked!');
    }
  </script>
</body>

但使用 addEventListener() 方法时，需要查询所需的元素，调用该方法，然后指定要运行的事件和回调函数：

<body>
  <button id="myBtn">Click Me!</button>
  <script>
    const myBtn = document.querySelector('#myBtn');
    myBtn.addEventListener('click', handleClick);

    function handleClick(event) {
      alert('The button is clicked!');
    }
  </script>
</body>

如上所示，在使用 on[eventname] 属性时，可以少写一些代码。

虽然这看起来无关紧要，但当你在大型应用程序中使用大量 HTML 和 JS 文件时，这可以是一件重要的事情。

此外，addEventListener() 方法还允许你为同一元素附加多个监听器，如下所示：

<body>
  <button id="myBtn">Click Me!</button>
  <script>
    const myBtn = document.querySelector('#myBtn');

    myBtn.addEventListener('click', handleClick);

    myBtn.addEventListener('click', handleClickTwo);

    function handleClick() {
      console.log('Run from handleClick function');
    }

    function handleClickTwo() {
      console.log('Run from handleClickTwo function');
    }
  </script>
</body>

点击上面的按钮时，JavaScript 将同时执行两个事件监听器。

而使用 onclick 属性则无法做到这一点，因为每次只能指定一个函数作为引用：

<body>
  <button id="myBtn">Click Me!</button>
  <script>
    const myBtn = document.querySelector('#myBtn');

    myBtn.onclick = handleClick;
      
    // 当你把一个新的函数赋给 onclick，
    // 旧的函数被覆盖

    myBtn.onclick = handleClickTwo;

    function handleClick() {
      console.log('Run from handleClick function');
    }

    function handleClickTwo() {
      console.log('Run from handleClickTwo function');
    }
  </script>
</body>

但我从未遇到过需要两次监听同一事件的情况，因此这一优势可能根本没有用处。

结语

通过浏览器暴露的 DOM 事件，你可以以适当的方式响应用户操作。

这种使用事件监听器来完成特定任务的模式被称为事件驱动编程，在使用 JavaScript 开发 web 应用程序时会经常用到这种模式。

有两种方法可以监听事件：使用 addEventListener() JavaScript 方法和 on[eventname] HTML 属性。这两种方法各有利弊，因此你最好都能熟悉。

如果你喜欢这篇文章，并希望将自己的 JavaScript 技能提高到一个新的水平，我建议你点击这里查看我的新书《Beginning Modern JavaScript》。

本书旨在让初学者轻松学习 JavaScript，让所有希望学习 JavaScript 的人都能轻松掌握。它以循序渐进的指南帮助你了解如何使用 JavaScript 创建动态 web 应用程序。

我在此承诺：你将真正感觉到自己了解自己在用 JavaScript 做什么。

下次见！

对于一名高效工作的前端开发者来说，了解 JavaScript 中的 DOM 和事件是如何运行非常重要。

本文将讲解 DOM 是什么以及如何运行的。

DOM 是什么

DOM 的全称是文档对象模型，是连接 JavaScript 和 web 浏览器之间的接口。

借助 DOM，你可以编写 JavaScript 来创建、修改、删除 HTML 元素，设置样式、类别和属性，监听以及响应事件。

HTML 文档生成 DOM 树之后，你就可以与之交互。DOM 是一个复杂的 API，包含与 DOM 树交互的方法和属性。

你可以在这个网站视觉化 DOM。

DOM 是如何运行的 – 幕后揭秘

DOM 的组织形式非常巧妙。顶层元素被称作EventTarget。你可以借助下图更好地了解工作原理。

EventTarget接口由可以接收事件、并且可以创建监听器的对象实现。换句话说，任何事件目标都会实现与该接口有关的这三个方法。虽然 Element 及其子项、Document 和 Window 是最常见的事件目标（EventTarget），但其他对象也可以是。

Window 代表了浏览器窗口。所有全局的 JavaScript 对象、函数和变量都自动归属于 window 对象。全局变量是 window 对象的属性，全局函数是 window 对象的方法。即便是文档对象（HTML DOM）也是 window 对象的属性。

window.document.getElementById("header");

//两者相同

document.getElementById("header");

Nodes 归属于 DOM（即文档对象模型）。在 DOM 中，如元素、属性、文本等都被组织在一个分层级的树状结构中，相互为子或父元素。这些个体就被称为 node（节点）。

上图中的 Node 可以被 JavaScript 对象表示。我们通常使用document.querySelector(), document.getElementById()等方法来调用这些节点。

现在让我们看看文档。

如何使用 DOM 来选择、创建和删除元素

借助 DOM，我们可以使用 JavaScript 来选择、删除和创建元素。

如何选择元素

JavaScript 中有各种各样的方式来选择 HTML 元素：

• document.getElementById();
• document.getElementByClassName();
• document.getElementByTagName();
• document.querySelector();
• document.querySelectorAll();

如何使用 document.getElementById() 方法

getElementById()方法返回的元素 id 与传入的字符串匹配。因为 HTML 元素的 id 是唯一值，所以这种方式的速度最快。

例子:

const ele = document.getElementById("IDName");
console.log(ele); // 打印对应id名称的元素

如何使用document.getElementByClassName()方法

document.getElementByClassName()返回一个HTMLCollection，这个集合中的元素类名与传入的字符串匹配。我们可以同时搜索多个类别名称，传入的时候用空格隔开，它会实时返回的 HTMLCollection。

“实时”是什么意思？就是说，一旦我们给传入的类名添加一个元素，HTMLCollection 会自动获取这个新的元素。

例子:

const ele = document.getElementByClassName("ClassName");
console.log(ele); // 打印实时HTMLCollection

如何使用document.getElementByTagName();方法

document.getElementByTagName()返回一个HTMLCollection，这个集合中的元素标签与传入的字符串匹配。可以对任何 HTML 元素调用这个方法，它会返回实时的 HTMLCollection。

例子:

const paragraph = document.getElementByTagName("p");
const heading = document.getElementByTagName("h1");

console.log(paragraph); // p 元素 HTMLCollection
console.log(heading); // h1 元素 HTMLCollection

如何使用 document.querySelector() 方法

document.querySelector()返回满足传入条件的第一个 HTML 元素。在这个方法中我们可以传入类名、id和标签名。参见例子：

const id = document.querySelector("#idname"); // 使用id
const classname = document.querySelector(".classname"); // 使用类名
const tag = document.querySelector("p"); // 使用标签名

选择规则：

• 若使用类别名，在开头要添加(.)，如 (".classname")
• 若使用 id， 在开头要添加(#)，如("#id")
• 若使用标签，可以直接使用标签名，如("p")

如何使用 document.querySelectorAll() 方法

document.querySelectorAll()是querySelector方法的延伸。这个方法返回所有匹配传入值的元素。该方法返回一个不会实时更新的 NodeList。

const ele = document.querySelectorAll("p");
console.log(ele); // 返回 p 标签的 NodeList

注意： HTMLCollection 是实时更新的，但是 NodeList 并不是。

如何创建元素

你可以在 JavaScript 中创建 HTML 元素，并且动态地添加到 HTML 中。可以使用document.createElement()来添加元素，在括号内传入元素的标签名。

元素创建成功之后，可以添加类名，属性以及该元素的文本内容。

例子：

const ele = document.createElement("a");
ele.innerText = "Click Me";
ele.classList.add("text-left");
ele.setAttribute("href", "www.google.com");

// 类似于以下标记
// <a href="www.google.com">Click Me</a>

// 在 HTML 中更新已有的元素
document.querySelector(".links").prepend(ele);
document.querySelector(".links").append(ele);
document.querySelector(".links").before(ele);
document.querySelector(".links").after(ele);

在上述例子中，我们在 JavaScript 中创建了一个 anchor 标签，并且添加了类名和属性。在 HTML 中更新这个元素有以下四种方法：

• prepend()：在父节点的第一个子节点之前插入数据
• append()：对位于最后一个索引的元素之后插入数据或内容
• before()：在选定的元素前插入数据
• after()：在选定的元素后插入数据。也可以说是在匹配的其父节点的子节点列表之后插入。（可以不作为元素插入，作为相邻的文本内容插入。）

如何删除元素

我们已经了解了如何使用 JavaScript 创建元素以及如何将它添加到 HTML 中。但是如果我们想要删除一个 HTML 元素呢？很简单！只需要对这个元素调用remove()方法。

例子：

const ele = document.querySelector("p");

// ele被点击后就会被删除
ele.addEventListener('click', function(){
	ele.remove();
})

如何通过 JavaScript 来控制 CSS

我们已经学习了如何通过 JavaScript 来控制 HTML，现在我们来学习如何通过 JavaScript 来控制 CSS，帮助你动态地更改页面。

如果想要通过点击一个元素，就更改这个元素的背景颜色的话，可以通过 JavaScript 来实现。

语法如下：

const ele = document.querySelector("desired element");

ele.style.propertyName = value;
// e.g.
//ele.style.color = red;

当使用 JavaScript 来修改 CSS 属性的时候，需要注意在 CSS 中 - 用来连接单词，如 background-color但在 JavaScript 中我们使用 backgroundColor（驼峰样式）。

例子：

const ele = document.querySelector("div");
ele.style.backgroundColor = "red";

假设你已经给项目编写好了 CSS，你希望通过 JavaScript 来添加类名，可以使用classList。

例子：

const ele = document.querySelector(".link");
ele.classList.add("bg-red"); // 为已经存在的列表添加 bg-red 类名
ele.classList.remove("pb-4");// 为已经存在的列表删除 pb-4 类名
ele.classList.toggle("bg-green"); // 将 bg-red 类切换到现有的类列表中，这意味着如果它已经存在，那么它将被删除，如果它不存在，它将被添加。

当我们使用classList时，直接对元素进行添加、删除或切换类。这就像在更新现有的类。

element.className的特别之处在于，它删除了所有现有的类别，然后添加一个新的类别。

例子：

const ele = document.querySelector(".link");
ele.classList.add("bg-red"); // 在现有的类别中添加 bg-red 类别
ele.classList.remove("pb-4");//从现有的类别中删除 pb-4 类别

ele.className = "p-10"; // 删除所有现有类别，添加 p-10

如何使用事件处理器

对象状态的改变被称作为事件。对事件做出反应的过程被称为事件处理。

当用户点击鼠标、让鼠标在元素上滑过、按键等时，事件就发生了。所以当你想在事件发生时做一些事情的话，就可以使用事件处理器来引发这个事件。

我们使用事件处理器在事件发生的时候来执行一些 JavaScript 代码。在 JavaScript 中有许多不同的事件处理器（这里是一份简单的列表），但将事件处理器添加到元素的方法相同。

语法如下：

const ele = document.querySelector("a");

ele.addEventListener("event", function(){
	// 回调函数
});

你可以使用的事件

• click（点击鼠标）
• mouseover（鼠标移动到某个元素）
• mouseout（鼠标离开某个元素）
• keypress（按下键盘）
• keydown（按下键盘）

这里是使用 “click” 事件的例子：

const ele = document.querySelector("a");

ele.addEventListener("click", function(){
	ele.style.backgroundColor = "pink";
});

事件传播：冒泡和捕获

事件传播决定了元素接收事件的顺序。有两种处理 DOM 中事件传播顺序的方式：事件冒泡和事件捕获。

什么是事件冒泡

当一个事件发生在一个组件时，首先会在该组件上触发事件处理器，然后传播到它的父组件，一直向上到其他的父组件。

事件处理器的默认情况时从中心组件一路向外到最外层的组件传播。

什么是事件捕获

这个过程和冒泡刚好相反。事件处理器首先作用在父组件，然后再作用到触发处理器的组件。

简言之，事件首先由最外层的元素捕获，然后传递到最内层的元素。这个过程也被称作涓涓细流。

让我们看一下下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <style>
        nav{
            display: flex;
            justify-content: center;
            padding: 30px;
        }

        nav li{
            list-style: none;
            padding: 5px;
        }

        nav li a{
            text-decoration: none;
            padding: 20px;
        }
    </style>
</head>
<body>
    
    <div>
        <nav>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </nav>
    </div>

    <script>
        const navbar = document.querySelector("nav");
        navbar.addEventListener('click', function(){
            navbar.style.backgroundColor="green"
        });

        const anchor = document.querySelector("a");
        anchor.addEventListener("click", function(){
            anchor.style.backgroundColor="pink";
        })
    </script>
</body>
</html>

代码效果如图：

仔细看上面的代码示例，我分别在nav标签和anchor标签添加了事件处理器：当你点击nav的时候背景色会变成绿色，而当点击anchor标签的时候，背景色会看成粉色。

但是当你点击anchor标签的时候，anchor 和 nav 的背景色都发生了变化。这是因为事件冒泡。

当你只点击 nav 元素的时候发生的事情：

当你只点击 anchor 元素的时候发生的事情：

停止事件传播的方式是在事件发起的元素的事件处理器上使用 stopPropagation()。这样就可以阻止 nav 元素因为上面的原因被激活。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <style>
        nav{
            display: flex;
            justify-content: center;
            padding: 30px;
        }

        nav li{
            list-style: none;
            padding: 5px;
        }

        nav li a{
            text-decoration: none;
            padding: 20px;
        }
    </style>
</head>
<body>
    
    <div>
        <nav>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </nav>
    </div>

    <script>
        const navbar = document.querySelector("nav");
        navbar.addEventListener('click', function(){
            navbar.style.backgroundColor="green"
        });

        const anchor = document.querySelector("a");
        anchor.addEventListener("click", function(e){
            e.stopPropagation();
            anchor.style.backgroundColor="pink";
        })
    </script>
</body>
</html>

如何遍历 DOM

“优秀的 JavaScript 开发者应该知道如何遍历 DOM — 即从一个元素选择到另一个元素的行为 ” – Zell Liew

现在我们来看看为什么遍历会比document.querySelector()方法好用，以及如何像专家一样遍历。

有三种遍历 DOM 的方式：

• 向上
• 向下
• 相临

如何向上遍历 DOM

有两种向上遍历 DOM 的方式：

• parentElement
• closest

parentElement是选取父元素的属性，如下：

const ele = document.querySelector("a");
console.log(ele.parentElement); // <div>

parentElement可以完美地选择上一层的元素，而closest可以让你选择上几层的元素。 closest可以选择符合选择器最近的祖先元素。

使用closest的例子：

<article id="target">
  <h1 id="heading">This is the main heading</h1>
  <div id="outer-div">
    This is the outer div
    <div id="inner-div">This is the inner div</div>
  </div>
</article>

const innerDiv = document.querySelector("#inner-div");
console.log(innerDiv.closest("#target")); // article#target

在上述代码中我们选择离#inner-div最近并且 id 为#target的元素。

如何向下遍历 DOM

我们可以在选择器中使用children方法来向下遍历，就可以选择到直属子元素。

例子：

<div>
    <a href="#">Link-1</a>
    <a href="#">Link-2</a>
    <a href="#">Link-3</a>
    <a href="#">Link-4</a>
</div>

const ele = document.querySelector("div");
const child = ele.children;

console.log(child); // 返回 HTMLCollection
// div 中的 4 个元素

如何遍历相邻的 DOM

遍历相邻的 DOM 很有趣，有两种主要的方法：

• previousElementSibling
• nextElementSibling

使用previousElementSibling方法，我们可以选择 HTML 中的前一个元素：

<div>
    <a href="#">Link-1</a>
    <h1>Heading</h1>
</div>

const ele = document.querySelector("h1");
console.log(ele.previousElementSibling); // <a href="#">Link-1</a>

使用nextElementSibling，我们可以选择 HTML 中的后一个元素：

<div>
    <a href="#">Link-1</a>
    <h1>Heading</h1>
</div>

const ele = document.querySelector("a");
console.log(ele.nextElementSibling); // <h1>Heading</h1>

总结

希望你已经了解 JavaScript 中的 DOM 是如何工作的，感谢阅读！

你可以在以下地方关注我：

• Twitter
• LinkedIn
• Instagram

如果你刚开始学习 JavaScript，那么你可能听说过 DOM。但它到底是什么？

在本文中，我将解释 DOM 是什么，并提供一些 JavaScript 代码示例。

我们将了解如何从 HTML 文档中选择元素、如何创建元素、如何更改内联 CSS 样式以及如何监听事件。

DOM 是什么

DOM 代表文档对象模型。它是一个编程接口，允许我们从文档中创建、更改或删除元素。我们还可以为这些元素添加事件以使我们的页面更​​加动态。

DOM 将 HTML 文档视为节点树。一个节点代表一个 HTML 元素。

让我们看一下这段 HTML 代码，以更好地理解 DOM 树结构。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM tree structure</title>
  </head>
  <body>
    <h1>DOM tree structure</h1>
	<h2>Learn about the DOM</h2>
  </body>
</html>

我们的文档称为根节点，其中包含一个子节点，即 <html> 元素。 <head> 元素包含两个子元素，即 <head> 和 <body> 元素。

<head> 和 <body> 元素都有自己的子元素。

这是可视化此节点树的另一种方法。

我们可以访问文档中的这些元素并使用 JavaScript 对它们进行更改。

让我们看几个示例，了解如何使用 JavaScript 处理 DOM。

如何选择文档中的元素

在 HTML 文档中选择元素有几种不同的方法。

在本文中，我们将重点介绍其中三种方法：

• getElementById()
• querySelector()
• querySelectorAll()

getElementById()

在 HTML 中，id 被用作 HTML 元素的唯一标识符。这意味着你不能为两个不同的元素使用相同的 id 名称。

这是不正确的：

<p id="para">This is my first paragraph.</p>
<p id="para">This is my second paragraph.</p>

你必须确保这些 id 是唯一的，如下所示：

<p id="para1">This is my first paragraph.</p>
<p id="para2">This is my second paragraph.</p>

在 JavaScript 中，我们可以通过引用 id 名称来获取 HTML 标签。

document.getElementById("id name goes here")

此代码告诉计算机获取 id 为 para1 的 <p> 元素并将该元素打印到控制台。

const paragraph1 = document.getElementById("para1");
console.log(paragraph1);

如果我们只想读取段落的内容，那么我们可以使用 console.log() 中的 textContent 属性。

const paragraph1 = document.getElementById("para1");
console.log(paragraph1.textContent);

querySelector()

你可以使用此方法查找具有一个或多个 CSS 选择器的元素。

我已经为我最喜欢的电视节目创建了这个 HTML 示例：

<h1>Favorite TV shows</h1>
<ul class="list">
  <li>Golden Girls</li>
  <li>Archer</li>
  <li>Rick and Morty</li>
  <li>The Crown</li>
</ul>

如果我想找到 h1 元素并将其打印到控制台，那么我可以在 querySelector() 中使用该标签名称。

const h1Element = document.querySelector("h1");
console.log(h1Element);

如果我想以 class="list" 为目标以将无序列表打印到控制台，那么我将在 querySelector() 中使用 .list。

在 list 前面的 . 告诉计算机以一个类名为目标。如果你想定位一个 id，那么你可以在名称前使用 # 符号。

const list = document.querySelector(".list");
console.log(list);

querySelectorAll()

此方法查找与 CSS 选择器匹配的所有元素并返回所有这些节点的列表。

如果我想在我们的列表中查找所有 <li> 项目，我将使用 > 查找 <ul> 的所有子级。

const listItems = document.querySelectorAll("ul > li");
console.log(listItems); 

If we wanted to print out the actual如果我们想打印出所有电视节目 <li> 项目，我们可以使用 forEach() 遍历 NodeList 并打印出每个项目。

const listItems = document.querySelectorAll("ul > li");

listItems.forEach((item) => {
  console.log(item);
});

如何向文档添加新元素

我们可以使用 document.createElement() 将新元素添加到 DOM 树中。

让我们看一下这个例子：

<h1>Reasons why I love freeCodeCamp:</h1>

现在，我在页面上只有一个 <h1> 标签，但我想使用 JavaScript 在 <h1> 标签下添加我喜欢 freeCodeCamp 的原因列表。

我们可以首先使用 document.createElement() 创建一个 <ul> 元素。我会把它赋值给变量 unorderedList。

let unorderedList = document.createElement("ul");

然后我们需要使用 appendChild() 方法将该 <ul> 元素添加到文档中。

document.body.appendChild(unorderedList);

下一部分是使用 createElement() 方法在 <ul> 元素内添加几个 <li> 元素。

let listItem1 = document.createElement("li");

let listItem2 = document.createElement("li");

然后我们可以使用 textContent 属性为我们的列表项添加文本。

let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";

let listItem2 = document.createElement("li");
listItem2.textContent = "It's awesome";

最后一部分是使用 appendChild() 方法，以便可以将列表项添加到无序列表中。

let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";
unorderedList.appendChild(listItem1);

let listItem2 = document.createElement("li");
listItem2.textContent = "It's awesome";
unorderedList.appendChild(listItem2);

这就是所有代码：

let unorderedList = document.createElement("ul");
document.body.appendChild(unorderedList);

let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";
unorderedList.appendChild(listItem1);

let listItem2 = document.createElement("li");
listItem2.textContent = "It's awesome";
unorderedList.appendChild(listItem2);

这是页面上输出的样子：

如何使用 Style 属性更改内联 CSS 样式

style 属性使你能够更改 HTML 文档中的 CSS。

在此示例中，我们将使用 style 属性将 h1 文本从黑色更改为蓝色。

这是我们的 HTML。

<h1>I was changed to blue using JavaScript</h1>

我们首先需要使用 querySelector() 方法获取 h1 标签。

const h1 = document.querySelector("h1");

然后我们使用 h1.style.color 将 h1 文本从黑色更改为蓝色。

const h1 = document.querySelector("h1");
h1.style.color = "blue";

这是浏览器中的结果：

你可以使用此 style 属性更改许多 CSS 内联样式，包括 background-color、border-style、font-size 等。

如何使用 addEventListener() 监听页面上的事件

此方法允许你将事件附加到 HTML 元素（如按钮）。

在此示例中，当用户单击按钮时，将弹出一条警告消息。

在我们的 HTML 中，我们有一个 id 为 btn 的按钮元素。

  <button id="btn">Show alert</button>

我们可以使用 getElementById() 方法在 JavaScript 中定位该元素，并将其分配给名为 button 的变量。

const button = document.getElementById("btn");

addEventListener() 接受一个事件类型和一个函数。事件类型将是 click 事件，该函数将触发警报消息。

这是将事件侦听器添加到 button 变量的代码。

button.addEventListener("click", () => {
  alert("Thank you for clicking me");
});

这是完整的代码，你可以在其中单击按钮并弹出警报消息：

如何在实际项目中使用 DOM

以上对你可以使用的一些 DOM 方法的简要介绍，还有很多我们没有在本文中介绍的示例。

如果你想开始构建初学者 JavaScript 项目并使用 DOM，那么我建议您查看我的 40 JavaScript Projects for Beginners 文章。

总结

DOM 代表文档对象模型，是一种编程接口，允许我们从文档中创建、更改或删除元素。我们还可以为这些元素添加事件以使我们的页面更​​加动态。

你可以使用 getElementById()、querySelector() 和 querySelectorAll() 等方法在 JavaScript 中选择元素。

如果要向文档添加新元素，可以使用 document.createElement()。

你还可以使用 style 属性更改元素的内联 CSS 样式。

如果你想向按钮等元素添加事件，则可以使用 addEventListener()。

我希望你喜欢这篇文章，并祝你在 JavaScript 之旅中好运。

开始之前，请允许我分享一个关于我是如何了解到 DOM 的趣事。

我是如何了解到 DOM 的

做了几个月的 web 开发之后，我还在学习古老的 HTML 和 CSS。我偶然地发现了 w3schools 的一个 DOM 课程，其中第一个示例是关于一个灯泡和两个按钮。

点击其中一个按钮会“打开”灯泡，点击另一个按钮则会“关闭”灯泡。我真的被搞晕了。

网站上的按钮为什么可以打开灯泡？怎么回事！？

我甚至为此发了个 Twitter。然后我发现他们不过是改变了图片元素的 src 属性，我心都碎了。不过无论如何，这事让我爱上了 DOM，它激发了我的求知欲。

如果你耐心读完本文，并动手实践其中涉及的示例，我保证 DOM 操作再也难不倒你。准备好了吗？开始吧！

为了便于理解，我把相关知识归纳为以下几个章节。

• DOM 的定义及基本概念
• 如何选中 DOM 中的元素
• 如何遍历及移动 DOM 中的元素
• 如何编辑 DOM 中的元素
• 指定样式
• DOM 的事件处理

喝杯咖啡放松一下，跟着我一起学习下面的章节。

DOM 的定义及基本概念

什么是 DOM？

DOM（Document Object Model——文档对象模型），可以简单理解为浏览器创建的节点树，每个节点有自己的属性和方法，可以通过 JavaScript 来操作这些属性、调用这些方法。

操作 DOM 的能力是 JavaScript 最独特和有用的特性之一。

下图是 DOM 树的视觉表示。

document 对象是 DOM 的核心/基础，执行任何形式的 DOM 操作都要访问 document 对象。

根元素 html 是 document 对象的子节点。

下一行是 body 和 head 元素，它们互为兄弟节点，并且都是 html 的子节点。

head 元素下面有一个 title 元素，它是 head 元素的子节点，同时也是文本节点“my text”的父节点。

body 元素下面有两个元素（a 元素和 h1 元素），它们互为兄弟节点，并且都是 body 元素的子节点。

最后，href 属性和文本节点“my link”都是 a 元素的子节点，同样的，文本节点“My header”是 h1 元素的子节点。

这些对于新手来说可能看起来有些复杂，不过请相信我——熟能生巧。

如何选中 DOM 中的元素

为了操作 DOM 中的元素，需要先选中指定的元素，幸好，我们有四种常用方式可以用来选中元素。

getElementById() 方法

最常见的方式是通过 id 属性来选中元素。

下面的示例中，getElementById() 方法通过 id="master" 来查找元素。

<p id="master">i love javascript</p>

<script>
	const masterEl = document.getElementById('master')
	console.log(masterEl) //<p id="master">i love javascript</p> 
</script>

id 是区分大小写的，比如：“master”和“Master”就是两个完全不同的 id。

选中了一个元素之后，就可以给它添加一些样式、编辑它的属性、遍历它的父元素或子元素。

getElementsByClassName() 方法

这个方法返回文档中所有类名（class）包含指定值的元素的集合。

例如，下面的 HTML 页面中有三个 class="master2" 的元素，我通过“btn”这个 id 选中了其中的按钮。

点击这个按钮将会选中所有类名包含“master2”的元素，并改变其中第三个元素的 innerHTML 属性值。

<p class="master2">i love javascript</p>
<p class="master2">i love react</p>
<h1 class="master2">i want a job</h1>

<button id="btn">click me</button>

<script>
	const btn = document.getElementById('btn')

	btn.addEventListener('click', function master(){
	   var master = document.getElementsByClassName("master2");
	   master[2].innerHTML = 'i need a job';
	})
</script>

点击按钮前：

点击按钮后：

这里用到了 addEventListener() 方法，稍后会介绍。

getElementsByTagName() 方法

这个方法接收 html 标签名作为参数，根据在文档中出现的先后顺序返回这个标签的所有元素。

下面的代码展示了 getElementsByTagName() 的语法，获取页面中的所有 p 元素、改变第二个 p 元素的内容。

<p>VsCode</p>
<p>Atom</p>
<p>Sublime text</p>
<button id="btn">click me</button>

<script>
	const btn = document.getElementById('btn')

	btn.addEventListener('click', function master(){
		let master = document.getElementsByTagName('p');
		let masterEl = master[1].innerHTML = 'Code editors';
		console.log(masterEl) //Code editors
	})

	//<p>Atom</p> changes to <p>Code editors</p>
</script>

使用 CSS 选择器

.querySelector()

这个方法返回第一个匹配指定选择器的元素，它可以接收所有 CSS 样式选择器作为参数，它可以通过标签名、类名或 ID 来选择元素。

<div id=master>i am a frontend developer</div>

<script>
	const master = document.querySelector("#master") 
</script>

上面的方法接收一个 CSS 选择器作为参数，返回匹配这个选择器的第一个元素。

.querySelectorAll()

这个方法跟上一个方法类似，区别在于它返回的是包含所有匹配元素的节点集合。

<p class="master">React</p>
<p class="master">Vue</p>
<p class="master">Angular</p>

<script>
	const master = document.querySelectorAll(".master") 
	console.log(master[1])  //<p class="master">Vue</p>
</script>

选择 DOM 元素的方法总结

在需要选择 DOM 元素的时候，你有四种不同的方式可以选择，这四种不同方式做的都是同一件事（选择一个或多个元素）。

如果不记得第一种方式，可以用第二种，如果碰巧前两种都忘了，还有第三种、第四种方式可以用。是不是我或者 JavaScript 让我们的生活变得更简单了？:)

我个人建议尽量使用第一种方式或第四种方式中的第一个方法（queryselector）。你之前学习 HTML 的时候应该知道，文档中元素的 id 是不允许重复的，也就是说 id 是文档中元素的唯一标识符。

考虑到这一点，通过 id 来选择元素是“安全”的做法，因为这样你就不会把同样的操作应用在多个不同元素上了（除非你刻意要这样做——当然了，只要你想的话，也可以选择其他方式）。

如何遍历 Document

现在你应该会认同我的说法，即 HTML 文档中的一切都是节点。就连 HTML 元素中的文字也是文本节点。

在 DOM 中，可以利用前面讲到的节点关系（父节点、子节点、兄弟节点等）来遍历节点树、访问节点。

可以创建新节点，并且所有节点都可以被修改或删除。

回顾一下

• 每个节点都有且只有一个父节点，根节点除外（它没有父节点）。
• 一个节点可以有多个子节点。
• 同一个父节点下的子节点互为兄弟节点。

在这个章节中，我们要学习如何获取元素的父节点、兄弟节点以及子节点。为此，我会用到下面这些节点属性。

• parentNode
• childrenNodes
• firstElementChild
• lastElementChild
• nextElementSibling
• previousElementSibling

我会使用下面的 HTML 页面来展示这些节点属性的用法。在第四章节中，我会演示如何操作 DOM。

这就是本文的目的——了解如何操作 DOM。如果不懂如何操作 DOM 的话，了解了选择元素和遍历 DOM 的方法也没什么用处。了解如何为元素添加 CSS 样式、如何创建并追加元素、如何设置 innerHTML 以及如何做事件处理至关重要。

这是本文的重点，请跟着我的脚步，继续前进。

<div id="parent">
	<div id="firstchild">i am a first child</div>
	<p id="secondchild">i am the second child</p>
	<h4>i am alive</h4>
	<h1>hello world</h1>
	<p>i am the last child</p>
</div>  

const parent = document.getElementById('parent').lastElementChild
console.log(parent) //<p>i am the last child</p>

const parent2 = document.getElementById('parent').children[3]
console.log(parent2) //<h1>hello world</h1>

const secondchild = document.getElementById('secondchild')
console.log(secondchild) //<p id="secondchild">i am the second child</p>

console.log(secondchild.parentNode) //<div id="parent">...</div>

console.log(secondchild.nextElementSibling) //<h4>i am alive</h4>

console.log(secondchild.previousElementSibling) //<div id="firstchild">i am a first child</div>

创建元素

上面代码中的 HTML 片段中有一个包含 5 个子元素的父元素，如果想使用 JavaScript 往其中添加一个 div 元素，首先需要调用 createElement() 方法来创建一个新的元素：

const createEl = document.createElement('div')
console.log(createEl) //<div></div>

设置 innerHTML

我们成功创建了一个 div 标签，不过现在其中还没有文本节点，调用 .innerHTML() 方法来为它添加文本节点。

const innerhtml = createEl.innerHTML = 'i am a frontend developer'
console.log(createEl) //<div>​i am a frontend developer​</div>​

在页面中追加元素

目前已经完成了创建元素以及往其中插入文本节点的操作，但是创建出的新元素还没有插入到 DOM 树中。

现在演示如何将创建出的新元素追加到 HTML 页面中，代码如下：

const createEl = document.createElement('div')
const innerhtml = createEl.innerHTML = 'i am a frontend developer'
const parentEl = document.getElementById('parent')
parentEl.appendChild(createEl)

在指定元素之前插入元素

注意上面的控制台打印信息截图，追加的 div 标签子元素自动地插入到了父元素的最下面。

如果出于某种原因想要把元素追加到其它位置该怎么办？也许是第一个元素之前或者是第四个元素之前的位置。这些情况都是很有可能出现的。下方代码把元素插入到当前第一个子元素之前。

我们会用到 insertBefore() 方法，它接收两个参数：document.insertBefore(newNode, existingNode)。

const parentEl = document.getElementById('parent')
const firstchildEl = document.getElementById('firstchild')

const createEl = document.createElement('div')

const innerhtml = createEl.innerHTML = 'i am a frontend developer'

parentEl.insertBefore(createEl, firstchildEl)
console.log(parentEl)

替换子元素

我们使用 replaceChild() 方法将第一个子元素替换为新创建的元素，它接收两个参数：document.replaceChild(newNode, existingNode)。

const firstchildEl = document.getElementById('firstchild')
const parentEl = document.getElementById('parent')

const createEl = document.createElement('div')
const innerhtml = createEl.innerHTML = 'i am a frontend developer'

parentEl.replaceChild(createEl, firstchildEl)

console.log(parentEl)                

移除子元素

我们使用 removeChild() 方法来移除指定元素（这里指的是第一个子元素），它接收一个参数：document.removeChild(element)。

const firstchildEl = document.getElementById('firstchild')
const parentEl = document.getElementById('parent')

parentEl.removeChild(firstchildEl)

console.log(parentEl)

为元素添加 CSS 样式

前面的示例中演示了如何创建元素，并将其追加到指定的父元素。

为了设定元素样式，我们需要为它添加 CSS 类，这里使用 JavaScript 来操作。

我将为你演示如何添加、移除以及切换 CSS 类。

别担心，这并不难，我会为你详细介绍。

添加 CSS 类

现在有一个普通的 HTML 按钮，它的 id 为“master”、没有应用额外样式，如下图：

第一步，为这个按钮创建一个 CSS 样式。

接着，在 JavaScript 代码部分为这个按钮添加一个事件监听器：点击按钮时为这个按钮元素添加“button”类样式。

<style>
	body{
		 background-color: hotpink;
		 display: flex;
		 align-items: center;
	}

	.button{
		 background-color: blueviolet;
		 width: 200px;
		 border: none;
		 font-size: 2rem;
		 padding: 0.5rem;
		 border-radius: 5px;
		 cursor: pointer;
	}
</style>


<button id="master">Click me</button>


const buttonEl = document.getElementById('master')
buttonEl.addEventListener('click', addFunction)

function addFunction(){
	buttonEl.classList.add('button')
}

点击按钮之后，可以看到效果如下，好看吧？

移除 CSS 类

还是使用上面的示例，我们要移除 CSS 类，这次会使用 classList.remove() 方法。也许你已经猜到结果了，对吧？

没错，这个按钮会变回默认样式。

const buttonEl = document.getElementById('master')
buttonEl.addEventListener('click', addFunction)

function addFunction(){
	buttonEl.classList.remove('button')
}

切换 CSS 类

如果不想完全移除这个 CSS 样式，你可能希望能有一种方式让按钮的样式在默认样式和指定样式之间来回切换。

classList.toggle() 方法为这种操作提供了支持。

像 Twitter 之类的社交媒体平台上通常会用到 classList.toggle() 方法，它使得用户可以通过点击按钮为一个帖子点赞，也可以随时点击这个按钮来取消点赞。

可以通过 JavaScript 代码来检查按钮是否包含指定的 CSS 类。

如果按钮包含这个类，点击按钮会将这个类移除，反之亦然。

const buttonEl = document.getElementById('master')
buttonEl.addEventListener('click', addFunction)

function addFunction(){
    buttonEl.classList.toggle('button')
}

事件处理

什么是 HTML 事件？

它是发生在 HTML 元素上的一些“事件”，比如按钮点击、文本输入等等。当事件触发时，就会执行对应的称为事件处理程序的 JavaScript 代码。

这些事件处理程序都是 JavaScript 函数，当元素触发某个事件时，事件处理器函数就会执行。

事件监听器

到目前为止，我们基本上在之前的每个示例中都用到了事件监听器，可见它在操作 DOM 的过程中是多么重要。

为了给一个元素或者 DOM 对象添加事件监听器，需要用到 addEventListener() 方法。使用这个方法要优于以前在 html 标签中绑定事件监听器的做法。

这样能让 JavaScript 和 html 分离，使得代码更简洁、可读性更强。

我很认同将各类代码分离的做法，如果你的想法和我一样，那你应该会更喜欢这种绑定事件监听器的方式。

事件监听器接收三个参数。

• 第一个参数是事件类型，如“click”。
• 第二个参数是将要执行的函数。
• 第三个参数是一个布尔值，指定使用事件冒泡还是事件捕获。 此参数是可选的

可以为一个元素添加多种事件的处理程序。

也可以为一个元素的一种事件添加多个事件处理程序，比如给“click”事件添加两个事件处理程序。

总结

学会如何使用 JavaScript 操作 DOM 是非常重要的，这是必备的知识。

如果你理解了文中的示例和插图，可以自己构建一个小项目试试。如果想要成为优秀的开发者，动手实践至关重要。

原文：How to Manipulate the DOM - the Ultimate Beginner's Guide，作者：Chibuike Okere

不同的浏览器引擎运行起来会有些许差异，针对特定浏览器的具体内容会更加复杂。本文并不会涉及某个浏览器的底层原理，而是讨论一些通共的原则。

浏览器如何渲染网页

我们先来了解一下浏览器是如何对网页进行渲染的：

1. 浏览器将从服务器获取的HTML文档构建成文档对象模型DOM(Document Object Model).
2. 样式将被载入和解析，构成层叠样式表模型CSSOM(CSS Object Model).
3. 在DOM和CSSOM之上，渲染树(rendering tree)将会被创建，代表一系列将被渲染的对象（这在Webkit内核中被称为renderer或者渲染对象render object，在Gecko内核中被称为框架frame）。渲染树映射除了不可见元素（例如<head>或者含有display:none;的标签）外的所有DOM结构。每一段文本字符串都将划分在不同的渲染对象中，每一个渲染对象都包含了它相应的DOM对象以及计算后的样式。换句话讲，渲染树是DOM的直观表示。
4. 渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout.浏览器使用一种流式处理的方法，只需要一次pass绘制操作就可以布局所有的元素（tables需要多次pass绘制，pass表示像素处理和顶点处理）。
5. 最后布局完成，渲染树将转化为屏幕上的实际内容，这一步被称为绘制painting.

重绘Repaint

当页面元素样式的改变不影响元素在文档流中的位置时（例如background-color, border-color,visibility）,浏览器只会将新样式赋予元素并进行重绘操作。

回流Reflow

当改变影响文档内容或者结构，或者元素位置时，回流操作就会被触发，一般有以下几种情况：

• DOM操作（对元素的增删改，顺序变化等）；
• 内容变化，包括表单区域内的文本改变；
• CSS属性的更改或重新计算；
• 增删样式表内容；
• 修改class属性；
• 浏览器窗口变化（滚动或缩放）；
• 伪类样式激活（:hover等）。

浏览器如何优化渲染

浏览器本身会尽可能地减少其重绘或回流的次数，只更改必要的元素。例如一个position设置为absolute/fixed的元素的更改只会影响其本身和其子元素，而static的元素变化则会影响其之后的所有页面元素。

另外一项优化的技术则是在JavaScript代码运行时，浏览器会缓存所有的变化，然后只通过一次pass绘制操作来应用这些更改。例如下面这段代码只会触发一次重绘和回流：

var $body = $('body');
$body.css('padding', '1px'); // 触发重绘与回流
$body.css('color', 'red'); // 触发重绘
$body.css('margin', '2px'); // 触发重绘与回流
// 最终只有一次重绘和回流被触发

然而，根据我们之前提到过的，获取某个元素的属性将会触发强制回流。比如我们在刚才的代码中加上一句读取元素属性的操作：

var $body = $('body');
$body.css('padding', '1px');
$body.css('padding'); // 此处触发强制回流
$body.css('color', 'red');
$body.css('margin', '2px');

结果就会有两次回流发生。因此，我们应该尽量合并读取元素属性的操作来优化性能。

当然也有我们不得不触发强制回流的情况。比如说对同一个元素的margin-left属性进行两次操作——开始的时候赋值100px的距离，之后为了实现动画效果，再加上transition属性将距离改变到50px.

我们先定义一个CSS类：

.has-transition {
   -webkit-transition: margin-left 1s ease-out;
      -moz-transition: margin-left 1s ease-out;
        -o-transition: margin-left 1s ease-out;
           transition: margin-left 1s ease-out;
}

之后再对页面元素进行操作：

// 我们的元素开始默认含有 "has-transition" 的class属性
var $targetElem = $('#targetElemId');

// 移除默认的 "has-transition"
$targetElem.removeClass('has-transition');

// 此处的属性改变没有动画效果
$targetElem.css('margin-left', 100);

// 再加上原来的属性名
$targetElem.addClass('has-transition');

// 这次改变有动画效果
$targetElem.css('margin-left', 50);

但事实上这段代码并不会像注释描述的那样运作，每条语句的操作将被缓存，只有结果会在页面上显示，所以我们就需要手动进行一次强制回流：

// 移除默认的 "has-transition"
$(this).removeClass('has-transition');

// 此处的属性改变没有动画效果
$(this).css('margin-left', 100);

// 触发强制回流，上述两条语句的效果会马上在页面中显示
$(this)[0].offsetHeight; // 只是举个例子，别的触发方法也可以

// 再加上原来的属性名
$(this).addClass('has-transition');

// 这次改变有动画效果
$(this).css('margin-left', 50);

你可以在JSBin预览这个例子。

优化渲染效率的几条最佳实践

根据我查阅的一些资料，总结出以下几条优化建议：

• 合法地书写HTML和CSS，不要忘了文档编码类型。样式文件应当在 <head> 标签中，脚本文件在 <body> 结束前。
• 简化并优化你的CSS选择器（有些人可能CSS预处理器用习惯了从来不关注这一点）。将嵌套层减少到最小。CSS选择器根据其优先级具有不同的运行效率（从快到慢）：
• ID选择器： #id
• 类选择器： .class
• 标签选择器： div
• 相邻选择器： a + i
• 子元素选择器： ul > li
• 通用选择器： *
• 属性选择器： input[type="text"]
• 伪类选择器： a:hover

浏览器中CSS选择器是从右到左进行匹配的（为什么浏览器要从右到左匹配样式选择器），这也是为什么越短的选择器运行越快的原因（别提通用选择器，它会遍历所有元素）：

div * {...} // ×
.list li {...} // ×
.list-item {...} // √
#list .list-item {...} // √

• 在你的脚本代码中，尽量减少DOM操作。缓存所有的内容，包括属性和对象（如果他们需要被复用的话）。尽量将元素缓存到本地之后再进行操作，最后再添加到DOM当中。
• 如果你使用jQuery进行DOM操作的话，最好遵循jQuery最佳实践。
• 修改元素样式时，更改其class属性是性能最高的方法。你的选择器越有针对性越好（这同样也有助于分离页面样式和逻辑）。
• 尽量只对 position 为 absolute/fixed 的元素设置动画。
• 在页面滚动时禁用 :hover 样式效果：

.disable-hover {
  pointer-events: none;
}

var body = document.body,
    timer;

window.addEventListener('scroll', function() {
  clearTimeout(timer);
  if(!body.classList.contains('disable-hover')) {
    body.classList.add('disable-hover')
  }
  
  timer = setTimeout(function(){
    body.classList.remove('disable-hover')
  },500);
}, false);

如果你想对此话题进行更深入的了解，可以查阅：

1. How browsers work 中文版
2. 【译】浏览器渲染：repaint,reflow/relayout,restyle

原文：What Every Frontend Developer Should Know About Webpage Rendering，作者：Alexander Skutin