快捷導(dǎo)航

JavaScript學(xué)習(xí)筆記之DOM操作實(shí)例分析

更新時(shí)間：2019年01月08日 11:09:19 作者：致Great

這篇文章主要介紹了JavaScript學(xué)習(xí)筆記之DOM操作,結(jié)合實(shí)例形式分析了javascript針對(duì)dom元素的獲取、設(shè)置相關(guān)操作常用函數(shù)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript學(xué)習(xí)筆記之DOM操作。分享給大家供大家參考，具體如下：

一、DOM概念

1. "D":Docment,指的是文檔
2. “O”：Object，指的是對(duì)象，在javascript有三種對(duì)象：用戶定義對(duì)象、內(nèi)建對(duì)象（JavaScript語(yǔ)言對(duì)象。如Math，Array）、宿主對(duì)象（瀏覽器對(duì)象）
3. "M":Model,值得是Model，某種事物的表現(xiàn)形式

二、節(jié)點(diǎn)

1. 元素節(jié)點(diǎn) ：<body> <p> <ul>等
2. 文本節(jié)點(diǎn)：<p>文本節(jié)點(diǎn)</p>、<li>文本節(jié)點(diǎn)</li>等
3. 屬性節(jié)點(diǎn)：title id class 等

三、獲取元素

三種方法：通過(guò)元素ID、通過(guò)標(biāo)簽名字、通過(guò)類名字來(lái)獲取

請(qǐng)看下面實(shí)例：

<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) 返回一個(gè)對(duì)象

var obj=document.getElementById("purchases");

2、getElementsByTagName() 返回一個(gè)對(duì)象數(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() 返回一個(gè)對(duì)象數(shù)組

var obj=document.getElementsByClassName('sale');
alert("具有sale類的元素個(gè)數(shù)："+obj.length);
//important sale順序顛倒不影響 ----getElementsByClassName('sale important')
var obj_1=document.getElementsByClassName(' important sale');
alert("同時(shí)具有important 和sale類的元素個(gè)數(shù)："+obj_1.length);

四、獲取和設(shè)置屬性

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'));

五、小結(jié)

getElementById
getElementsByTagName
getElementsByClassName
getAttribute
setAttribute

上面5個(gè)常見方法是編寫DOM腳本的基石

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

JavaScript學(xué)習(xí)筆記之DOM操作實(shí)例分析

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具