DOM入门

118 阅读1分钟

·获取元素,也叫标签

有很多API:

window.idxxxdocument.getElementById('idxxx')
document.getElementsByTagName('div')[0]
document.getElementsByClassName('red')[0]
document.querySelector('#idxxx')
document.querySelectorAll('.red')[0]

获取html:

document.documentElement

获取head标签:

document.head

获取body:

document.body

获取窗口:

window

获取所有元素:

document.all

元素的6层原型链

节点的增删改查:

增:

//创建一个标签节点let div1=document.createElement('div')document.createElement('style')document.createElement('script')document.createElement('li')//创建一个文本节点text1=document.createTextNode('你好')//标签里面插入文本div1.appendChild(text1)div1.innerText="你好"//或者div1.textContent='你好'

删:

//删除parentNode.removeChild(div1)childNode.remove()//不兼容IE

改:

//改属性改id:div1.id='xxx'改class:div1.className='red blue'//全覆盖div1.className+=' red'改class:div1.classList.add('red')改style:div1.style.width='200px'改颜色:div1.style.color='red'改大小写:div1.style.backgroundColor='while'//后面接的字母要大写来代替-改data-*属性:div.dataset.x='frank'console.log(text.href)//会取的text标签的href,效果:http://js.jirengu.com/xxxconsole.log(text.getAttribute('href'))//效果:/xxx改文本:text.innerText='hi'改文本:text.textContent='ho'改html:text.innerHTML='<strong>hi</strong>'改父亲:newParent.appendChild(div)

查:

//查查父亲:xxx.parentNode查父亲:xxx.parentElement查爷爷:xxx.parentNode.parentNode查子代:xxx.childNode//包含空格这个文本查子代:xxx.children查兄弟姐妹:xxx.parentElement.children//获取所有兄弟姐妹,包括自己查看第一个儿子:xxx.firstChild查看最后一个孩子:xxx.lastChild查看上一个哥哥:xxx.previousSibling//包含文本,不包括文本需要添加Element查看上一个哥哥:xxx.nextSibling//包含文本,不包括文本需要添加Element//遍历一个div里面的所有元素:trave1=(node,fn)=>{    fn(node)    if(node,children){        for(let i=0;i<node.children.length;i++){            trave1(node.children[i],fn)        }    }}trave1(div1,(node)=>console.log(node))