查找元素
<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>
/**
* 获取单个元素或多个元素（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'));
添加 DOM 元素
<a href="/home" class="active">首页</a>
以前的方式
const link = document.createElement('a')
link.setAttribute('href', '/home')
link.className = 'active'
link.textContent = '首页'
// finally
document.body.appendChild(link)
jQuery
$('body').append('<a href="/home" class="active">首页</a>')
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!')
位置参数
<!-- beforebegin -->
<div>
<!-- afterbegin -->
<span></span>
<!-- beforeend -->
</div>
<!-- afterend -->
移动 DOM 元素
<div class="first">
<h1>Title</h1>
</div>
<div class="second">
<h2>Subtitle</h2>
</div>
h2 移动到 h1 的后面去
const h1 = document.querySelector('h1')
const h2 = document.querySelector('h2')
h1.insertAdjacentElement('afterend', h2)
替换 DOM 元素
// 之前
parentNode.replaceChild(newNode, oldNode)
// 现在
oldElement.replaceWith(newElement)
移除 DOM 元素
// 之前
const target = document.querySelector('#target')
target.parentNode.removeChild(target)
// 现在
const target = document.querySelector('#target')
target.remove()
用 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>')
参考
</div>
