js常见的DOM操作

最新推荐文章于 2024-11-05 13:29:55 发布

原创最新推荐文章于 2024-11-05 13:29:55 发布 · 562 阅读

CC 4.0 BY-SA版权

文章标签：

36 篇文章

订阅专栏

该博客主要介绍了JavaScript的DOM操作，包括查找元素和创建新节点。查找元素的方法有根据ID、类名、name、标签查找，以及使用选择器查找；创建新节点需注意通过createElement创建的元素要通过appendChild等方法添加到HTML文档中。

document.getElementById() // 根据ID来查找元素，区分大小写，如果有多个，只返回第一个；

document.getElementsByClassName() // 根据类名来查找元素，多个类名用空格分隔，返回一个HTMLCollection （类数据对象），可以在任意元素上调用该方法，返回的是以当前元素为根节点，所有指定类名的子元素。支持IE9

document.getElementsByName() // 根据给定的name返回节点列表集合。 (IE容错能力较强，会得到一个数组，其中包括id等于name值的)

document.getElementsByTagName() // 根据标签来查找元素，* 表示查询所有标签，返回一个HTMLCollection。

document.querySelector() // 根据指定选择器查找匹配的第一个HTMLElement对象，找不到返回null（匹配使用的是深度优先遍历）

document.querySelectorAll() // 根据指定的选择器组查找匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是NodeList

createDocumentFragment() //创建一个DOM片段

创建一个具体的元素

createElement创建元素

var div1 = document.createElement('div');
div1.className = 'test';
div1.innerText = 'hello';
document.body.appendChild(div1);

注：通过createElement创建的元素并不属于document对象，它只是创建出来并未添加到HTM文档中，还需要调用appendChild或insertBefore 等方法将其添加到HTML文档中。

创建一个文本节点

createTextNode创建文本节点

var node = document.createTextNode("文本节点");
document.body.appendChild(node);

添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore() //在已有的子节点前插入一个新的子节点

insertBefore

语法：

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

如果 referenceNode 为 null 则 newNode 将被插入到子节点的末尾。(referenceNode 引用节点是必需参数，必须显式传入一个Node或者null)

返回值：函数返回被插入过的子节点；当 newNode 是 DocumentFragment 时，返回空 DocumentFragment。