DOM编程

• 节点包括元素和文本等;元素就是标签，叫法不同而已

• 网页其实是一棵树

• js不能直接操作网页，这时需要浏览器往window上加一个document，这就是【Document Object Model】文档对象模型，也就是说js用document操作网页

• DOM很傻，所以一般用jQuery或者Vue

获取任意元素（标签）

window.document获取所有节点
window.idxxx或者直接idxxx
document.getElementById('idxxx')
document.getElementsByTagName('div')[0]
document.getElementsByClassName('red')[0]
document.querySelector('#idxxx')              // 或者···('div>span:nth-child(2)') 
document.querySelectorAll('.red')[0]          // 或者document.querySelectorAll('div>span:nth-child(2)') 

有很多API，工作中用querySelector和querySelectorAll
做demo直接用idxxx，别让人看见
兼容IE才用getElement(s)Byxxx 或者id与全局属性冲突时用document.getElementById('idxxx')【如id='parent'】

获取特定元素

document.documentElement    //获取html元素
document.head               //获取head元素
document.body               //获取body元素
window                      //获取窗口（窗口不是元素） 
                            //eg：window.onclick = ()=>{consloe.log('hi')} 鼠标监听
document.all                //获取所有元素；IE发明的，可以用if else判断是不是IE；第6个falsy值
                            //document.all [3]

拷贝：

div2 = div1.cloneNode(ture)

删除：

document.body.appendChild(div2)
div2.remove
dovument.body.appendChild(div2)  //remove只是被暂时移出了，还能再调回来
div2 = null                      //垃圾回收，div2彻底没了

改：

div.className = 'red'【全覆盖】    //改class；由于class是js的保留字，所以不能直接用
div.classList.add('red') 【在原有的基础上直接加】  //改class

div2.setAttribute('data-x', 'test')    //添加了data-x = 'test'的属性
div2.getAttribute('data-x')            //test 查
div2.dataset.x                         //test 查
div2.dataset.x ='frank'                //frank 改

将 div 的宽度设置为 100 像素，div.style.width = '100px'

查：

div2.style / div2.calssName / div2.id  / a.href         //直接用
div.getAttribute('class') / a.getAttribute('href')      //href特殊，可能浏览器会自己加工

查长度，长度会因为回车而变：

querySelector不变，他不是实时的

查兄弟姐妹：

div2.parentElement.children    
let siblings = []
let c2 = div2.parentElement.children  //(25)
for(let i = 0; i < c2.length; i++){
    if(c2[i] !== div2){
        siblings.push(c[i])
    }
}
siblings    //(24)