DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 13.4 獲取DOM中指定元素
13.4 獲取DOM中指定元素
編輯:JavaScript基礎知識     

在CSS入門教程的學習中,我們知道:如果想要對某個元素進行樣式操作,就必須先通過一種方式來選中該元素(也就是CSS選擇器),然後才能進行相關樣式的操作。在JavaScript中,如果想要對節點進行創建、刪除等操作,同樣也要通過一種方式來選中該節點。只有你獲取了該元素節點,才能進行各種操作,很容易理解吧。

在JavaScript中,可以通過以下2種方式來選中指定元素:

(1)getElementById();

(2)getElementsByName();

一、getElementById()

在JavaScript中,如果想通過id來選中元素,我們可以使用document對象的getElementById()方法。

getElementById()方法類似於CSS中的id選擇器。

語法:

 
document.getElementById("元素id");

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="lvye"> 學習網JavaScript入門教程</div>
    <script type="text/javascript">
        var e = document.getElementById("lvye");
        e.style.color = "red";
    </script>
</body>
</html>

在浏覽器預覽效果如下:

分析:

這裡使用document.getElementById()的方法獲取id為lvye的div元素,然後把這個DOM對象賦值給變量e,然後使用DOM對象的style對象來設置div元素顏色為紅色。我們在“JavaScript操作CSS樣式”這一節會詳細給大家介紹這種方法。

二、getElementsByName()

在JavaScript中,如果想通過name來選中元素,我們可以使用document對象的getElementsByName()方法。

語法:

 
document.getElementsByName("表單元素name值");

說明:

getElementsByName()方法都是用於獲取表單元素。

與getElementById()方法不同的是,使用該方法的返回值是一個數組,而不是一個元素。因此,我們想要獲取具體的某一個表單元素,就必須通過數組下標來獲取。

注意,是getElementsByName()而不是getElementByName()。數組嘛,當然是復數。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <input name="web" id="radio1" type="radio" value="HTML"/>
    <input name="web" id="radio2" type="radio" value="CSS"/>
    <input name="web" id="radio3" type="radio" value="JavaScript"/>
    <input name="web" id="radio4" type="radio" value="jQuery"/>
    <script type="text/javascript">
        alert(document.getElementsByName("web")[0].value);
    </script>
</body>
</html>

在浏覽器預覽效果如下:

分析:

getElementsByName()方法在實際開發中比較少用,大家了解一下即可。

其實可以這樣說, getElementById()和getElementsByName()這兩種方法是“JavaScript選擇器”。

除了getElementById()和getElementsByName()這兩種方法,JavaScript還提供另外一種getElementByTagName()方法,這個方法類似於CSS中的元素選擇器。但是getElementByTagName()方法有個很大缺點,它會把整個頁面中相同的元素都選中。用起來也比較麻煩,實際開發中很少用到。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved