js原生怎么操纵节点

在JavaScript中，操纵节点是通过操作DOM（文档对象模型）来实现的。 常见的方法包括：创建节点、获取节点、修改节点、删除节点。下面将详细介绍其中一种方法：获取节点。

一、获取节点

1.1 使用 `getElementById`

getElementById 是最常用的方法之一，它通过元素的 id 属性来获取节点。例如：

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

这将返回具有 id 属性为 myElement 的元素。

1.2 使用 `getElementsByClassName`

getElementsByClassName 方法通过元素的类名获取节点集合。例如：

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

这将返回一个 HTML 集合，其中包含所有具有 myClass 类的元素。

1.3 使用 `getElementsByTagName`

getElementsByTagName 方法通过标签名获取节点集合。例如：

let elements = document.getElementsByTagName('div');

这将返回一个 HTML 集合，其中包含所有 div 标签的元素。

1.4 使用 `querySelector` 和 `querySelectorAll`

querySelector 和 querySelectorAll 是更强大的选择器方法，支持 CSS 选择器。例如：

let element = document.querySelector('.myClass');
let elements = document.querySelectorAll('.myClass');

其中 querySelector 返回第一个匹配的元素，而 querySelectorAll 返回所有匹配的元素集合。

二、创建节点

2.1 使用 `createElement`

createElement 方法用于创建一个新的元素节点。例如：

let newElement = document.createElement('div');

这将创建一个新的 div 元素，但它尚未被添加到 DOM 中。

2.2 使用 `createTextNode`

createTextNode 方法用于创建一个新的文本节点。例如：

let newText = document.createTextNode('Hello, world!');

这将创建一个包含文本 "Hello, world!" 的文本节点。

三、修改节点

3.1 修改节点内容

可以通过 innerHTML 属性来修改节点的 HTML 内容。例如：

let element = document.getElementById('myElement');
element.innerHTML = '<p>New Content</p>';

这将替换 myElement 的内容为 <p>New Content</p>。

3.2 修改节点属性

可以通过 setAttribute 方法来修改节点的属性。例如：

let element = document.getElementById('myElement');
element.setAttribute('class', 'newClass');

这将设置 myElement 的 class 属性为 newClass。

四、删除节点

4.1 使用 `removeChild`

removeChild 方法用于删除子节点。例如：

let parentElement = document.getElementById('parentElement');
let childElement = document.getElementById('childElement');
parentElement.removeChild(childElement);

这将从 parentElement 中删除 childElement。

4.2 使用 `remove`

remove 方法直接从 DOM 中删除元素节点。例如：

let element = document.getElementById('myElement');
element.remove();

这将直接删除 myElement。

五、插入节点

5.1 使用 `appendChild`

appendChild 方法用于在父节点的末尾插入一个新的子节点。例如：

let parentElement = document.getElementById('parentElement');
let newElement = document.createElement('div');
parentElement.appendChild(newElement);

这将把新的 div 元素插入到 parentElement 的末尾。

5.2 使用 `insertBefore`

insertBefore 方法用于在指定的子节点之前插入一个新的子节点。例如：

let parentElement = document.getElementById('parentElement');
let newElement = document.createElement('div');
let referenceElement = document.getElementById('referenceElement');
parentElement.insertBefore(newElement, referenceElement);

这将把新的 div 元素插入到 referenceElement 之前。

六、事件绑定

6.1 使用 `addEventListener`

addEventListener 方法用于绑定事件处理程序。例如：

let element = document.getElementById('myElement');
element.addEventListener('click', function() {
    console.log('Element clicked!');
});

这将为 myElement 添加一个点击事件处理程序。

6.2 使用 `removeEventListener`

removeEventListener 方法用于移除事件处理程序。例如：

let element = document.getElementById('myElement');
function handleClick() {
    console.log('Element clicked!');
}
element.addEventListener('click', handleClick);
element.removeEventListener('click', handleClick);

这将移除 myElement 的点击事件处理程序。

七、节点遍历

7.1 使用 `childNodes`

childNodes 属性返回一个包含所有子节点的集合。例如：

let parentElement = document.getElementById('parentElement');
let childNodes = parentElement.childNodes;

这将返回 parentElement 的所有子节点。

7.2 使用 `parentNode`

parentNode 属性返回元素的父节点。例如：

let childElement = document.getElementById('childElement');
let parentElement = childElement.parentNode;

这将返回 childElement 的父节点。

7.3 使用 `nextSibling` 和 `previousSibling`

nextSibling 和 previousSibling 属性分别返回元素的下一个和上一个兄弟节点。例如：

let element = document.getElementById('myElement');
let nextElement = element.nextSibling;
let previousElement = element.previousSibling;

这将分别返回 myElement 的下一个和上一个兄弟节点。

八、节点复制

8.1 使用 `cloneNode`

cloneNode 方法用于复制节点。例如：

let element = document.getElementById('myElement');
let clonedElement = element.cloneNode(true);

这将复制 myElement，包括其子节点。

九、节点替换

9.1 使用 `replaceChild`

replaceChild 方法用于替换子节点。例如：

let parentElement = document.getElementById('parentElement');
let newElement = document.createElement('div');
let oldElement = document.getElementById('oldElement');
parentElement.replaceChild(newElement, oldElement);

这将用新的 div 元素替换 oldElement。

十、综合应用示例

10.1 综合示例

下面是一个综合示例，展示如何创建、插入、修改和删除节点：

// 创建新的节点
let newElement = document.createElement('div');
newElement.setAttribute('id', 'newElement');
newElement.innerHTML = '<p>This is a new element</p>';
// 获取父节点
let parentElement = document.getElementById('parentElement');
// 插入新的节点
parentElement.appendChild(newElement);
// 修改新的节点
let newChildElement = document.createElement('span');
newChildElement.textContent = ' - and this is a new child element';
newElement.appendChild(newChildElement);
// 删除新的节点
parentElement.removeChild(newElement);

通过上述示例，您可以看到如何在 JavaScript 中使用原生方法来操纵节点。无论是创建、获取、修改还是删除节点，这些方法都能帮助您高效地操作 DOM。

js原生怎么操纵节点

一、获取节点

1.1 使用 getElementById

1.2 使用 getElementsByClassName

1.3 使用 getElementsByTagName

1.4 使用 querySelector 和 querySelectorAll

二、创建节点

2.1 使用 createElement

2.2 使用 createTextNode