天天看點
傳回

js中常用的屬性一、擷取元素二、操作屬性

DOM全稱是document object model(文檔對象模型)，DOM是用來幹什麼的呢？假設把你的文檔看成一個單獨的對象，DOM就是如何用HTML或者XML對這個對象進行操作和控制的标準。

js中常用的屬性一、擷取元素二、操作屬性

一、擷取元素
js中常用的屬性一、擷取元素二、操作屬性

使用Javascript程式設計時，擷取文檔的元素是使用DOM的基本方式。下面将介紹其中兩個用來擷取元素的基本方法：getElementById()和getElementsByTagName()。

1、通過ID擷取元素

getElementById()方法是DOM中頻繁使用的一個方法。它擷取HTML文檔的一個特定元素并且傳回一個對它的引用。為了擷取元素，它必須具有一個ID屬性。

舉例如下：

<div id="div1">
    <p id="p1">
        我是第一個P</p>
    <p id="p2">
        我是第二個P</p>
 
 
window.onload = function () {
        var str = document.getElementById("p1").innerHTML;
        alert(str);        //彈出    我是第一個P
    }</div>

2、通過标簽名擷取

當隻擷取一個或幾個元素時，getElementById（）方法工作的很好，但是當我需要同時擷取超過一個的元素時，就發現getElementsByTagName()方法更合适。後者是通過數組或者清單的格式傳回指定标簽類型的所有元素。

舉例如下：

<div id="div1">
    <p id="p1">
        我是第一個P</p>
    <p id="p2">
        我是第二個P</p>
 
 
window.onload = function () {
        var str = document.getElementsByTagName("p")[1].innerHTML;
        alert(str);        //輸出  我是第二個P，因為擷取的是索引為1的P，索引從0開始
    }    
 
window.onload = function () {
        var arr = document.getElementsByTagName("p");
        for (var i = 0; i < arr.length; i++) {
            alert(arr[i].innerHTML);
        }
    }
 
window.onload = function () {
        var node = document.getElementById("div1");
     var node1 = document.getElementsByTagName("p")[1];    //從擷取到的元素再擷取
        alert(node1.innerHTML);
}</div>

3、通過屬性名擷取

getElementsByName() 方法可傳回帶有指定名稱的對象的集合。

該方法與 getElementById() 方法相似，但是它查詢元素的 name 屬性，而不是 id 屬性。

另外，因為一個文檔中的 name 屬性可能不唯一（如 HTML 表單中的單選按鈕通常具有相同的 name 屬性），所有 getElementsByName() 方法傳回的是元素的數組，而不是一個元素

<html>
<head>
<script type="text/javascript">
<--傳回所有name=myInput的元素對象集合-->
function getElements()
  {
  var x=document.getElementsByName("myInput");
  alert(x.length);
  }
</script>
</head>
<body>

<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" οnclick="getElements()"
value="How many elements named 'myInput'?" />

</body>
</html>
           
<--擷取對象中下标為1的對象的值-->
  var x=document.getElementsByName("myInput")[1].value;
  <--擷取對象中下标為1的對象-->		
  var x=document.getElementsByName("myInput")[1];
  var y=x.getAttribute("type");
  alert(y);

二、操作屬性

1、getAttribute()與setAttribute()

getAttribute()是讀取屬性内容，setAttribute()方法對文檔做出的修改，将使得文檔在浏覽器視窗裡的顯示效果和/或行為動作發生相應的變化，但我們在通過浏覽器的view source（檢視源代碼）選項去檢視文檔的源代碼時看到的仍将是原來的屬性值——也就是說，setAttribute()方法做出的修改不會反映在文檔本身的源代碼裡。這種“表裡不一”的現象源自DOM的工作模式：先加載文檔的靜态内容、再以動态方式對它們進行重新整理，動态重新整理不影響文檔的靜态内容。這正是DOM的真正威力和誘人之處：對頁面内容的重新整理不需要最終使用者在他們的浏覽器裡執行頁面重新整理操作就可以實作。

2、舉例 

<title>Untitled Document</title>
<script language="JavaScript">
    function change() {
        var input = document.getElementById("li1");
        alert(input.getAttribute("title"));
        input.setAttribute("title", "mgc");
        alert(input.getAttribute("title"));
    }
</script>
 
 
<ul id="u">
    <li title="hello" id="li1">Magci</li>
    <li>J2EE</li>
    <li>Haha!</li>
</ul>
<input οnclick="change();" type="button" value="Change">
JS　　Notes javascript
上一篇: 挖SRC要注意什麼？新手挖SRC需要注意什麼？你的電腦組態高不高？還是你的網速快不快？還是你的顯示屏夠不夠亮？還是在旁邊
下一篇: 資料結構與算法（Python）[超詳細版本] 02-2 棧-棧的操作（或實作）

繼續閱讀