DOM编程

DOM是个啥

DOM即Document Object Mode文档对象模型；

因为JS没法直接操作网页，然后浏览器就往window里面添加了一个document，JS用这个document来操作网页，这就是DOM

DOM很难用，刚开始用JQuery来操作dom，后来又用vue\react等来操作dom

将难用的DOM封装了一个自己能方便用的DOM库

github.com/qianqian-wa…

让我们来看看难用的DOM吧

获取元素

获取某个元素【如果实在要用DOM就用最后两种吧】

window.idxxx或者直接idxxx;
document.getElementById('idxxx');
document.getElementsByTagName('div')[0];
document.getElementsByClassName('red')[0];
document.querySelector('#idxxx');//可以写所有css选择器
document.querySelectorAll('.red')[0];

获取特定元素

document.documentElement  //获取html元素
document.head //获取head元素
document.body //获取body元素
window  //获取窗口
document.all //获取所有元素

注意：document.all是个falsy值，他是ie发明的，早期用document.all来判断是否是ie浏览器

增

创建一个标签节点

    let div1=document.createElement('div')
    document.createElement('style')
    document.createElement('script')
    document.createElement('li')

创建一个文本节点

text1=document.createTextNode('你好')

标签里面增加文本

div1.appendChild(text1)

div1.innerText='你好'或者div1.textContent='你好'

但是不能用div1.appendChild('你好')

插入页面中

你创建的标签默认处于JS线程中

你必须把他插到head或者body里面，她才会生效

document.body.appendChild(div)

或者已在页面中的元素.appendChild(div)

appendChild-->一个元素不能出现在两个地方，除非复制一份（复制方法：let div2=div1.cloneNode()）

只会出现在test2里面

删

两种方法：

旧方法：childNode.parentNode.removeChild(childNode)

新方法：childNode.remove()

还可以把移除的节点加回来：document.body.appendchild(childNode)

改

改属性

特殊：

读属性：a标签

test.href会把前面的域名补全

test.getAttribute('href')返回原本的值

改事件处理函数

div.onclick默认为null

改内容

改文本内容

div.innerText=''

div.textContent=''

改html内容

divid.innerHTML=''//如果超过两万个字符，可能会把页面卡死

改标签

div.innerHTML=''//先清空

div.appendChild(div2)//再加内容

查

查自己(直接打出元素id的值，id='div2')

div2

查爸爸

node.parentNode

node.parentElement

查爷爷

node.parentNode.parentNode

查子代

node.childNodes

node.children

当子代变化时，上述两者也会实时变化，但是selectorAll不会实时变化

特殊：

node.childNodes.length//会把空格等也算上

如下图他的长度就是7

查兄弟姐妹

node.parentElement.children

node.parentElement.childNodes

以上还需要排除自己

查看老大

node.firstChild

查看老幺

node.lastChild

查看上一个哥哥、姐姐

node.previousSibling

查看下一个弟弟、妹妹

node.nextSibing