javascript DOM拓展

時間 2019-12-07

原文原文鏈接

針對JS高級程序設計這本書，主要是理解概念，大部分要點源自書內。寫這個主要是當個筆記加總結
存在的問題請你們多多指正！javascript

DOM拓展

1選擇符 API

1.1 querySelector()

由document調用，參數能夠直接用css選擇器的方式選擇，選擇成功返回選擇到的第一個元素，選擇失敗則返回Nullcss

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實例html

NodeList總說，無非是擁有Item()方法，有length屬性，還能夠用[]來代替.item()。可是多是通過了優化，在getElementByTagName上那種不同，那種是實時顯示的，這個NodeList實例相似一個快照，不會進行動態的查詢。html5

1.3 matcheSelector()

這個方法經過element對象調用，參數是經過CSS選擇器肯定的另外一個element對象，若是匹配，返回true，若是不匹配，返回false。java

2.元素遍歷

IE頭鐵，由於document對象調用childNodes的時候會忽略掉文本節點和註釋，這回別人家爲了彌補一下跟IE的差別，特別爲dom加了五個屬性api

childElementCount:返回子元素的個數，不包括文本節點和註釋

firstElementChild：指向一個元素；firstChild帶上元素

lastElementChild：同理

previousElementSibling：同理

nextElementSilbling：同理

HTML5

HTML5帶了一堆新的API，來瞅兩眼。瀏覽器

3.1 與類相關的擴充

3.1.1getElementByClassName()

由於以前只有getElementById或者getElementByTagName，爲了給類也整一個，因此就研究了一個getElementByClassName(),跟getElementByTagName沒兩樣。參數是class，能夠傳入多個，用空格隔開，先後順序無所謂。dom

例子：編輯器

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':在當前元素以後插入一個同輩元素