javascript DOM 操作

javascript是一門網頁編程語言,其第一要務是編寫頁面應用程序,而這一切的基礎是:javascript DOM 操作。

什麼是DOM?在‘javascript概述’這篇文章裏面曾經提及過這個概念,但是沒有詳細說明,現在補上。

不難理解,頁面中的節點元素是可以抽象爲樹狀結構的。而瀏覽器也正是按照樹狀結構來解析頁面元素的。所謂DOM就是Document Object Model,即文檔對象模型。按照樹狀結構對頁面中的節點進行歸納分類。javascript有自己的一套規則可以方便地對這棵文檔樹進行各種操作,即javascript DOM 操作。

javascript對於DOM的操作主要可以分爲以下幾種類別:

第一:查找節點

1.通過id查找節點:var _node = document.getElementById(id);//(返回id對應的節點)注意這個方法只能有document對象調用在整個文檔中查找節點

2.通過標籤名查找:var _nodes = document.getElementsByTagName('a');//返回查找節點下的所有a標籤節點(注:這個方法可以由任何節點調用),返回一個數組

3.訪問特定節點的父子兄弟節點,假設現有一節點node

node.childNodes:node節點的所有子節點

node.firstChild:node節點的第一個子節點

node.lastChild:node節點的最後一個子節點

node.parentNode:node節點的父節點

node.nextSibling:node節點的下一個兄弟節點

node.previousSibling:node節點的上一個兄弟節點

第二:讀寫節點元素屬性

讀取節點元素屬性:node.getAttribute("id");

修改節點元素屬性:node.setAttribute("id","value");

通過這個屬性可以實現修改節點樣式表的功能。

第三:創建節點

1.創建DOM節點 

var newDiv = document.createElement("div");//新建一個div節點

2.創建文本節點
        關於文本節點,多說幾句。
        一個元素內部的文本實際上也是這個元素的一個節點,訪問方式是nodeName.nodeValue,可讀寫
        創建文本節點的方式很簡單:
            var textNode = document.createTextNode("這裏是文本節點內的值");

第四:插入節點

有三種方式將新節點插入到DOM文檔中。
    1.在某節點之前插入
        parentNode.insertBefore(newNode,oldNode);
        通過父節點的調用,將新節點插在舊節點之前
    2.在最後插入
        parentNode.appendChild(newNode);
        通過父節點的調用,將新節點插在子節點的末尾
    3.替換節點
        parentNode.replaceChild(newNode,oldNode);
        通過父節點的調用,把舊節點用新節點替換

特別注意,這幾個方法都必須由其父節點調用才行

第五:刪除節點

調用父節點的removeChild方法
    var deletednode = parentNode.removeChild(deletedNode);//刪除並返回父節點指定的子節點

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章