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>

/**
 * 获取单个元素或多个元素（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'));

<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)

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

// 插入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 -->

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

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

// 之前
parentNode.replaceChild(newNode, oldNode)
// 现在
oldElement.replaceWith(newElement)

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

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