原生js实现针对Dom节点的CRUD操作示例

原生JavaScript的DOM操作：从CRUD角度深入理解节点操作

==============================

在JavaScript的世界里，DOM（文档对象模型）是不可或缺的一部分，它代表了我们网页中的每一个元素和结构。今天，我们将深入如何使用原生JavaScript进行DOM节点的CRUD操作。这不仅是理解JavaScript如何与页面元素交互的关键，也是构建复杂应用的基础。

一、知识点的重要性与记忆方法

在学习的过程中，我们可能会遇到遗忘的问题。为了解决这个问题，我们可以建立正向知识体系，也就是像教科书目录一样的结构，帮助我们有条理地理解和记忆知识。对于今天的主题，我会构建一个关于原生JS操作DOM的正向知识体系。

二、什么是CRUD？

CRUD是创建（Create）、读取（Read）、更新（Update）和删除（Delete）的缩写。在DOM操作中，这四个词代表了我们对页面元素进行的四种基本操作。

三、创建节点（Create）

在JavaScript中，我们可以使用`document.createElement()`方法来创建新的DOM节点。例如：

```javascript

var div = document.createElement("div"); // 创建一个新的div元素

var p = document.createElement("p"); // 创建一个新的段落元素

```

我们还可以创建包含内容的元素和文本节点：

```javascript

var text = document.createTextNode("这是文本内容"); // 创建一个文本节点

```

我们还可以创建图片元素：

```javascript

var img = new Image(); // 创建一个新的图片元素

```

四、读取节点（Read）

我们可以通过各种属性来读取节点的信息，如`innerHTML`、`textContent`等。例如：

```javascript

console.log(divnerHTML); // 读取并打印div的内容

```

五、更新节点（Update）

我们可以改变节点的属性来更新页面元素。例如：

```javascript

div.style.color = "red"; // 将div的文字颜色改为红色

```

六、删除节点（Delete）

我们可以使用`remove()`方法来删除一个节点：

```javascript

div.remove(); // 删除div元素

```

=======================

--

```javascript

var dom1 = document.getElementById('dom1');

var div = document.createElement('div');

dom1.appendChild(div); // 将div添加到dom1的子节点列表的末尾

```

```javascript

function inertAfter(newElement, targetElement) {

var parent = targetElement.parentNode;

if (parent.lastChild == targetElement) {

parent.appendChild(newElement);

} else {

parentsertBefore(newElement, targetElement.nextSibling);

}

}

```

二、读取DOM元素

-

读取DOM元素通常涉及到选择器和各种节点属性的使用。例如：

使用 `document.getElementById()`, `document.querySelector()`, `document.querySelectorAll()` 选择元素。

使用 `innerHTML`, `outerHTML`, `children`, `firstChild`, `lastChild` 等属性读取元素内容或子节点。

三、更新DOM元素

--

更新DOM元素可以通过以下方式实现：

使用 `replaceChild()` 替换一个节点。

使用 `innerHTML` 或 `innerText` 更新元素的内容。例如：`dom1nerHTML = "hhh";` 或 `dom1nerText = "999";`。

四、删除DOM元素

--

删除DOM元素可以通过以下方式实现：

使用 `removeChild()` 删除一个节点。

将 `innerHTML` 或 `innerText` 设置为空字符串，也可以达到删除元素内容的效果。例如：`dom1nerHTML = "";`。

更多关于JavaScript的DOM操作，读者可以查看相关专题，如《DOM操作详解》、《JavaScript DOM编程实践》等，希望本文所述对大家JavaScript程序设计有所帮助。对于对JavaScript更深入的，如事件处理、AJAX、异步编程等，也是值得研究的方向。在浏览网页时，如果你发现一些有趣或有用的代码片段，不妨停下来深入研究一下，也许会有意想不到的收获。让我们在JavaScript的世界里继续和学习吧！在Web开发中，掌握JavaScript的DOM操作是非常重要的，这不仅能帮助我们构建静态页面，还能让我们与网页进行交互，创造出更丰富、更有趣的网页应用。例如，通过监听用户的行为（如点击、滚动等），我们可以动态地改变页面的内容和样式，提供更个性化的用户体验。我们还可以使用AJAX等技术实现与服务器交互，无需刷新页面就能获取新的数据。这些功能在现代Web应用中非常常见，也是Web开发的重要方向之一。JavaScript的DOM操作是Web开发的基础，掌握它可以帮助我们更好地理解和运用Web技术。对于开发者来说，不断学习新的技术和优化自己的技能是非常重要的。