JS创建DOM详解

小蓝 • 2024-12-16 14:55 • 编程

一、常见的DOM操作

DOM（Document Object Model）是用来描述HTML文档结构的一种树形结构，通过它可以对HTML页面进行操作。JS创建DOM的方法有以下几种：

1. createElement()

这个方法可以在内存中创建一个新的HTML节点，并把它返回，但是在页面上不会显示。如果需要让它显示，还需要使用appendChild()方法将它添加到其他节点上。

var newP = document.createElement('p');
newP.innerHTML = '这是新的一段文字';
document.body.appendChild(newP);

2. createTextNode()

这个方法可以创建一个纯文本节点，也需要使用appendChild()方法将它添加到其他节点上。

var textNode = document.createTextNode('这是纯文本');
document.body.appendChild(textNode);

3. setAttribute()

这个方法可以设置HTML节点的属性，包括class, id等等。

var newLink = document.createElement('a');
newLink.setAttribute('href', 'https://www.example.com');
newLink.innerHTML = '点击跳转';
document.body.appendChild(newLink);

4. removeChild()

这个方法可以删除一个节点。

var toBeDeleted = document.getElementById('toBeDeleted');
var parent = toBeDeleted.parentNode;
parent.removeChild(toBeDeleted);

二、通过innerHTML创建DOM

在JS中有一个innerHtml属性，它可以用来操作HTML节点，包括创建、修改、删除等操作。以下是通过innerHTML属性创建HTML节点的例子：

var newDiv = document.createElement('div');
newDiv.innerHTML = '<p>这是新的一段文字。</p>';
document.body.appendChild(newDiv);

三、插入节点

在JS中有两个方法可以用来插入节点，一个是appendChild()方法，一个是insertBefore()方法。以下分别对它们进行介绍：

1. appendChild()

这个方法可以把一个节点添加到另一个节点的最后面。

var parent = document.getElementById('parent');
var child = document.getElementById('child');
parent.appendChild(child);

2. insertBefore()

这个方法可以把一个节点添加到另一个节点的指定位置。

var parent = document.getElementById('parent');
var newChild = document.createElement('div');
newChild.innerHTML = '<p>这是新的一段文字。</p>';
var child = document.getElementById('child');
parent.insertBefore(newChild, child);

四、操作节点的样式、类、ID

JS也可以通过DOM操作节点的样式、类、ID等等。以下是具体的例子：

1. 操作节点样式

var elem = document.getElementById('myDiv');
elem.style.color = 'red';
elem.style.backgroundColor = 'blue'

2. 操作节点类名

var elem = document.getElementById('myDiv');
elem.className = 'newClass';

3. 操作节点ID

var elem = document.getElementById('myDiv');
elem.id = 'newId';

五、事件监听器

JS可以通过事件监听器来响应页面上的用户操作。以下是一个具体的例子：

var myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
  alert('Hello World!');
});

这个例子中，当用户点击id为myButton的按钮时，会弹出一个包含“Hello World!”文字的对话框。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/271433.html