JavaScript静态和动态获取方法

静态获取方法

先创建一个p标签，为它设置id为test

<p id='test'>这是一段测试文字！</p>

1.通过ID获取

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

在这里改变获取对象的颜色和id

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

这时候获取的对象id已经改变，再用方法获取的对象为null；

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