DOM

获取元素API：

window.idxxx
document.queryselector(‘#id’)
document.queryselectorAll(‘#id’)[0]
document.getElementById(‘idxxx’)
document.getElementsByTagName(‘div’)[0]
document.getElementsByClassName(‘red’)[0]

获取html元素

document.documentElement

获取head元素

document.head

获取body元素

document.body

获取所有元素

document.all(falsy值)

创建一个标签节点

let div1 = document.createElement(‘div’)
document.createElement(‘style’)

创建一个文本

let text1 = document.createTextNode(‘你好’)

标签插入文本

div1.appendChild(text1)
div1.innerText = ‘你好’ div.textContent = ‘你好’
JS创建的节点 需要加入head或者body中才可以
document.body.appendChild(div)
页面中的元素.appendChild(div)

删除一个元素

parentNode.childChild(childNode)
childNode.remove()

改属性

改class：div.className = ‘red blue’
改class：div.classList.add(‘red’)
改style：div.style = ‘width = 10px; color = blue;’
改style部分：div.style.width = ‘50px’
大小写：div.style.backgroundColor = ‘white’
改data-* 属性：div.dataset.x = ‘haha’

添加事件函数

div.addEventListener

改内容

div.innerText = ‘xxx’
div.innerContent = ‘xxx’
div.innerHTML = 内容

查父节点

node.parentNode / node.parentElement

查爷节点

node.parentNode.parentNode

查子节点

node.childNodes / node.children

查兄弟节点

node.parentNode.childNodes(排除自己)
node.parentNode.children(排除自己)

查老大

node.firstChild

查最小

node.lastChild

查上一个兄弟

node.previousSibling

查下一兄弟

node.nextSibling

遍历div里的每一个元素

travel = (node,fn)=>{
    fn(node)
    if(node.children){
        for(let i = 0; i < node.children.length; i++){
                 travel(node.children[i],fn)
        }
  }
}
travel(div1, (node)=>console.log(node))