靜態獲取方法

<p id='test'>這是一段測試文字！</p>

1.通過ID獲取

var oTest = document.getElementById('test'); 

var oTest = document.getElementById('test');        
oTest.style.color = 'red';
oTest.id = 'testt';

document.getElementById('test');
 

2.querySlectorAll

<div id="box">
 <p></p>
 <p></p>
 <p></p>
</div>

var oBox =document.querySelector("#box");
var aP = document.querySelectorAll("#box p");
console.log(aP.length);                //3
oBox.innerHTML += "<p>大家好！</p>";
console.log(aP.length);                //3

為獲取物件aP增加一對p標籤，但是輸出的結果依然不變，這是靜態獲取方法。

動態獲取方法

先建立一些標籤

<div id="box">
    <p class='xiao1'>p1</p>
    <p class='xiao1'>p2</p>
    <p class='xiao1'>p3</p>
</div>

1.getElementsByclassName方法

var aXiao1 =document.getElementsByClassName('xiao1');     //獲取到xiao1類陣列
console.log( aXiao1.length );        //先輸出長度 3
aXiao.innerHTML+= "<p class='xiao1'>p4</p>";
console.log( aXiao1.length ); //4
 

2.getElementsByTagName方法

var oBox =document.querySelector("#box");
var aP = document.getElementsByTagName('p');
console.log(aP.length);               //3
oBox.innerHTML += "<p>哈哈</p>";
console.log(aP.length);              //4

3.querySelector

var oBox =document.querySelector("#box");
console.log(oBox.id);  //box
oBox.id = "testoBox";
console.log(oBox.id);  //testoBox