JavaScript的DOM操做

時間 2019-12-09

標籤 javascript dom 欄目 JavaScript 简体版

原文原文鏈接

文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現爲帶有元素、屬性和文本的樹結構（節點樹）。html

HTML文檔能夠說由節點構成的集合，DOM節點有:node

1. 元素節點：上圖中<html>、<body>、<p>等都是元素節點，即標籤。數組

2. 文本節點:向用戶展現的內容，如<li>...</li>中的JavaScript、DOM、CSS等文本。app

3. 屬性節點:元素屬性，如<a>標籤的連接屬性href="http://www.imooc.com"。函數

節點屬性：spa

在文檔對象模型 (DOM) 中，每一個節點都是一個對象。DOM 節點有三個重要的屬性：code

1. nodeName : 節點的名稱htm

2. nodeValue ：節點的值對象

3. nodeType ：節點的類型ip

1、nodeName 屬性: 節點的名稱，是隻讀的。

1. 元素節點的 nodeName 與標籤名相同

2. 屬性節點的 nodeName 是屬性的名稱

3. 文本節點的 nodeName 永遠是 #text

4. 文檔節點的 nodeName 永遠是 #document

2、nodeValue 屬性：節點的值

1. 元素節點的 nodeValue 是 undefined 或 null

2. 文本節點的 nodeValue 是文本自身

3. 屬性節點的 nodeValue 是屬性的值

3、nodeType 屬性: 節點的類型，是隻讀的。如下經常使用的幾種結點類型:

元素類型節點類型

元素 1

屬性 2

文本 3

註釋 8

文檔 9

1、getElementsByName()方法

返回帶有指定名稱的節點對象的集合。

語法：

document.getElementsByName(name)

與getElementById() 方法不一樣的是，經過元素的 name 屬性查詢元素，而不是經過 id 屬性。

注意:

1. 由於文檔中的 name 屬性可能不惟一，全部 getElementsByName() 方法返回的是元素的數組，而不是一個元素。

2. 和數組相似也有length屬性，能夠和訪問數組同樣的方法來訪問，從0開始。

2、getElementsByTagName()方法

返回帶有指定標籤名的節點對象的集合。返回元素的順序是它們在文檔中的順序。

語法:

getElementsByTagName(Tagname)

說明:

1. Tagname是標籤的名稱，如p、a、img等標籤名。

2. 和數組相似也有length屬性，能夠和訪問數組同樣的方法來訪問，因此從0開始。

3、getAttribute()方法

經過元素節點的屬性名稱獲取屬性的值。

語法:

elementNode.getAttribute(name)

說明:

1. elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節點。

2. name：要想查詢的元素節點的屬性名字

4、setAttribute()方法

setAttribute() 方法增長一個指定名稱和值的新屬性，或者把一個現有的屬性設定爲指定的值。

語法：

elementNode.setAttribute(name,value)

說明：

1.name: 要設置的屬性名。

2.value: 要設置的屬性值。

注意：

1.把指定的屬性設置爲指定的值。若是不存在具備指定名稱的屬性，該方法將建立一個新屬性。

2.相似於getAttribute()方法，setAttribute()方法只能經過元素節點對象調用的函數。

5、插入節點appendChild()

在指定節點的最後一個子節點列表以後添加一個新的子節點。

語法:

appendChild(newnode)

參數:

newnode：指定追加的節點。

6、插入節點insertBefore()

insertBefore() 方法可在已有的子節點前插入一個新的子節點。

語法:

insertBefore(newnode,node);

參數:

newnode: 要插入的新節點。

node: 指定此節點前插入節點。

7、刪除節點removeChild()

removeChild() 方法從子節點列表中刪除某個節點。如刪除成功，此方法可返回被刪除的節點，如失敗，則返回 NULL。

語法:

nodeObject.removeChild(node)

參數:

node ：必需，指定須要刪除的節點。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。