原生JS实现几个常用DOM操作API实例

下面是“原生JS实现几个常用DOM操作API实例”的攻略。

一、DOM操作

DOM操作是Web开发中必不可少的一部分，有时我们需要通过JavaScript动态修改DOM元素，例如添加、删除、修改节点等操作。以下是几个常用的DOM操作API:

1. 获取元素

通常我们通过id或class获取页面元素，例如：

通过id获取元素

let element = document.getElementById('id');

比如我们有一个如下的HTML：

<div id="main">这是一个测试</div>

我们就可以通过以下方式获取该元素:

let element = document.getElementById('main');

通过class获取元素

let elements = document.getElementsByClassName('classname');

比如我们有一个如下的HTML：

<div class="test">这是一个测试1</div>
<div class="test">这是一个测试2</div>

我们就可以通过以下方式获取该元素:

let elements = document.getElementsByClassName('test');

2. 创建元素

我们可以通过以下方式创建元素：

let element = document.createElement('tagName');

其中tagName是要创建的元素标签名，例如我们要创建一个p元素：

let element = document.createElement('p');

3. 插入元素

在操作DOM元素的过程中，有时需要插入新的元素或者将一个元素移动到另一个位置。以下是常用的插入元素的API：

在指定元素后面插入新元素

parentElement.insertBefore(newElement, targetElement.nextSibling);

其中parentElement表示要插入新元素的父元素，newElement表示要插入的新元素，targetElement表示目标位置的元素。

在指定元素前面插入新元素

parentElement.insertBefore(newElement, targetElement);

其中parentElement同上，newElement同上，targetElement表示目标位置的前一个元素。

举个例子，如果我们有如下HTML：

<div class="parent">
  <div class="target">目标元素</div>
</div>

我们可以通过以下方式将一个新元素插入到target元素后面：

let parentElement = document.querySelector('.parent');
let targetElement = document.querySelector('.target');
let newElement = document.createElement('div');
newElement.innerText = '新元素';
parentElement.insertBefore(newElement, targetElement.nextSibling);

4. 删除元素

要删除一个元素，我们可以使用以下API：

parentElement.removeChild(childElement);

其中parentElement与childElement分别表示要删除的元素的父元素和要删除的元素。

举个例子，如果我们有如下HTML:

<div class="parent">
  <div class="child">要删除的元素</div>
</div>

我们可以通过以下方式删除child元素：

let parentElement = document.querySelector('.parent');
let childElement = document.querySelector('.child');
parentElement.removeChild(childElement);

以上就是大部分常用的DOM操作API。

二、两个示例说明

下面分别对插入元素和删除元素进行示例说明。

示例一

在一个列表中插入新元素，并给新元素添加样式。

假设我们有一个列表：

<ul id="myList">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

我们要插入一个新的列表项，并且新的列表项要有红色的文本颜色和粗体字体。我们可以通过以下步骤实现：

1. 创建新列表项:

js
let newLi = document.createElement('li');

1. 给新列表项设置文本内容：

js
newLi.innerText = '列表项4';

1. 为新列表项添加样式，设置颜色和字体：

js
newLi.style.color = 'red';
newLi.style.fontWeight = 'bold';

1. 获取要插入的位置：

js
let parentElement = document.getElementById('myList');
let targetElement = parentElement.lastChild;

1. 将新列表项插入到指定位置：

js
parentElement.insertBefore(newLi, targetElement.nextSibling);

最终的效果就是在myList列表的最后一个元素后面插入了一个新的红色加粗的列表项。

示例二

删除指定元素以及其子元素。

假设我们有以下一个div元素：

<div id="myDiv">
  <p>段落1</p>
  <p>段落2</p>
  <p>段落3</p>
</div>

我们需要删除这个div元素及其子元素。我们可以通过以下步骤实现：

1. 获取要删除的元素：

js
let element = document.getElementById('myDiv');

1. 获取要删除元素的父元素：

js
let parentElement = element.parentElement;

1. 删除要删除的元素：

js
parentElement.removeChild(element);

最终的效果就是将myDiv元素及其子元素删除了。

以上就是本文对“原生JS实现几个常用DOM操作API实例”的详细讲解，希望对您有所帮助。