javascript核心之DOM操作

S一个重要功能就是操作DOM, 改变页面显示。

1、基本概念

2、节点类型

3、节点关系

4、节点操作

基本概念

DOM全称为Document Object Model ，即文档对象模型，是针对HTML和XML的一个API, 描绘了一个层次化的节点树，可以添加、移除和修改页面的某一部分。

DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。

节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。以下面的HTML为例：

<html>
<head>
 <title>Sample Page</title>
</head>
<body>
 <p>Hello world!</p>
</body>
</html>

将这个HTML文档表示为一个层次结构，如下图

方框中黑体字代表节点类型。

文档节点(图中的 Document)是每个文档的根节点，

这个例子中，它只有一个子节点，即 <html>元素，我们称之为文档元素。

文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中。

每个文档只能有一个文档元素。

在HTML页面中，文档元素始终都是<html>元素。

在XML中，没有预定义的元素，任何元素都可能成为文档元素。

每一段标记都可以通过树中的一个节点来表示，总共有12种节点类型，这些类型都继承自一个基类型。

并不是所有节点类型都受到Web浏览器的支持，最常用的就是元素、文本、文档节点（下面数值常量中的1、3和9），我们只要关注这三种就可以了。

我们先看下所有的节点类型。

节点类型

js 中所有节点类型都继承自Node类型，因此都共享着相同的基本属性和方法。

每个节点都有nodeType属性，用于表明节点的类型。

nodeType有12个数值常量，任何类型必居其一。

各节点类型可能的子节点类型

通过比较上面这些常量，可以确定节点类型：

 if (someNode.nodeType == 1) {
 alert("Node is an element.");
 }

节点关系

把文档树比喻成家谱。（如下图，某个节点可以通过属性访问其他节点）

每个节点有一个childNodes属性，其中保存着一个NodeList对象（类数组对象，但不是Array的实例），它是基于DOM结构动态查询的结果。

可通过方括号，也可通过item() 方法来访问NodeList中的节点。例子：

 // 访问 NodeList对象中的节点
 var firstChild = someNode.childNodes[0];
 var secondChild = someNode.childNodes.item(1);
 var count = someNode.childNodes.length;

在反映这些关系的所有属性中，childNodes属性更方便一些，因为只须使用简单的关系指针，就可以通过它访问文档树中的任何节点。

节点操作

因为关系指针是只读的，所以DOM提供了一些操作节点的方法。

主要是添加、插入、替换、移除，我们分别介绍。

1、末尾添加一个节点

这是我们最常用的操作，appendChild()，用于向childNodes列表的末尾添加一个节点。

添加节点后，childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应的得到更新。更新完成后，appendChild()返回新增的节点。

 // appendChild()
 var returnedNode = someNode.appendChild(newNode);
 alert(returnedNode == newNode); // true
 alert(someNode.lastChild == newNode); // true

如果传入到appendChild()中的节点已经是文档的一部分，那结果就是将该节点从原来的位置转移到新位置。

2、插入节点

如果要把节点插入到 childNodes 列表中某个特定的位置上，用insertBefore(要插入的节点，作为参照的节点)。

插入节点后，被插入的节点会变成参照节点的前一个同胞节点（previousSibling），同时被方法返回。

如果参照节点是null, 则 insertBefore()与appendChild()执行相同的操作。

 // insertBefore()
 // 插入后成为最后一个子节点
 returnedNode = someNode.insertBefore(newNode, null);
 alert(newNode == someNode.lastChild); // true
 // 插入后成为第一个子节点
 var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
 alert(returnedNode == newNode); //true
 alert(newNode == someNode.firstChild); //true
 // 插入到最后一个子节点的前面
 returnedNode = someNode.insertBefore(newNode, someNode.lastChild);
 alert(newNode==someNode.childNodes[someNode.childNodes.length-2]); //true

3、替换节点

如果要替换节点，用 replaceChild(要插入的节点，要替换的节点)

要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置。

 // 替换节点 replaceChild()
 // 替换第一个子节点
 var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);

4、移除节点

移除节点用 removeChild(移除的节点)。

被移除的节点成为方法的返回值。

 // 移除节点 removeChild()
 // 移除第一个节点
 var formerFirstChild = someNode.removeChild(someNode.firstChild);

移除的节点仍然为文档所有，不过在文档中已经没有了自己的位置。

前面介绍的四个方法操作的都是某个节点的子节点，也就是说，要使用这几个方法必须先取得父节点（使用parentNode属性）。

5、其他方法

cloneNode()，接受一个布尔值参数，表示是否执行深复制。

true, 执行深复制，也就是复制节点及其整个子节点数。

false, 执行浅复制，即只复制节点本身。

返回的节点副本属于文档所有，但没有指定父节点。

因此，这个节点副本就成为“孤儿”，除非通过 appendChild(), insertBefore()或replaceChild()将它添加到文档中。

