JavaScript學習筆記之DOM操作實例分析
本文實例講述了JavaScript學習筆記之DOM操作。分享給大家供大家參考,具體如下:
一、DOM概念
1. "D":Docment,指的是文檔
2. “O”:Object,指的是對象,在javascript有三種對象:用戶定義對象、內建對象(JavaScript語言對象。如Math,Array)、宿主對象(瀏覽器對象)
3. "M":Model,值得是Model,某種事物的表現形式
二、節(jié)點
1. 元素節(jié)點 :<body> <p> <ul>等
2. 文本節(jié)點:<p>文本節(jié)點</p>、<li>文本節(jié)點</li>等
3. 屬性節(jié)點:title id class 等
三、獲取元素
三種方法:通過元素ID、通過標簽名字、通過類名字來獲取
請看下面實例:
<h1>What do you want to buy</h1>
<p title="a gentle reminder">Donnot Forget TO Buy This Stuff</p>
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</li>
</ul>
1、getElementsById(id) 返回一個對象
var obj=document.getElementById("purchases");
2、getElementsByTagName() 返回一個對象數組
var obj=document.getElementsByTagName('li')
alert(typeof obj);
alert(obj.length);
for(var i=0;i<obj.length;i++){
alert(typeof obj[i]);
}
3、getElementsByClassName() 返回一個對象數組
var obj=document.getElementsByClassName('sale');
alert("具有sale類的元素個數:"+obj.length);
//important sale順序顛倒不影響 ----getElementsByClassName('sale important')
var obj_1=document.getElementsByClassName(' important sale');
alert("同時具有important 和sale類的元素個數:"+obj_1.length);
四、獲取和設置屬性
1、getAttribue(attribute)?
var pa=document.getElementsByTagName('p');
for(var i=0;i<pa.length;i++){
var text=pa[i].getAttribute('title');
if(text) alert(text);
}
2、serAttribute(attribue,value)
var shoppping=document.getElementById('purchases');
shoppping.setAttribute('title','A list of goods');
alert(shoppping.getAttribute('title'));
五、小結
- getElementById
- getElementsByTagName
- getElementsByClassName
- getAttribute
- setAttribute
上面5個常見方法是編寫DOM腳本的基石
更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
淺析JS中的 map, filter, some, every, forEach, for in, for of 用法總
本文是小編給大家總結的關于javascript中的map, filter, some, every, forEach, for in, for of 用法,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-03-03
javaScript強制保留兩位小數的輸入數校驗和小數保留問題
這篇文章主要介紹了javaScript強制保留兩位小數的輸入數校驗和小數保留問題,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2018-05-05

