js的一些常用DOM操作_js 常用的dom操作-CSDN博客

本文链接：https://blog.csdn.net/weixin_44823731/article/details/108296340

1.节点查找元素：

1.根据id查找元素，只返回第一个： document.getElementById('id')
2.根据类名查找元素，返回一个HTMLCollection：document.getElementsByClassName('类名')
3.根据标签名来查找元素，返回一个HTMLCollection：document.getElementsByTagName('标签名')
4.css选择器，返回第一个：document.querySelector('css选择器')
5.css选择器，返回一个NodeList：document.querySelectorAll('css选择器')
6.获取当前页面的所有form，返回一个HTMLCollection：document.forms
7.获取body：document.body

2.节点创建API

1.createElement创建元素：

document.createElement('div')

2 createTextNode创建文本节点：

document.createTextNode('我是文本节点')

3 cloneNode克隆一个节点，node.cloneNode(true/false)。true就深度克隆(子孙节点也会克隆)，false就克隆当前节点。

var div = document.getElementById('div')
var cloneDiv = div.cloneNode(true)

4.createDocumentFragment创建文档碎片。

var frag = document.createDocumentFragement()

3.节点修改API

1.appendChild，插入子节点。在最后插入。如果插入的子节点以存在，将移动它。

var div = document.getElementById('div')
var a = document.createElement('a')
div.appendChild(a)

2.insertBefore，插入子节点。在最前插入。如果插入的子节点以存在，将移动它。

var div = document.getElementById('div')
var a = document.createElement('a')
div.insertBefore(a)

3.removeChild，删除特定子节点。会返回被删除的子节点

var div = document.getElementById('div')
var box = document.getElementById('box')
var deleteChild = div.removeChild(box)

4.replaceChild，用一个节点替换另一个节点。

parent.replaceChild(newChild, oldChild)

4.节点关系API

1.父关系API

parentNode：每个节点都有一个parentNode属性，它表示父元素的父节点。Element的父节点可能是Element,document或者documentFragment
parentElement：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element元素，如果不是，则返回null

2.子关系API

children：返回一个实时的HTMLCollection，子节点都是Element
childNodes：返回一个实时的NodeList，表示元素的子节点列表，注意子节点可能包含文本节点、注释节点。
firstChild：返回第一个子节点，不存在就返回null，与之相对应的还有一个firstElementChild
lastChild：返回最后一个子节点，不存在就返回null，与之对应得还有一个lastElementChild

3.兄弟关系型API

previousSibling：节点的前一个节点，如果不存在就返回null。又能获取到的节点是文本节点或者注释节点。
nextSibling：节点的后一个节点，如果不存在就返回null。又能获取到的节点是文本节点或者注释节点。
previousElementSibling：返回前一个元素节点，前一个节点必须是Element。
nextElementSibling：返回后一个元素节点，后一个节点必须是Element。

5.property和attribute

property是不存在的，它的指的是：

var div = document.getElementById('id')
div.style.width = '100px'

attribute的用法：

var div = document.getElementById('id')
div.setAttribute('id', 'box')
div.getAttribut('id')

property是不会修改html的结构的，如果需要重新渲染DOM，推荐使用property形式。
attribute会修改html的结构的，设置属性什么的。如果需要重新渲染DOM，推荐使用property形式，attribute的性能很差。

5.标签上的data-开头的属性

<div data-username="wjg" id="div"></div>

通过dataset获取data-开头的属性，省去data-开头的部分

const div = document.getElementById('div')
div.dataset.username = 'newwjg'
console.log(div.data.username)

6.DOM性能优化

1.缓存策略：由于dom是会实时获取，我们可以先把或取来的dom暂存到一个变量中，就不用频繁获取了。
坏习惯：

for(var i = 0; i < document.getElementById('div').length; i++) {
	console.log(document.getElementById('div'))
}

好习惯(这种有利于性能优化)：

const div = document.getElementById('div')
const length = div.length
for(var i = 0; i < length; i++) {
	console.log(div)
}

2.使用文档碎片来优化大量频繁更新dom
例：在div标签中插入10个a标签
坏习惯：

const div = document.getElementById('div')
for(var i = 0; i < 10; i++) {
	const a = document.createElement('a')
	a.innerHTML = i
	div.appendChild(a)
}

好习惯：

const div = document.getElementById('div')
const frag = document.createDocumentFragment()
for(var i = 0; i < 10; i++) {
	const a = document.createElement('a')
	a.innerHTML = i
	frag.appendChild(a)
}
div.appendChild(frag)