您的位置：首页 > Web前端 > JavaScript

JavaScript静态和动态获取方法

2018-02-06 20:02 120 查看

静态获取方法

先创建一个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

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                JS
                                                javascript
                                                dom
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航