javascript當中attributes的用法

馬克- to-win：馬克 java社區(qū)：防盜版實名手機尾號： 73203。



例 3.1（getElementsByNameNodeListAttributeIEFF.html）
<HTML>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</HEAD>
<BODY>
<DIV ID="RESULT"></DIV>
<FORM onClick="handleClick(event)">
    <INPUT TYPE="checkbox" VALUE="A" NAME="BOX" id="BOX_A" checked="true">Selection A<BR>
    <INPUT TYPE="checkbox" VALUE="B" NAME="BOX" id="BOX_B">Selection B<BR>
    <INPUT TYPE="checkbox" VALUE="C" NAME="BOX" id="BOX_C">Selection C<BR>
    <INPUT TYPE="checkbox" VALUE="D" NAME="BOX" id="BOX_D">Selection D<BR>
</FORM>
<SCRIPT>
    function handleClick(event)
    {
        myString='';
        /* because there is no this method of getElementsByID, ID is unique
         Document.getElementsByName() (Method)

         An accessor method for retrieving objects from within the DOM hierarchy specifically according to their NAME value.
         Property/method value type: NodeList object
         JavaScript syntax: - myDocument.getElementsByName(aName)
         Argument list: aName The name of the element to be retrieved
         */
/*馬克-to-win：event.target是最上層的元素，注意這里點擊時，一定得點中方格里，如果點在方格外面，則event.target.id 是空值。*/
           var event = event||window.event; 
           var eSource =event.srcElement||event.target;      
        nodeListBox=document.getElementsByName("BOX");
        /*Element.attributes[] (Collection)
         A reference to a collection of attribute objects for the HTML tag that the Element object represents.
         Property/method value type: Attributes object
         nodeListBox[1].attributes['value']是第一個元素的眾多屬性當中的 VALUE="B" 這個屬性。，
         nodeListBox[1].attributes['value'].name是Value，
         nodeListBox[1].attributes['value'].value是B
         */
        alert("nodeListBox.length is"+ nodeListBox.length);
        myString ="nodeListBox[1] attribute "+nodeListBox[1].attributes['value'].name
                +" is "+nodeListBox[1].attributes['value'].value+" attribute "+nodeListBox[1].attributes['id'].name+" is "+nodeListBox[1].attributes['id'].value;

        alert(myString);


        /*refer to event bubble, event.target.id is always the most inner one*/
        myString = "event.target.id is "+ eSource.id+" event.target.value ";
        myString += eSource.value;
        myString += "event.target.checked is";
        myString += eSource.checked;

        alert(myString);

        document.all.RESULT.innerHTML = "this is test for document.all.RESULT.innerHTML ";
/*馬克-to-win：下面兩句話配合起來非常重要,這樣既使不知道id是多少,也可以獲得元素*/
        var str=nodeListBox[3].attributes['id'].value;
        var input3 = document.getElementById(str);
        alert("nodeListBox[3].checked is"+input3.checked);
        //     alert("selection is"+document.selection.createRange().text);

    }
</SCRIPT>
</BODY>
</HTML>