当前位置：首页 > JavaScript

js实现节点

2026-02-02 00:35:48JavaScript

实现节点创建与操作

在JavaScript中，节点（Node）通常指DOM树中的元素、文本、注释等。以下是常见操作：

创建元素节点

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

创建文本节点

const textNode = document.createTextNode('Hello World');

添加节点到DOM

const parent = document.getElementById('container');
parent.appendChild(newElement);
newElement.appendChild(textNode);

节点属性操作

设置/获取属性

newElement.setAttribute('id', 'myDiv');
const idValue = newElement.getAttribute('id');

修改样式

js实现节点

newElement.style.color = 'red';
newElement.style.fontSize = '16px';

节点关系操作

获取子节点

const children = parent.childNodes; // 包含所有节点类型
const elementChildren = parent.children; // 仅元素节点

获取父节点

const parentNode = newElement.parentNode;

节点删除与替换

删除节点

parent.removeChild(newElement);

替换节点

js实现节点

const replacement = document.createElement('span');
parent.replaceChild(replacement, newElement);

事件处理

添加事件监听

newElement.addEventListener('click', function() {
    console.log('Element clicked');
});

批量操作节点

使用DocumentFragment提高性能

const fragment = document.createDocumentFragment();
for(let i = 0; i < 100; i++) {
    const item = document.createElement('li');
    item.textContent = `Item ${i}`;
    fragment.appendChild(item);
}
document.getElementById('list').appendChild(fragment);

现代DOM操作API

使用insertAdjacentHTML

document.getElementById('container').insertAdjacentHTML(
    'beforeend',
    '<div class="new-item">New content</div>'
);

使用classList管理类名

const element = document.getElementById('myElement');
element.classList.add('active');
element.classList.remove('inactive');
element.classList.toggle('visible');