javascript DOM拓展

针对JS高级程序设计这本书，主要是理解概念，大部分要点源自书内。写这个主要是当个笔记加总结
存在的问题请你们多多指正！

DOM拓展

1选择符 API

1.1 querySelector()

由document调用，参数能够直接用css选择器的方式选择，选择成功返回选择到的第一个元素，选择失败则返回Null

var body = document.querySelector('body')
var myDiv = document.querySelector('#myDiv')
var selected = document.querySelector('.selected')
var img = document.querySelector('img.button')

1.2 querySelectorAll()

接受的参数是同样的，可是惟一不同的事不单单接受一个元素，而是一个NodeList实例

NodeList总说，无非是拥有Item()方法，有length属性，还能够用[]来代替.item()。可是多是通过了优化，在getElementByTagName上那种不同，那种是实时显示的，这个NodeList实例相似一个快照，不会进行动态的查询。

1.3 matcheSelector()

这个方法经过element对象调用，参数是经过CSS选择器肯定的另外一个element对象，若是匹配，返回true，若是不匹配，返回false。

2.元素遍历

IE头铁，由于document对象调用childNodes的时候会忽略掉文本节点和注释，这回别人家为了弥补一下跟IE的差别，特别为dom加了五个属性

• childElementCount:返回子元素的个数，不包括文本节点和注释
• firstElementChild：指向一个元素；firstChild带上元素
• lastElementChild：同理
• previousElementSibling：同理
• nextElementSilbling：同理

HTML5

HTML5带了一堆新的API，来瞅两眼。

3.1 与类相关的扩充

3.1.1getElementByClassName()

由于以前只有getElementById或者getElementByTagName，为了给类也整一个，因此就研究了一个getElementByClassName(),跟getElementByTagName没两样。参数是class，能够传入多个，用空格隔开，先后顺序无所谓。

例子：

var allCurrentUsernames = document.getElementsByClassNmae('username current')
var select = document.getElementById('myDiv').getElementByClassName('selected')

3.1.2 classList属性

以前操做类名:

var className  = div.className.split(/\s+/)

var pos = -1,
    i,
    len
for(i=0, len = classNames.length; i<len; i++){
  if(className[i]=='user'){
    pos = i
    break
  }
}

上炕都费劲，为了扭转这个尴尬的方法，因此HTML5加了一个新操做，就是给了element一系列属性

• add(value)
• contains(value)
• remove(value)：
• toggle(value)：切换操做，有了value把它删掉，没有value把他加上

上面那种操做简化一下：div.classList.remove('user')就完事了。

另外classLIst拥有item()方法

3.1.3 插入标记

1.innerHTML属性

innerHTML属性返回与调用元素的全部子节点(包括元素、注释和文本节点)对应的HTML标记，也就是说你编辑器里里面有啥他都能给你返回来，可是调用的元素的标签不在。

经过设置innerHTML属性的值能够设置里面的内容，能够原封不动的访问。

可是也会一些问题，好比说script标签会被忽略，由于script在浏览器里没有显示，因此他是个没有做用域的元素。能够再前面加个input标签，而后把input隐藏.

div.innerHTML = '<input type = \"hidden\"><script>alert('laotie666'')</script>'

这样不影响布局也不会让script标签被干掉

2.outerHTML属性

跟上面的差很少，区别是innerHTML不包括对象的标签，只换对象内部的标签。

而outerHTML属性一换把外面本身的标签也给换掉了。例子就不举了

3.insertAdjacentHTML()

里面两个参数，第一个是要插入的方式，第二个是插入的东西，方式以下，字符串格式：

• 'beforebegin':当前元素以前插一个同辈
• 'afterbegin':当前元素之下插入一个新子元素或者在一个字元素以前插入新子元素(有点绕)，就是有旧儿子插到旧儿子前头，没儿子就插进一个儿子
• 'beforeend':没儿子插进一个儿子，有不少儿子在最后一个旧儿子后面插一个儿子
• 'afterend':在当前元素以后插入一个同辈元素

4.专有拓展

4.1 children属性

ie最近这个children只带元素的子节点，除此以外和childNode没有啥区别

4.2 contains()方法

某个节点是否是摸个节点的后代，A.contains(b)，若B是A的后代节点，则返回true

4.3 插入文本

由于原来有innerHTML和outerHTML已经被归入规范了，因此还剩了个innerText和outerText,来说一讲

4.3.1 innerText属性

和innerHTML就差在text不能加入HTML标签，firefox不给你用。

若是你有带HTML标签的节点的话能够利用这一点去除HTML标签，就是：

div.innerText = div.innerText

4.3.2outterText属性

相似，文本节点会把元素替换掉，剩下的元素会被文当删除