javascript当中attributes的用法

马克- to-win：马克 java社区：防盗版实名手机尾号： 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>