JS常用DOM方法详解

什么是DOM？

DOM（文档对象模型）指的是HTML文档在浏览器中的表示方式。可以通过JavaScript来访问和修改文档对象模型，实现对页面的动态操作。

DOM节点的类型

DOM树中的节点有多种类型，以下是一些常见的节点类型：

• 元素节点（element）：HTML中的标签就是元素节点；
• 文本节点（text）：标签中的文本内容；
• 属性节点（attribute）：元素的属性；
• 注释节点（comment）：HTML中的注释；

常用DOM方法

获取元素

1. 通过id获取元素

document.getElementById('id') 可以通过元素的id属性获取该元素。返回值是一个DOM对象。

示例：

var element1 = document.getElementById('demo');

1. 通过class获取元素

document.getElementsByClassName('class') 可以通过元素的class属性获取一组元素。返回值是一个DOM对象的集合，需要使用索引来获取其中的元素。

示例：

var elements = document.getElementsByClassName('demo');
var element2 = elements[0];

1. 通过标签名获取元素

document.getElementsByTagName('tag') 可以通过元素的标签名获取一组元素。返回值是一个DOM对象的集合。

示例：

var elements = document.getElementsByTagName('p');
var element3 = elements[0];

添加和删除元素

1. 创建元素

document.createElement('tag') 可以创建一个指定标签类型的元素，返回值是一个DOM对象。

示例：

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

1. 插入元素

2. element.appendChild(newElement) 可以将新元素作为子元素插入到指定元素的末尾。

3. element.insertBefore(newElement,existingElement) 可以在指定元素的指定位置插入新元素，其中第二个参数是一个已存在的子元素。

示例：

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

1. 删除元素

element.removeChild(child)可以删除指定元素的指定子元素。

示例：

var parentElement = document.getElementById('parent');
var childElement = document.getElementById('child');
parentElement.removeChild(childElement);

修改元素属性和样式

1. 修改元素属性

2. 对于普通属性，可以直接通过 DOM 元素的属性来操作，如：element.id、element.className、element.src等。

3. 对于自定义属性，需要使用 element.getAttribute('name') 和 element.setAttribute('name', value)来获取和设置属性的值。

示例：

var element = document.getElementById('demo');
element.style.color = 'red'; //修改style样式的color属性
element.setAttribute('data-id', 123); //设置data-id属性

1. 修改元素样式

2. element.style.property 可以直接设置元素的内联样式；

3. element.className 可以添加、删除、修改元素的类名（classes）。

示例：

var element = document.getElementById('demo');
element.style.color = 'red'; //修改style样式的color属性
element.className = 'new-class'; //修改元素的类名

结语

以上就是JS常用DOM方法的一些介绍和示例，希望对你有所帮助！