DOM 操作

const d1 = document.querySelector('#d1')
const html = d1.innerHtml
d1.innerHtml = 'new text'
d1.style.color = 'red'
const p1 = d1.parentElement            // d1 的父元素
const c1 = d1.firstElementChild        // 获取 d1 的第一个子元素
const c2 = d1.lastElementChild         // 获取 d1 的最后一个子元素
const s1 = d1.previousElementSibling   // 获取 d1 的前一个兄弟元素
const s2 = d1.nextElementSibling       // 获取 d1 的后一个兄弟元素
let n = document.getElementByTagName('div')  // 得到的结果是一个数组
let n = document.getElementByName('user')  // input 的 name 属性
let n = document.getElementByClassName('user') // 得到的结果是一个数组
let n = d1.querySelector('.aaa')     // 返回查询到的第一个元素
let n = d1.querySelectorAll('.aaa')  // 返回查询到的所有元素

核心 DOM

const a = d1.getAttribute('class')    // 获取 class 名称
d1.setAttribute('class', 'show')
const bool = d1.hasAttribute('class') // 判断有没有该属性
d1.remoteAttribute('chass')

HTML DOM

const a = d1.className
d1.className = 'show'
d1.className = ''      // 移除 class

添加 DOM 元素

const el = document.createElement('a')
el.href = 'www.baidu.com'
el.innerHTML = '百度一下，你就知道'
d1.appendChild(el)  // 向节点的子节点列表的末尾添加新的子节点，重复执行，只有一次生效

// d1.insertBefore(a, d1.childNodes[2]) // 向节点的子节点列表的任意位置插入新的节点，重复执行，只有一次生效

移除子元素

d1.removeChild('a')

BOM

d1.addEventListener('click', () => {})
d1.removeEventListener('click')

// 监听页面滚动
window.onscroll = () => {
  const height = document.body.scrollTop
}

// 阻止冒泡
function changeColor(e) {
  e.stopPropagation()
}
// 阻止浏览器默认行为
function add(e) {
  e.preventDefault()
}