javascript遍歷DOM節點方法詳解

原意是:遍歷對象中的每一個屬性,實例是遍歷HTML5中的canvas.getContext('2d')的方法並列出了相應方法或屬性的名稱和類型。同時,代碼中包含了屬性排序,便於查找。鑑於目前HTML5沒有成爲標準,因此各個瀏覽器之間存在一些差異。可以通過這個方法得到所有屬性,然後分別到網上去查具 體做什麼的。比較方便也比較直觀。
我現在是想遍歷給定DOM節點的屬性,殊途同歸吧,下午折騰了一下午也沒出什麼結果~ 鬱悶死了,希望這是條明路。
<html>

<head>

<title></title>

</head>

<body>

<audio controls="controls" id="aac">    

        <source src="test.mp3">    

</audio>

<canvas id="myCanvas" width="20" height="10"></canvas>

<iframe id=f name=f height=100 width=100 src="about:blank" style="opacity: 1"></iframe>

<script type="text/javascript">

/*

function a(myObject){

        document.write("<br>");

        var t=new Array();

        for (prop in myObject)

        {

                alert(prop);

                document.write("屬性 '" + prop + "' 爲 " + myObject[prop]);

                document.write("<br>");

        }

}

*/

function getMethod(obj){

        var resultArr=new Array();

        for(p in obj){

                var tempArr={};

                tempArr.name=p;

                tempArr.type=typeof(obj[p]);
                
                tempArr.value=obj[p];

                resultArr.push(tempArr);

        }

        resultArr=sortA(resultArr);

        return resultArr;

}

function sortA(arr){

        for(var i=0;i<arr.length;i++){

                for(var j=i;j<arr.length;j++){

                        if(arr[i].name>arr[j].name){

                                var temp=arr[i];

                                arr[i]=arr[j];

                                arr[j]=temp;

                        }

                }

        }

        return arr;

}

function print(arr){

        document.write('<table border="1"><tr><th>name</th><th>type</th><th>value</th></tr>');

        for(var i=0;i<arr.length;i++){

                document.write("<tr>")

                document.write("<td>"+arr[i].name+"</td><td>"+arr[i].type+"</td><td>"+arr[i].value+"</td>");

                document.write("</tr>");

        }

        document.write("</table>")

}

//print(getMethod(document.getElementById('myCanvas')));

print(getMethod(document.getElementById('f')));
print(getMethod(document));

//getMethod(document.getElementById('aac'));

</script>

</body>
有用的鏈接:
http://www.cnblogs.com/echoloyuk/archive/2012/02/03/2336866.html
http://topic.csdn.net/t/20030708/11/2002740.html
http://topinking.iteye.com/blog/258491
http://space.itpub.net/64065/viewspace-677237
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章