·获取元素,也叫标签
有很多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))