2. 程式人生 > >javascript DOM元素操作彙總

javascript DOM元素操作彙總

阿新 • • 發佈：2019-02-10

DOM的概念

DOM= Document Object Model，文件物件模型，DOM可以以一種獨立於平臺和語言的方式訪問和修改一個文件的內容和結構。換句話說，這是表示和處理一個HTML或XML文件的常用方法。有一點  DOM很重要，DOM的設計是以物件管理組織（OMG）的規約為基礎的，因此可以用於任何程式語言。最初人們把它認為是一種讓JavaScript在瀏覽器間可移植的方法，不過DOM的應用已經遠遠超出這個範圍。Dom技術使得使用者頁面可以動態地變化，如可以動態地顯示或隱藏一個元素，改變它們的屬性，增加一個元素等，Dom技術使得頁面的互動性大大地增強。[

Javascript中DOM

實現可以使得我們在AJAX中通過Javascript程式碼對HTML和XML資料進行DOM方式的操作，從而做到頁面的動態修改更新和資料的提取處理。

DOM物件樹

DOM將每一個HTML或XML的文件都看待成記憶體中的一個物件樹

瀏覽器中的一個頁面對應一個HTML文件，因此有一顆與之對應的HTML的DOM樹。

瀏覽器中一個頁面可能處理很多個XML的文件，因此可能有很多顆XML的DOM樹。

DOM物件樹種的常用節點

在DOM樹種文件內容對應了很多不同型別的節點，他們都是一個NODE物件。

DOM 程式碼中最常用的任務就是在頁面的DOM樹中導航。比方說，可以通過其“id”屬性定位一個form

，然後開始處理那個form中內嵌的元素和文字。其中可能包含文字說明、輸入欄位的標籤、真正的input 元素，以及其他HTML 元素（如img）和連結（a元素）。如果元素和文字是完全不同的型別，就必須為每種型別編寫完全不同的程式碼。如果使用一種通用節點型別情況就不同了。這時候只需要從一個節點移動到另一個節點，只有當需要對元素或文字作某種特殊處理時才需要考慮節點的型別。如果僅僅在DOM樹中移動，就可以與其他節點型別一樣用同樣的操作移動到元素的父節點或者子節點。只有當需要某種節點型別的特殊性質時，如元素的屬性，才需要對節點型別作專門處理。將DOM樹中的所有物件都看作節點可以簡化操作。記住這一點之後，接下來我們將具體看看DOM
節點構造應該提供什麼，首先從屬性和方法開始。

NODE物件有一個nodeType的屬性可用於判斷節點型別

介面

nodeType常量（IE不支援）

nodeType值

備註

Element

Node.ELEMENT_NODE

1

元素節點（標籤）

Atrr

Node.ATTRIBUTE_NODE

2

屬性節點（屬性）

Text

Node.TEXT_NODE

3

文字節點（文字）

Comment

Node.COMMENT_NODE

8

註釋節點（註釋）

Document

Node.DOCUMENT_NODE

9

文字根節點

元素節點是文件中最常見的節點，HTML或XML文件中的標籤<body>,<input>,<div>都對應DOM樹中的元素節點。

屬性節點表示的是一個元素節點上定義的某個屬性，例如<input>中定義的value屬性就對應DOM樹種的一個屬性節點。

文字節點表示文件中的一段文字資訊，例如HTML文件中定義<div>abcdef</div>其中的“abcdef”就是一個文字節點。

註釋節點對應文件中的註釋資訊，例如<!—Comment Message-->的內容就是一個註釋節點。

根節點顧名思義，表示的整個文件的根，但是需要注意它不對應文件中的任何內容。

在Javascript中有一個特殊的物件document，它可以表示當前HTML頁面的根節點。

DOM物件樹不同節點的名值對比

節點

nodeName（節點名）

nodeValue(節點值)

nodeType值

Element元素節點

對應標籤名的大寫形式如：HTML

Null

1

Attr屬性節點

文件中定義的屬性名

如：type

文件中定義的屬性值如：button

2

Text文字節點

#text

文字內容

如：133

3

Comment註釋節點

#comment

註釋內容

如：comment

8

Document根節點

#document

Null

9

根節點的屬性和方法：

屬性

描述

documentElement

表示文件的根元素節點

在HTML文件中，它表示<html>這個標籤代表的元素節點

方法

描述

getElementById()

返回文件中具有制定id屬性的Element節點

方法引數為節點的id的屬性值

getElementByTagName（）

以陣列方式返回文件中具有制定標籤的Element節點，其書序為在文件中出現的順序

標籤名指的是像body，table這樣的HTML標籤

方法引數為標籤名稱。

createElement()

用指定的標記名建立新的Element節點物件

方法引數為節點標籤的名字

createTextNode()

用指定的文字建立新的文字節點物件

方法引數為文字資訊

createAttibute()

用指定名字建立新的Attr節點物件

方法引數為屬性的名字

createComment()

用指定的字串建立新的Comment節點物件

方法引數為註釋資訊
  1. <scripttype="text/javascript">
  2.             function testapi(){  
  3.                 //獲得根節點元素  
  4.                 var htmlrootElement=document.documentElement;  
  5.                 //獲得指定的元素節點  
  6.                 var divNode=document.getElementById("div1");  
  7.                 //獲得整個頁面所有的div元素節點  
  8.                 var divNodes=document.getElementsByTagName("div");  
  9.                 //建立元素節點  
  10.                 var newdivNode=document.createElement("div");  
  11.                 //建立文字節點  
  12.                 var newTextNode=document.createTextNode("aaaa");  
  13.             }  
  14. </script>

元素節點的屬性和方法

屬性

描述

tagName

元素節點對應的標籤的大寫名字，例<table>元素的標籤名字為Table

方法

描述

getElementsByTabName()

以陣列方式返回當前與元素節點的子孫節點中具有指定標籤名的所有元素節點，其准許為在文件中出現的順序

方法引數為節點的標籤名

getAttribute()

以字串形式返回指定屬性的值

方法引數為屬性名稱

getAttributeNode()

以屬性節點物件的形式返回指定屬性的值

方法引數為屬性名稱

setAttribute()

設定指定的屬性的值，如果該屬性不存在則新增新屬性

方法的第一個引數為屬性的名稱

方法的第二個引數為屬性的值

setAttributeNode()

把指定的屬性節點新增到該元素的屬性列表中

方法的引數為屬性節點物件

has Attribute()

如果該元素具有制定名字的屬性，則返回true

removeAttribute()

從元素節點中刪除指定的屬性

方法引數為屬性的名稱

removeAttributeNode()

從元素節點的屬性列表中刪除指定的Attr節點

方法引數為屬性的名稱

元素節點的操作：

  1. //根據標籤名獲得元素節點  
  2. var divNode2=document.getElementById("div2");  
  3. var divNodes2=divNode2.getElementsByTagName("div");  
  4. //操作屬性  
  5. var inputtext=document.getElementById("inputtext");  
  6. var flag=inputtext.hasAttribute("value");  
  7. inputtext.setAttribute("value", "aaacede");  
  8. var textValue=inputtext.getAttribute("value");  
  9. flag=inputtext.hasAttribute("value");   
  10. inputtext.removeAttribute("value");  
  11. alert("完成");  

另一種操作元素屬性的方法：

  1. //另一種操作元素屬性的方法   
  2. .value="另一種操作元素屬性的方法";  

兩種方法的差異（以onclick事件為例）：

當我們操縱按鈕單擊事件時，第一種方式不顯示結果，而第二種方式才顯示

  1. var clic=document.getElementById("clic");   
  2. //不顯示結果，操縱無效  
  3. clic.setAttribute("onclick", function(){alert("不顯示")});  
  4. //顯示結果，操縱有效  
  5.  clic.onclick=function(){alert("顯示")};  

屬性節點的屬性和方法（因為很少用，所以這裡就不舉例了）：

屬性

描述

Name

屬性名

Value

屬性值

所有節點（Node）都擁有的屬性和方法

屬性

描述

attributes

表示該節點的所有屬性節點物件的陣列

nodeType

代表節點的型別

nodeName

返回節點的名字

nodeValue

代表節點的內容

childNodes

當前節點的所有子節點陣列，如果沒有子節點，則返回空陣列

parentNode

返回當前節點的父節點，如果沒有父節點，則返回null

firstChild

返回當前節點的一個子節點，如果沒有子節點，則返回null

lastChild

返回當前節點的最後一個子節點，如果沒有子節點，則返回null

nextSibling

返回當前節點的下一個兄弟節點。如果沒有這樣的節點，則返回null

previousSibling

返回當前節點的上一個兄弟節點，如果沒有這樣的節點則返回null

方法

描述

hasChildNodes()

如果當前節點擁有子節點，則返回true

appendChild()

給當前節點增加一個子節點，增加的子節點位於當前節點的所有子節點的末尾

方法引數為Node物件

InsertBefore()

插入一個節點，為止在當前節點的指定子節點之前，如果指定子節點不存在，則執行效果和appendChild方法相同。

如果插入的已經是當前節點的子節點，則將這個節點移動到指定節點前

方法第一個引數是要插入的節點。

方法的第二個引數是當前節點的指定子節點，新插入的節點位於這個節點之前。

removeChild()

從文件樹中刪除當前節點的指定子節點，同時返回指定的子節點。

方法的引數是呀哦刪除的子節點。

replaceChild()

用另一個節點替換當前節點的一個子節點，並且返回指定的子節點。

方法第二個引數是新的子節點。

方法第二個引數是被替換的子節點。

cloneNode()

複製當前節點，或者複製當前節點以及它的所有子孫節點。

方法引數為true或false。True表示遞迴的複製所有子孫節點，false表示只複製當前節點。
  1. //所有節點屬性程式碼演示：  
  2.    //返回元素節點包含的屬性節點  
  3.    var attributes=inputtext.attributes;  
  4.    //nodeName nodeValue nodeType  
  5.    var inputName=inputtext.nodeName;  
  6.    var nodetype=inputtext.nodeType;  
  7.    var nodevalue=inputtext.nodeValue;  
  8.    //獲取所有的子節點  
  9.    var childs=divNode2.childNodes;  
  10.    //獲取父節點  
  11.    var parent=divNode2.parentNode;  
  12.    //獲取第一個子節點和最後一個子節點  
  13.    var first=divNode2.firstChild;  
  14.    var last=divNode2.lastChild;  
  15.    //獲取兄弟節點  
  16.    var next=divNode2.nextSibling;  
  17.    var last=divNode2.previousSibling;  
  18.    //判斷是否有子節點  
  19.    var flag2=divNode2.hasChildNodes();  
  20.    //追加節點  
  21.    newdivNode.appendChild(newTextNode);  
  22.    divNode2.appendChild(newdivNode);  
  23.    var new2=document.createElement("div");  
  24.    var text2=document.createTextNode("insert");  
  25.    new2.appendChild(text2);  
  26.    divNode2.insertBefore(new2,divNode2.firstChild);  
  27.    var new3=document.createElement("div");  
  28.    var text3=document.createTextNode("insert3");  
  29.    new3.appendChild(text3);  
  30.    divNode2.insertBefore(new3, null);  
  31.    divNode2.insertBefore(new3,divNode2.firstChild);  
  32.    //移除節點  
  33.    var remove=divNode2.removeChild(new3);  
  34.    var new4=document.createElement("div");  
  35.    var text4=document.createTextNode("insert4");  
  36.    new4.appendChild(text4);  
  37.    //如果第一個引數曾經是當前節點的子節點，那麼這個引數對應的節點會被移動到第二個引數對應的節點的位置。  
  38.    //第二個引數對應的節點被刪除了。  
  39.    var replace=divNode2.replaceChild(new4,divNode2.getElementsByTagName("div")[0]);  
  40.   //clone節點  
  41.   var clone1=divNode2.cloneNode(true);  
  42.   var clone2=divNode2.cloneNode(false);  

IE與FireFox的DOM物件樹差異

相關推薦

javascript DOM元素操作彙總

DOM的概念 DOM= Document Object Model，文件物件模型，DOM可以以一種獨立於平臺和語言的方式訪問和修改一個文件的內容和結構。換句話說，這是表示和處理一個HTML或XML文件的常用方法。有一點  DOM很重要，DOM的設計是以物件管理組織（O

jquery dom元素操作

總結 下一個 rip idf app ext 元素操作 節點 插入 jquery 獲取父節點，兄弟節點，在節點內插入內容。①$("#test1").parent() // 父節點 ②$("#test1").next() //下一個

JavaScript DOM元素長寬等比例縮放

我們經常遇到長寬隨視窗變化等比縮放的例子，比如視訊網上中間的視訊案例、等比縮放的盒子圖片等等。 公式 我們已經知道根據比例求長寬公式是： 求寬度 w = h / ratio 求高度 h = w * ratio 準備 根據公式此時我們需要準備，一個外容器dom和一個進行等比縮放的容器dom

(6)JavaScript DOM元素，文字，屬性的區別

元素節點如下 屬性節點如下 文字節點如下 獲取當前節點的時候 getElementByid（“bj”） 通過id屬性獲取單個節點 那麼它的第一個子節點 .firstNode 是文字節點 .lastNode同樣也是文字節點 {

JavaScript---DOM基礎操作總結表

JavaScript組成 JavaScript組成 作用 相容性 ECMAScript:直譯器、翻譯   幾乎沒有相容性問題 DOM:Docum

javascript DOM基礎操作

sna fir del 非ie 麻煩 iou 沒有 mode 節點和 DOM（Document Object Model）即文檔對象模型，針對HTML和XML文檔的API（應用程序接口）。DOM描繪了一個層次化的節點樹，運行開發人員添加、移除和修改頁面的某一部分。DOM脫胎

JavaScript--Dom操作元素的樣式

在前端開發中，有時候需要動態修改的網頁元素的樣式，這裡將使用JS動態修改元素樣式的方法做個小結： 網頁結構： 按鈕： 　　標籤：input    型別：button     id：btn         

JavaScript操作DOM元素中的class屬性

在互動性較強的Web應用中，經常需要動態更改指定元素的屬性值，假設變數e是頁面中一個元素的引用，根據W3C DOM標準，可以在JavaScript中使用e.getAttribute('屬性名')來取得屬性的值，並且用e.setAttribute('屬性名', '值')來設定屬

JavaScript HTML DOM元素節點常用操作介面

在文件物件模型 (DOM) 中，每個節點都是一個物件。DOM 節點有三個重要的屬性 ： 1. nodeName : 節點的名稱

JavaScript HTML DOM 元素（節點）

enc javascrip item pan 效果 demo 移動元素 成功 append 在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性 ： 1. nodeName : 節點的名稱 2. nodeValue ：節點的值 3. no

JavaScript DOM操作及擴展

解釋 多層 click 這樣的 cap exe 不能 tails isp 什麽是DOM？？？ DOM(Document Object Model 文檔對象模型)是針對HTML和XML文檔的一個API（應用程序編程接口）。 註意，IE中的所有DOM對象都是以COM（組件對象

Dojo操作dom元素的樣式

resource isp .html document tco cati move 替換 nta 1.使用dom-style的set方法，可以直接設置dom元素的樣式屬性，這和使用dom元素的style屬性效果一樣。 2.使用dom-class的replace方法可以替換某

JavaScript基礎 -- 常見DOM樹操作

tle rep Language ron -s name 增加 lan scrip 1.創建並增加元素節點 <ul id="ul"> <li>1</li> <li>2</li> <li>3</

[ Day51 ]Python之路----JavaScript --DOM操作

pro 句柄 mar conf 屬性列表 輸入框 毫秒 歷史 asc JavaScript可以操作整個瀏覽器，但是這個瀏覽器對象比較大，因此為了操作方便，又分為三個對象。 1.BOM對象 BOM對象主要操作地址欄，瀏覽歷史，窗口高度等。 2.DOM對象 DOM對象主要操作網

JavaScript基礎及函數，BOM，DOM的節點及DOM節點操作

需要 兩個 進行 history des s系列 onclick 系統信息 回車 使用js的三種方式 1.直接在HTML標簽中，使用事件屬性，調用js代碼: <button onclick="alert(‘點我呀‘)">點我啊！<tton>

javascript教程系列40:DOM中操作樣式的兩種方式

AS color 單位 css 註意 pan col ntb javascrip 1 DOM中操作樣式的兩種方式 1 通過元素的style屬性 註意: 通過style屬性設置樣式時,css中要寫單位的屬性,在js代碼中也要加單位 //html <div id="bo

JavaScript DOM操作案例點擊按鈕選擇菜單

cli option code scrip itl -c nbsp round span 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=

JavaScript DOM操作案例點擊按鈕顯示隱藏div優化後

元素 clas src com 點擊事件 cti charset round dom <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

JavaScript DOM操作案例點擊按鈕修改div的屬性

asc onclick comm cli 顏色 代碼 val dom 按鈕 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

JavaScript DOM操作案例點擊按鈕實現網頁開關燈

lang 網頁 dom操作 javascrip tle function () click pre <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"