JS知識總結之DOM操做
文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現爲帶有元素、屬性和文本的樹結構（節點樹）。javascript
先來看看下面代碼:html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>DOM</title>
</head>
<body>
<h2><a href="http://www.baidu.com">js DOM</a></h2>
<p>對HTML元素進行操做，可添加、改變或移除CSS樣式等</p>
<ul>
<li>JS</li>
<li>DOM</li>
<li>CSS</li>
</ul>
</body>
</html>複製代碼
將HTML代碼分解爲DOM節點層次圖:java
HTML文檔能夠說由節點構成的集合，DOM節點有:node
1. 元素節點: 上圖中<html>、<body>、<p>等都是元素節點，即標籤。正則表達式
2. 文本節點: 向用戶展現的內容，如<li>...</li>中的JavaScript、DOM、CSS等文本。chrome
3. 屬性節點: 元素屬性，如<a>標籤的連接屬性href="http://www.baidu.com"。數組
節點屬性:瀏覽器
遍歷節點樹:bash
以上圖ul爲例，它的父級節點body,它的子節點3個li,它的兄弟結點h二、P。app
DOM操做:
節點屬性
在文檔對象模型 (DOM) 中，每一個節點都是一個對象。DOM 節點有三個重要的屬性 ：
1. nodeName : 節點的名稱
2. nodeValue ：節點的值
3. nodeType ：節點的類型
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、獲取DOM---getElementById()方法
語法：
document.getElementById("id")複製代碼
2、獲取DOM---getElementsByName()方法
返回帶有指定名稱的節點對象的集合。
語法：
document.getElementsByName("name")複製代碼
與getElementById() 方法不一樣的是，經過元素的 name 屬性查詢元素，而不是經過 id 屬性。
注意:
1. 由於文檔中的 name 屬性可能不惟一，全部 getElementsByName() 方法返回的是元素的數組，而不是一個元素。
2. 和數組相似也有length屬性，能夠和訪問數組同樣的方法來訪問，從0開始。
3、獲取DOM---getElementsByTagName()方法
返回帶有指定標籤名的節點對象的集合。返回元素的順序是它們在文檔中的順序。
語法:
document.getElementsByTagName("Tagname")複製代碼
說明:
1. Tagname是標籤的名稱，如p、a、img等標籤名。
2. 和數組相似也有length屬性，能夠和訪問數組同樣的方法來訪問，因此從0開始。
4、獲取DOM---getElementsByClassName()方法
返回帶有指定class名的節點對象的集合。
語法:
document.getElementsByClassName("Tagname")複製代碼
但不兼容ie8及如下瀏覽器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document.getElementsByClassName在ie8及其如下的兼容性問題</title>
</head>
<body>
<div id="info" class="longzhoufeng"></div>
<script type="text/javascript">
//原生js方法document.getElementsByClassName在ie8及其如下的兼容性問題
function getClassNames(classStr, tagName) {
if(document.getElementsByClassName) {
return document.getElementsByClassName(classStr)
} else {
var nodes = document.getElementsByTagName(tagName), ret = [];
for(i = 0; i < nodes.length; i++) {
if(hasClass(nodes[i], classStr)) {
ret.push(nodes[i])
}
}
return ret;
}
}
function hasClass(tagStr, classStr) {
var arr = tagStr.className.split(/\s+/); //這個正則表達式是由於class能夠有多個,判斷是否包含
for(var i = 0; i < arr.length; i++) {
if(arr[i] == classStr) {
return true;
}
}
return false;
}
var aaa = getClassNames('longzhoufeng', 'div');
alert(aaa[0].id)
alert(aaa[0].className)
// console.log(aaa)
</script>
</body>
</html>
複製代碼
5、DOM屬性操做---getAttribute與setAttribute
getAttribute()方法
經過元素節點的屬性名稱獲取屬性的值。
語法：
elementNode.getAttribute(name)複製代碼
說明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節點。
2. name：要想查詢的元素節點的屬性名字
setAttribute()方法
setAttribute() 方法增長一個指定名稱和值的新屬性，或者把一個現有的屬性設定爲指定的值。
語法：
elementNode.setAttribute(name,value)複製代碼
說明：
1.name: 要設置的屬性名。
2.value: 要設置的屬性值。
注意：
1.把指定的屬性設置爲指定的值。若是不存在具備指定名稱的屬性，該方法將建立一個新屬性。
2.相似於getAttribute()方法，setAttribute()方法只能經過元素節點對象調用的函數
6、DOM操做之訪問子節點---childNodes
訪問選定元素節點下的全部子節點的列表，返回的值能夠看做是一個數組，他具備length屬性。
語法：
elementNode.childNodes複製代碼
注意：
若是選定的節點沒有子節點，則該屬性返回不包含節點的 NodeList。
注意:
1. IE全系列、firefox、chrome、opera、safari兼容問題
2. 節點之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節點，以下圖所示:
若是把代碼改爲這樣:
<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>
運行結果:（IE和其它瀏覽器結果是同樣的）
UL子節點個數:3
節點類型:1複製代碼
7、DOM操做之訪問子節點的第一和最後項---firstChild與lastChild
1、firstChild 屬性返回‘childNodes’數組的第一個子節點。若是選定的節點沒有子節點，則該屬性返回 NULL。
語法：
node.firstChild複製代碼
說明：與elementNode.childNodes[0]是一樣的效果。
2、 lastChild 屬性返回‘childNodes’數組的最後一個子節點。若是選定的節點沒有子節點，則該屬性返回 NULL。
語法：
node.lastChild複製代碼
說明：與elementNode.childNodes[elementNode.childNodes.length-1]是一樣的效果。
注意: 上一節中，咱們知道Internet Explorer 會忽略節點之間生成的空白文本節點，而其它瀏覽器不會。咱們能夠經過檢測節點類型，過濾子節點。 (之後章節講解)
8、DOM操做之訪問父節點---parentNode
獲取指定節點的父節點
語法：
elementNode.parentNode複製代碼
注意:父節點只能有一個。
看看下面的例子,獲取 P 節點的父節點，代碼以下:
<div id="text">
<p id="con"> parentNode 獲取指點節點的父節點</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.nodeName);
</script>複製代碼
運行結果:
parentNode 獲取指點節點的父節點
DIV複製代碼
訪問祖節點:
elementNode.parentNode.parentNode複製代碼
代碼以下:
<div id="text">
<p>
parentNode
<span id="con"> 獲取指點節點的父節點</span>
</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.parentNode.nodeName);
</script>複製代碼
運行結果:
parentNode獲取指點節點的父節點
DIV複製代碼
注意: 瀏覽器兼容問題，chrome、firefox等瀏覽器標籤之間的空白也算是一個文本節點。
9、訪問兄弟節點
1. nextSibling 屬性可返回某個節點以後緊跟的節點（處於同一樹層級中）。
語法：
nodeObject.nextSibling複製代碼
說明：若是無此節點，則該屬性返回 null。
2. previousSibling 屬性可返回某個節點以前緊跟的節點（處於同一樹層級中）。
語法：
nodeObject.previousSibling 複製代碼
說明：若是無此節點，則該屬性返回 null。
注意: 兩個屬性獲取的是節點。Internet Explorer 會忽略節點間生成的空白文本節點（例如，換行符號），而其它瀏覽器不會忽略。
10、DOM節點操做之插入節點---appendChild()
在指定節點的最後一個子節點列表以後添加一個新的子節點。
語法:
appendChild(newnode)複製代碼
參數:
newnode：指定追加的節點。
咱們來看看，div標籤內建立一個新的 P 標籤，代碼以下:
11、DOM節點操做之插入節點---插入節點insertBefore()
insertBefore() 方法可在已有的子節點前插入一個新的子節點。
語法:
insertBefore(newnode,node);
參數:
newnode: 要插入的新節點。
node: 指定此節點前插入節點。
咱們在來看看下面代碼，在指定節點前插入節點。
12、DOM節點操做之刪除節點---removeChild()
removeChild() 方法從子節點列表中刪除某個節點。如刪除成功，此方法可返回被刪除的節點，如失敗，則返回 NULL。
語法:
nodeObject.removeChild(node)複製代碼
參數:
node ：必需，指定須要刪除的節點。
咱們來看看下面代碼，刪除子點。
十3、DOM節點操做之替換元素節點---replaceChild()
replaceChild 實現子節點(對象)的替換。返回被替換對象的引用。
語法：
node.replaceChild (newnode,oldnew ) 複製代碼
參數：
newnode : 必需，用於替換 oldnew 的對象。
oldnew : 必需，被 newnode 替換的對象。
咱們來看看下面的代碼:
效果: 將文檔中的 Java 改成 JavaScript。
注意:
1. 當 oldnode 被替換時，全部與之相關的屬性內容都將被移除。
2. newnode 必須先被創建。
十4、DOM操做之建立元素節點---createElement()
createElement()方法可建立元素節點。此方法可返回一個 Element 對象。
語法：
document.createElement(tagName)複製代碼
參數:
tagName：字符串值，這個字符串用來指明建立元素的類型。
注意：要與appendChild() 或 insertBefore()方法聯合使用，將元素顯示在頁面中。
十5、DOM操做之建立文本節點---createTextNode
createTextNode() 方法建立新的文本節點，返回新建立的 Text 節點。
語法：
document.createTextNode(data)複製代碼
參數：
data : 字符串值，可規定此節點的文本
- 1. jQuery知識總結之DOM操做
- 2. JS中DOM操做總結
- 3. DOM知識總結
- 4. js中Dom操做的我的總結
- 5. js基礎總結01 --操做DOM
- 6. 總結js經常使用的dom操做（js的dom操做API）
- 7. git知識總結-2.git基本操做之操做彙總
- 8. js進階 9 js操做表單知識點總結
- 9. 簡單總結jQuery API中的知識點（上篇）之DOM操做
- 10. jQuery操做DOM之修改DOM結構
- 更多相關文章...
- • 與傳輸層有關的基本知識 - TCP/IP教程
- • Docker 資源彙總 - Docker教程
- • 算法總結-雙指針
- • 算法總結-回溯法
-
每一个你不满意的现在，都有一个你没有努力的曾经。