JavaScript之DOM查詢

萌面行者發表於2018-12-07
JavaScript

DOM查詢
　　- 通過具體的元素節點來查詢
　　- 元素.getElementsByTagName()
　　- 通過標籤名查詢當前元素的指定後代元素，返回陣列

　　- 元素.childNodes
　　- 獲取當前元素的所有子節點
　　- 會獲取到空白的文字子節點

　　- 元素.children
　　- 獲取當前元素的所有子元素

　　- 元素.firstChild
　　- 獲取當前元素的第一個子節點

　　- 元素.lastChild
　　- 獲取當前元素的最後一個子節點

　　- 元素.parentNode
　　- 獲取當前元素的父元素

　　- 元素.previousSibling
　　- 獲取當前元素的前一個兄弟節點

　　- 元素.nextSibling
　　- 獲取當前元素的後一個兄弟節點

innerHTML和innerText
　　- 這兩個屬性並沒有在DOM標準定義，但是大部分瀏覽器都支援這兩個屬性
　　- 兩個屬性作用類似，都可以獲取到標籤內部的內容，
　　不同是innerHTML會獲取到html標籤，而innerText會自動去除標籤
　　- 如果使用這兩個屬性來設定標籤內部的內容時，沒有任何區別的

讀取標籤內部的文字內容
　　<h1>h1中的文字內容</h1>
　　元素.firstChild.nodeValue

　　- document物件的其他的屬性和方法
　　document.all
　　- 獲取頁面中的所有元素，相當於document.getElementsByTagName(“*”);

　　document.documentElement
　　- 獲取頁面中html根元素

　　document.body
　　- 獲取頁面中的body元素

 1 <script>
 2 //var body = document.getElementsByTagName("body")[0];
 3 var body = document.body;//body標籤
 4 var html = document.documentElement;//html跟標籤
 5 var all = document.all;//所有標籤
 6 all = document.getElementsByTagName("*");//與all一樣的
 7                 
 8 console.log(all.length);
 9 for(var i=0; i<all.length; i++){
10     console.log(all[i]);
11 }
12 var box1 = document.getElementsByClassName("box1");//支援IE9以上
13 console.log(box1.length);
14 </script>

　　document.getElementsByClassName()
　　- 根據元素的class屬性值查詢一組元素節點物件
　　- 這個方法不支援IE8及以下的瀏覽器

<script>
var box1 = document.getElementsByClassName("box1");//支援IE9以上
console.log(box1.length);
</script>

　　document.querySelector()
　　- 根據CSS選擇器去頁面中查詢一個元素
　　- 如果匹配到的元素有多個，則它會返回查詢到的第一個元素 

<script>
//querySelector(".box1 div")
//需要一個選擇器的字串作為引數，可以根據一個CSS選擇器來查詢一個元素節點物件
//IE8以上可用，可以用來代替getElementsByClassName()方法
//總會返回唯一一個，如果有多個，只返回第一個
var div = document.querySelector(".box1 div");
console.log(div.innerText);
</script>

　　document.querySelectorAll()
　　- 根據CSS選擇器去頁面中查詢一組元素
　　- 會將匹配到所有元素封裝到一個陣列中返回，即使只匹配到一個

<script>
//返回陣列
    var divs = document.querySelectorAll(".box1 div");
    console.log(divs.length);
</script>

 

相關文章