JavaScript學習筆記之DOM操作實例分析
本文實例講述了JavaScript學習筆記之DOM操作。分享給大家供大家參考，具體如下：
一、DOM概念
1. "D":Docment,指的是文檔
2. “O”：Object，指的是對象，在javascript有三種對象：用戶定義對象、內(nèi)建對象（JavaScript語言對象。如Math，Array）、宿主對象（瀏覽器對象）
3. "M":Model,值得是Model，某種事物的表現(xiàn)形式
二、節(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() 返回一個對象數(shù)組
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() 返回一個對象數(shù)組
var obj=document.getElementsByClassName('sale');
alert("具有sale類的元素個數(shù)："+obj.length);
//important sale順序顛倒不影響 ----getElementsByClassName('sale important')
var obj_1=document.getElementsByClassName(' important sale');
alert("同時具有important 和sale類的元素個數(shù)："+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相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調(diào)試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
下面小編就為大家?guī)硪黄猠s6 字符串String的擴展(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
js事件源window.event.srcElement兼容性寫法(詳解)
下面小編就為大家?guī)硪黄猨s事件源window.event.srcElement兼容性寫法(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
改變checkbox默認選中狀態(tài)及取值的實現(xiàn)代碼
下面小編就為大家?guī)硪黄淖僣heckbox默認選中狀態(tài)及取值的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
隨機顏色和顏色格式是我們在開發(fā)中經(jīng)常要用到的一個小功能，網(wǎng)上相關的資料也很多，想著有必要總結一下自己的經(jīng)驗。所以這篇文章主要介紹了JS實現(xiàn)隨機顏色的3種方法與顏色格式的轉化,需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
分頁打印的實現(xiàn)方法有很多，本文為大家介紹的使用js來完成這個需求，感興趣的朋友可以參考下2014-02-02
這篇文章主要為大家詳細介紹了用js實現(xiàn)拼圖小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
JS中的算法與數(shù)據(jù)結構之隊列(Queue)實例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結構之隊列(Queue),結合實例形式詳細分析了javascript中隊列的概念、原理、定義及常見操作技巧,需要的朋友可以參考下2019-08-08
js的幾種繼承方式在我們面試的時候經(jīng)常會被問到，所以深入理解js幾種繼承方式以及它們的優(yōu)缺點是非常有必要的。本文為大家整理了JavaScript中面試?？嫉牧N繼承方式，需要的可以參考一下2023-02-02
BLOB (binary large object)，二進制大對象，是一個可以存儲二進制文件的容器。下面這篇文章主要給大家介紹了關于利用Blob進行文件上傳的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下2018-08-08
下面小編就為大家分享一篇JavaScript原生實現(xiàn)觀察者模式的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12