节点(node)、元素(element) 元素也叫标签
通过id查找元素
document.getElementById('idxxx') //有多个相同ID时，指挥返回第一个元素
document.getElementsByTagName('div')//获取页面所有的div
document.getElementByTagName('div')[0]//获取的div中的第一个
通过class查找
document.getElementsByClassName('className')//获取页面所有的className
document.getElementsByClassName('className')[0]//获取页面所有的red的class，选择第一个
通过ID直接选择元素
window.idxxx//获取id
idxxx//获取id
选择器来查找元素
document.querySelector(selectors)//凭选择器获取单个元素
document.querySelectorAll(selectors)[0]//获取多个元素选择第一个
获取特定元素
document.documentElement//获取HTML元素
document.head//获取head元素
document.body//获取body元素
window//获取窗口
document.all//获取所有标签
DOM的增
创建一个标签节点
let div1 = document.createElement('div')//创建一个div
document.createElement('style')
document.createElement('script')
document.createElement('li')
创建一个文本节点
text1 = document.createTextNode('你好')
标签里面插入文本
div1.appendChild(text1)//node方法
div1.innerText = '你好'//node方法
div1.textContent = '你好'//textContent 会获取所有元素的内容
注意不能用div1.appendChild('你好')
创建的标签默认处于线程中需使用document.body.appendChild(div)方法插入页面
或者插入已在页面中的元素Ele.appendChild(div)
克隆节点
let div2 = div1.cloneNode(true)//克隆节点
document.body.appendChild(div2)//把节点插入
DOM的删
div1.parentNode.removeChild(div1)
div1.remove()//移出节点到内存中
div2=nul//彻底删除节点
DOM的改
div1.className += ' red'//全覆盖
div1.classList
div1.classList.add('green')
div2.style = 'color: blue'//这样会覆盖之前的
div2.style.color = 'blue'//改部分style
div.style.backgroundColor = 'white'//大小写
读取属性
id.href//读取属性，但是会被HTML改造后显示
test.getAttribute('href')//读取href属性
