查找元素
<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>')
参考
