js高程笔记（3.7）

DOM扩展

• querySelector()接收一个css选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null
• querySelectorAll（）返回所有匹配的元素而不仅仅是一个元素，返回NodeList的实例
• element.matchesSelector（selector）如果调用元素与该选择符匹配，返回true；否则，返回false

function matchesSelector(element,selector){
    if(element.matchesSelector){
        return element.matchesSelector(selector)
    }else if(element.msMatchesSelector){
        return element.msMatchesSelector(selector)
    }else if(element.mozMatchesSelector){
        return element.mozMatchesSelector(selector)
    }else if(element.webkitMatchesSelector){
        return element.webkitMatchesSelector(selector)
    }else{
        throw new Error('not supported')
    }
}

• 元素遍历
  
  • childElementCount:返回子元素（不包括文本节点和注释的个数）
  • firstElementChild
  • lastElementChild
  • previousElementSibling
  • nextElementSibling

遍历所有子元素
var el=document.querySelector('ul')
var i,len,child=el.firstChild;
while(child!=el.lastChild){
    if(child.nodeType==1){
        console.log(1)

    }
    child=child.nextSibling
}
。。。。
var el=document.querySelector('ul')
var i,len,child=el.firstElementChild;
while(child!=el.lastElementChild){
    console.log(1)
    child=child.nextElementSibling
}

• getElementsByClassName()
  
  • classList属性

var app=document.querySelector('.app')
var arr=app.className.split(/\s+/)
var pos=-1
arr.forEach(function(item,index){
    if(item=='sss'){
        pos=index
    }
})
arr.splice(pos,1)
app.className=arr.join(' ')

• classList新定义的方法

  • add(value)
  • contains(value)
  • remove(value)
  • toggle(value)

• 焦点管理

  • document.activeElement
  • document.hasFocus

• HTMLDocument的变化

  • document.readyState有两个值：loading/complete
  • document.compatMode有两个值CSS1Compat（标准模式）和BackCompat（混杂模式）

• 插入标记

  • innerHTML
  • outerHTML
  • insertAdjacentHTML()
    
    • beforebegin
    • afterbegin
    • beforeend
    • afterend

---

• scrollIntoView（）
• children属性//子节点为元素节点
• contains
  
  • document.documentElement.contains(document.body)

---

• 插入文本
  
  • innerText
  • textContent

function getInnerText(element){
    return (typeof element.textContent=='string')?element.textContent:element.innerText
}
function setInnerText(element,text){
    if(typeof element.textContent=='string'){
        element.textContent=text
    }else{
        element.innerText=text
    }
}