比較詳細的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元素中包含的所有特性都是可作為屬性。
假設有如下圖像元素：
<img src = "mypicture.jpg" border=0 />
如果要使用核心的DOM來獲取和設置src和border特性，那么要用getAttribute()和setAttribute()方法：
alert(oImg.getAttribute("src"));
alert(oImg.getAttribute("border"));
oImg.setAttribute("src","mypicture2.jpg");
oImg.setAttribute("border",1);
然而，使用HTML DOM，可以使用同樣名稱的屬性來獲取和設置這些值：
alert(oImg.src);
alert(oImg.border);
oImg.src="mypicture2.jpg";
oImg.border ="1";
唯一的特性名和屬性名不一樣的特例是class屬性，它是用來指定應用于某個元素的一個CSS類，因為class在ECMAScript中是一個保留字，在javascript中，它不能被作為變量名、屬性名或都函數(shù)名。于是，相應的屬性名就變成了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集合的給點位置上插入一個新的單元格

8.遍歷DOM
NodeIterator，TreeWalker
DOM Level2的功能，這些功能只有在Mozilla和Konqueror/Safari中才有，這里就不介紹了。

uni-app如何讀取本地json數(shù)據(jù)文件并渲染到頁面上
在做前端開發(fā)的時候,少不了要用一些模擬的json的數(shù)據(jù)來進行測試,這篇文章主要給大家介紹了關于uni-app如何讀取本地json數(shù)據(jù)文件并渲染到頁面上的相關資料,需要的朋友可以參考下
2022-08-08
uniapp使用uni-imei插件獲取手機的設備號
uniapp框架是一款開發(fā)跨平臺應用的工具,它支持iOS、Android以及Web等多個平臺,在這些平臺中,uniapp可以訪問某些設備的硬件信息,這篇文章主要給大家介紹了關于uniapp使用uni-imei插件獲取手機設備號的相關資料,需要的朋友可以參考下
2024-01-01
基于Bootstrap實現(xiàn)城市三級聯(lián)動
這篇文章主要為大家詳細介紹了基于BootStrap實現(xiàn)城市三級聯(lián)動，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-11-11
Popup彈出框添加數(shù)據(jù)實現(xiàn)方法
這篇文章主要為大家詳細介紹了Popup彈出框添加數(shù)據(jù)的簡單實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
JavaScript中arguments的使用方法
這篇文章主要介紹了JavaScript中arguments的使用方法，arguments?是一個對應于傳遞給函數(shù)的參數(shù)的類數(shù)組對象。下文詳細介紹，需要的小伙伴可以參考一下
2022-05-05
JS制作簡易計算器的實例代碼
這篇文章主要介紹了JS制作簡易計算器的方法，文中實例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下
2020-07-07
Prototype框架詳解
Prototype是一個JavaScript框架，旨在簡化動態(tài)Web應用程序的開發(fā)。原型被稱為作為一個單一的文件分發(fā)的prototype.js，本文給大家介紹prototype框架，感興趣的朋友一起學習吧
2015-11-11
JavaScript知識點總結(jié)(四)之邏輯OR運算符詳解
這篇文章主要介紹了JavaScript知識點總結(jié)(四)之邏輯OR運算符詳解的相關資料,在JavaScript中，邏輯OR運算符用||表示。本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧
2016-05-05
innerHTML 和 getElementsByName 在IE下面的bug 的解決
innerHTML 真的一個麻煩的東西。IE 和 firefox 對dom 處理的方式不是很一樣。IE 對動態(tài)加載的很多dom 不支持動態(tài)更新。
2010-04-04
原生JS實現(xiàn)圖片跑馬燈特效
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)圖片跑馬燈特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10