下一篇中，我们详解常用到的 document, element, text 三种节点类型，并结合节点操作，介绍几个常用的示例。

所有内置的JavaScript对象

所有浏览器对象

所有HTML DOM对象

JavaScript 对象参考手册

参考手册描述了每个对象的属性和方法，并提供了在线实例。

Array 对象
Boolean 对象
Date 对象
Math 对象
Number 对象
String 对象
RegExp 对象
全局属性和函数

Browser 对象参考手册

参考手册描述了每个对象的属性和方法，并提供了在线实例。

Window 对象
Navigator 对象
Screen 对象
History 对象
Location 对象

HTML DOM 参考手册

参考手册描述了 HTML DOM 的属性和方法，并提供在线实例。

HTML Document
HTML Element
HTML Attributes
HTML Events

HTML DOM 元素对象参考手册

参考手册描述了每个对象的属性和方法，并提供了在线实例。

Anchor 对象
Area 对象
Base 对象
Body 对象
Button 对象
Form 对象
Frame/IFrame 对象
Frameset 对象
Image 对象
Input Button 对象
Input Checkbox 对象
Input File 对象
Input Hidden 对象
Input Password 对象
Input Radio 对象
Input Reset 对象
Input Submit 对象
Input Text 对象
Link 对象
Meta 对象
Object 对象
Option 对象
Select 对象
Style 对象
Table 对象
td / th 对象
tr 对象
Textarea 对象

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

言

在前端开发的世界里，JavaScript如同魔法师手中的魔杖，而DOM（Document Object Model）则是施展魔法的舞台。掌握DOM，意味着能够动态地改变网页的结构、样式和行为，为用户带来丰富的交互体验。本文旨在带你深入了解DOM，从其基本概念出发，直至实战应用，帮助你成为前端领域的“魔法师”。

技术概述

定义DOM

DOM是一种树状结构模型，用于表示HTML或XML文档的结构。它将文档视为一个由节点组成的树，每个节点都是一个对象，可以是元素节点、属性节点、文本节点等。DOM允许JavaScript读取和修改页面的内容和布局。

核心特性与优势

可编程性：DOM提供了API，让开发者能够通过脚本动态地访问和修改文档。
兼容性：所有现代浏览器均支持DOM标准。
灵活性：能够创建、读取、更新或删除节点，以及处理事件和样式。

代码示例

// 获取元素节点
const element = document.getElementById('myElement');
// 修改内容
element.textContent = 'Hello, DOM!';

技术细节

DOM结构解析

DOM树的根节点通常是<html>元素，下面挂载着<head>和<body>等子节点。每个节点都有自己的属性和方法，如appendChild()、removeChild()等，用于操作DOM结构。

难点剖析

性能考量：频繁的DOM操作可能导致页面重绘和回流，影响性能。
异步处理：DOM操作往往与事件监听器或AJAX请求结合，需要理解异步编程。

实战应用

场景：动态加载内容

假设我们要在用户滚动页面时动态加载更多数据。

window.addEventListener('scroll', function() {
  if (window.scrollY + window.innerHeight >= document.body.scrollHeight) {
    loadMoreData();
  }
});

function loadMoreData() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      data.forEach(item => {
        const newNode = document.createElement('div');
        newNode.textContent = item.title;
        document.getElementById('content').appendChild(newNode);
      });
    });
}

优化与改进

性能瓶颈分析

减少重绘和回流：批量操作DOM，利用文档片段DocumentFragment。
缓存查询结果：避免重复使用getElementById或querySelector。

代码示例

const fragment = document.createDocumentFragment();
data.forEach(item => {
  const newNode = document.createElement('div');
  newNode.textContent = item.title;
  fragment.appendChild(newNode);
});
document.getElementById('content').appendChild(fragment);

常见问题

如何高效选择元素？

使用ID选择器最快，其次是类选择器，避免使用过于复杂的选择器链。

如何避免DOM操作引起的性能下降？

使用requestAnimationFrame进行动画和DOM更新。
在隐藏元素中进行DOM操作，完成后显示元素。

总结与展望

DOM作为JavaScript与HTML文档交互的桥梁，其重要性不言而喻。掌握DOM，意味着能够灵活地控制网页的表现，提升用户体验。随着Web组件、Shadow DOM等新技术的出现，DOM的未来充满无限可能，期待你在前端领域施展更多的魔法，创造更多精彩的应用。

在线咨询

上一篇：神一样的操作,真的牛逼了!Android Jetpack Compose 最全上手指南
下一篇：默认的checkbox太丑？教你如何写出一个漂亮的样式

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

javascript核心之DOM操作

基本概念

节点类型

节点关系

节点操作

言

技术概述

定义DOM

核心特性与优势

代码示例

技术细节

DOM结构解析

难点剖析

实战应用

场景：动态加载内容

优化与改进

性能瓶颈分析

代码示例

常见问题

如何高效选择元素？

如何避免DOM操作引起的性能下降？

总结与展望

您的项目需求