Dom基本操作之CURD

查找元素

<div id="box">id="box"</div>
<div class="box">class="box"</div>
<div name="box">name="box"</div>
<p><span>+ p > span</span></p>
<span>+ span</span>

  

 

  
1
  
2
  
3
  
4
  
5
 

/**
 * 获取单个元素或多个元素（HTMLCollection）
 */
console.log(document.getElementById('box'));
console.log(document.getElementsByClassName('box'));
console.log(document.getElementsByTagName('div'));

/**
 * 类似jQuery方式
 * 获取单个元素 返回单个DOM元素，没有返回null
 */
console.log(document.querySelector('.box'));
console.log(document.querySelector('#box'));
console.log(document.querySelector('div'));
console.log(document.querySelector('[name="box"]'));
console.log(document.querySelector('div + p > span'));

/** 
 * 获取多个元素，返回NodeList, 转为数组
 */
const arr = [...document.querySelectorAll('div')]
console.log(arr);

// or
const alsoArr = Array.from(document.querySelectorAll('div'))
console.log(alsoArr);

// 链式操作
console.log(document.querySelector('p').querySelector('span'));

// 绑定 console中可以直接用$
const $ = document.querySelector.bind(document)
// console.log($('div'));

// 向上查找
console.log($('p > span').closest('p'));


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
 

添加 DOM 元素

<a href="/home" class="active">首页</a>

  

 

  
1
 

以前的方式

const link = document.createElement('a')
link.setAttribute('href', '/home')
link.className = 'active'
link.textContent = '首页'
 
// finally
document.body.appendChild(link)

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

jQuery

$('body').append('<a href="/home" class="active">首页</a>')

  

 

  
1
 

JavaScript

// 插入html
document.body.insertAdjacentHTML( 'beforeend', '<a href="/home" class="active">首页</a>'
)

// 插入 HTML 元素
document.body.insertAdjacentElement( 'beforeend', document.createElement('a')
)
 
// 插入文本
document.body.insertAdjacentText('afterbegin', 'cool!')

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

位置参数

<!-- beforebegin -->
<div> <!-- afterbegin -->
  <span></span> <!-- beforeend -->
</div>
<!-- afterend -->

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

移动 DOM 元素

<div class="first">
  <h1>Title</h1>
</div>
 
<div class="second">
  <h2>Subtitle</h2>
</div>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

h2 移动到 h1 的后面去

const h1 = document.querySelector('h1')
const h2 = document.querySelector('h2')
 
h1.insertAdjacentElement('afterend', h2)

  

 

  
1
  
2
  
3
  
4
 

替换 DOM 元素

// 之前
parentNode.replaceChild(newNode, oldNode)

// 现在
oldElement.replaceWith(newElement)

  

 

  
1
  
2
  
3
  
4
  
5
 

移除 DOM 元素

// 之前
const target = document.querySelector('#target')
target.parentNode.removeChild(target)

// 现在
const target = document.querySelector('#target')
target.remove()

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

用 HTML 字符串创建 DOM 元素

const createSingleElement = (domString) => { const parser = new DOMParser()
  return parser.parseFromString(domString, 'text/html').body.firstChild
}
 
// usage
const element = createSingleElement('<a href="./home">Home</a>')

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

参考
DOM 高级工程师不完全指南

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/105661678