DOM编程

·  阅读 124

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

遍历一个div里面的所有元素

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改