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);//刪除並返回父節點指定的子節點