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程序設計有所幫助。
相關文章
在JavaScript中,事件流冒泡是一種非常重要的概念,它是指事件從最內層的元素開始,逐級向外傳播到最外層元素的過程,下面我們就來了解下JavaScript中事件流冒泡的原理與實現吧2023-11-11
淺析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
我們在進行圖片保存的時候經常會發(fā)現圖片跨域了,下面下面這篇文章主要給大家介紹了關于html2canvas圖片跨域問題的相關資料,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細介紹了js下載文件并修改文件名的代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了javascript高級編程之函數表達式 遞歸和閉包函數的相關資料,需要的朋友可以參考下2015-11-11
看到大師級的canvas文字粒子動畫，要10個jq幣才能下載啊，我內心的小鹿蠢蠢欲動，我也要寫一個。所以本文就來用Canvas實現簡單的文字粒子流特效，希望對大家有所幫助2023-01-01
這篇文章主要介紹了Bootstrap3制作搜索框樣式的方法 的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要為大家詳細介紹了js+canvas繪制圖形驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了兩個JS之間的函數互相調用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03