快捷導航

比較詳細的javascript DOM 學習筆記

更新時間：2008年06月21日 22:53:58 作者：

看了很多的js dom學習資料，發(fā)現(xiàn)這個比較詳細，特轉(zhuǎn)載給大家學習一下

5.創(chuàng)建新節(jié)點
最常用到的幾個方法是
createDocumentFragment()－－創(chuàng)建文檔碎片節(jié)點
createElement(tagname)－－創(chuàng)建標簽名為tagname的元素
createTextNode(text)－－創(chuàng)建包含文本text的文本節(jié)點

createElement()、createTextNode()、appendChild()

<html>
    <head>
        <title>createElement() Example</title>
        <script type="text/javascript">
            function createMessage() {
                var oP = document.createElement("p");
                var oText = document.createTextNode("Hello World!");
                oP.appendChild(oText);
                document.body.appendChild(oP);
            }
        </script>
    </head>
    <body onload="createMessage()">
    </body>
</html>

removeChild()、replaceChild()、insertBefore()
刪除節(jié)點

<html>
    <head>
        <title>removeChild() Example</title>
        <script type="text/javascript">
            function removeMessage() {
                var oP = document.body.getElementsByTagName("p")[0];
                oP.parentNode.removeChild(oP);
            }
        </script>
    </head>
    <body onload="removeMessage()">
        <p>Hello World!</p>
    </body>
</html>

替換

<html>
    <head>
        <title>replaceChild() Example</title>
        <script type="text/javascript">
            function replaceMessage() {
                var oNewP = document.createElement("p");
                var oText = document.createTextNode("Hello Universe!");
                oNewP.appendChild(oText);
                var oOldP = document.body.getElementsByTagName("p")[0];
                oOldP.parentNode.replaceChild(oNewP, oOldP);
            }
        </script>
    </head>
    <body onload="replaceMessage()">
        <p>Hello World!</p>
    </body>
</html>

新消息添加到舊消息之前

<html>
    <head>
        <title>insertBefore() Example</title>
        <script type="text/javascript">
            function insertMessage() {
                var oNewP = document.createElement("p");
                var oText = document.createTextNode("Hello Universe!");
                oNewP.appendChild(oText);
                var oOldP = document.getElementsByTagName("p")[0];
                document.body.insertBefore(oNewP, oOldP);
            }
        </script>
    </head>
    <body onload="insertMessage()">
        <p>Hello World!</p>
    </body>
</html>

createDocumentFragment()
一旦把節(jié)點添加到document.body（或者它的后代節(jié)點）中，頁面就會更新并反映出這個變化。對于少量的更新，這是很好的，然而，當要向document添加大量數(shù)據(jù)時，如果逐個添加這些變動，這個過程有可能會十分緩慢。為解決這個問題，可以創(chuàng)建一個文檔碎片，把所有的新節(jié)點附加其上，然后把文檔碎片的內(nèi)容一次性添加到document中，假如想創(chuàng)建十個新段落。

<html>
    <head>
        <title>insertBefore() Example</title>
        <script type="text/javascript">
            function addMessages() {
                var arrText = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"];

                var oFragment = document.createDocumentFragment();

                for (var i=0; i < arrText.length; i++) {
                    var oP = document.createElement("p");
                    var oText = document.createTextNode(arrText[i]);
                    oP.appendChild(oText);
                    oFragment.appendChild(oP);
                }

                document.body.appendChild(oFragment);

            }
        </script>
    </head>
    <body onload="addMessages()">

    </body>
</html>

6.讓特性像屬性一樣
大部分情況下，HTML DOM元素中包含的所有特性都是可作為屬性。
假設(shè)有如下圖像元素：
<img src = "mypicture.jpg" border=0 />
如果要使用核心的DOM來獲取和設(shè)置src和border特性，那么要用getAttribute()和setAttribute()方法：
alert(oImg.getAttribute("src"));
alert(oImg.getAttribute("border"));
oImg.setAttribute("src","mypicture2.jpg");
oImg.setAttribute("border",1);
然而，使用HTML DOM，可以使用同樣名稱的屬性來獲取和設(shè)置這些值：
alert(oImg.src);
alert(oImg.border);
oImg.src="mypicture2.jpg";
oImg.border ="1";
唯一的特性名和屬性名不一樣的特例是class屬性，它是用來指定應(yīng)用于某個元素的一個CSS類，因為class在ECMAScript中是一個保留字，在javascript中，它不能被作為變量名、屬性名或都函數(shù)名。于是，相應(yīng)的屬性名就變成了className;
注：IE在setAttribute()上有很大的問題，最好盡可能使用屬性。

7.table方法
為了協(xié)助建立表格，HTML DOM給<table/>,<tbody/>和<tr/>等元素添加了一些特性和方法。
給<table/>元素添加了以下內(nèi)容：

特性/方法	說明
caption	指向<caption/>元素并將其放入表格
tBodies	<tbody/>元素的集合
tFoot	指向<tfoot/>元素（如果存在）
tHead	指向<thead/>元素（如果存在）
rows	表格中所有行的集合
createTHead()	創(chuàng)建<thead/>元素并將其放入表格
createTFood()	創(chuàng)建<tfoot/>元素并將其放入表格
createCpation()	創(chuàng)建<caption/>元素并將其放入表格
deleteTHead()	刪除<thead/>元素
deleteTFood()	刪除<tfoot/>元素
deleteCaption()	刪除<caption/>元素
deleteRow(position)	刪除指定位置上的行
insertRow(position)	在rows集合中的指定位置上插入一個新行

<tbody/>元素添加了以下內(nèi)容

特性/方法	說明
rows	<tbody/>中所有行的集合
deleteRow(position)	刪除指定位置上的行
insertRow(position)	在rows集合中的指定位置上插入一個新行

<tr/>元素添加了以下內(nèi)容

特性/方法	說明
cells	<tr/>元素中所有的單元格的集合
deleteCell(postion)	刪除給定位置上的單元格
insertCell(postion)	在cells集合的給點位置上插入一個新的單元格