DOM常用操作

本文轉載自查看原文 2016-08-27 00:34 15854 DOM/ JavaScript

　　文檔對象模型( DOM, Document Object Model )主要用於對HTML和XML文檔的內容進行操作。DOM描繪了一個層次化的節點樹，通過對節點進行操作，實現對文檔內容的添加、刪除、修改、查找等功能。

一、DOM樹

DOM樹有兩種，分別為節點樹和元素樹。

節點樹：把文檔中所有的內容都看成樹上的節點；
元素樹：僅把文檔中的所有標簽看成樹上的節點。

二、DOM常用操作

2.1 查找節點

document.getElementById('id屬性值');	返回擁有指定id的第一個對象的引用
document/element.getElementsByClassName('class屬性值');	返回擁有指定class的對象集合
document/element.getElementsByTagName('標簽名');	返回擁有指定標簽名的對象集合
document.getElementsByName('name屬性值');	返回擁有指定名稱的對象結合
document/element.querySelector('CSS選擇器');	僅返回第一個匹配的元素
document/element.querySelectorAll('CSS選擇器');	返回所有匹配的元素
document.documentElement	獲取頁面中的HTML標簽
document.body	獲取頁面中的BODY標簽
document.all['']	獲取頁面中的所有元素節點的對象集合型

2.2 新建節點

document.createElement('元素名');	創建新的元素節點
document.createAttribute('屬性名');	創建新的屬性節點
document.createTextNode('文本內容');	創建新的文本節點
document.createComment('注釋節點');	創建新的注釋節點
document.createDocumentFragment( );	創建文檔片段節點

2.3 添加新節點

parent.appendChild( element/txt/comment/fragment );	向父節點的最后一個子節點后追加新節點
parent.insertBefore( newChild, existingChild );	向父節點的某個特定子節點之前插入新節點
element.setAttributeNode( attributeName );	給元素增加屬性節點
element.setAttribute( attributeName, attributeValue );	給元素增加指定屬性，並設定屬性值

添加文本節點，有兩種常見方法：

document.createTextNode('新增文本內容');

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8 <h2>創建文本節點</h2>
 9 <button onclick="addText()">創建文本節點</button>
10 <p></p>
11     <script>
12         function addText(){
13             var element = document.getElementsByTagName('p')[0];
14             var txt = document.createTextNode('新增文本內容'); //創建文本節點
15             element.appendChild(txt); //添加文本節點
16         }
17     </script>
18 </body>
19 </html>

element.innerHTML='新增文本內容'; 【推薦】

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8 <h2>創建文本節點</h2>
 9 <button onclick="addText()">創建文本節點</button>
10 <p></p>
11     <script>
12         function addText(){
13             var element = document.getElementsByTagName('p')[0];
14             element.innerHTML='新增文本內容'; //插入文本內容
15         }
16     </script>
17 </body>
18 </html>

2.4 刪除節點

parentNode.removeChild( existingChild );	刪除已有的子節點，返回值為刪除節點
element.removeAttribute('屬性名');	刪除具有指定屬性名稱的屬性，無返回值
element.removeAttributeNode( attrNode );	刪除指定屬性，返回值為刪除的屬性

2.5 修改節點

parentNode.replaceChild( newChild, existingChild );	用新節點替換父節點中已有的子節點
element.setAttributeNode( attributeName );	若原元素已有該節點，此操作能達到修改該屬性值的目的
element.setAttribute( attributeName, attributeValue );	若原元素已有該節點，此操作能達到修改該屬性值的目的

添加屬性節點，修改屬性值：

element.setAttributeNode( attributeName );

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <h2>屬性節點</h2>
 9     <p class="classValue">增添id屬性，並修改class屬性值</p>
10     <script>
11         var element = document.getElementsByTagName('p')[0];
12         element.setAttribute('id','idValue'); //添加屬性節點
13         element.setAttribute('class','classNewValue');//修改屬性值
14     </script>
15 </body>
16 </html>

element.setAttribute( attributeName, attributeValue );

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <h2>屬性節點</h2>
 9     <p class="classValue">增添id屬性，並修改class屬性值</p>
10     <script>
11         var element = document.getElementsByTagName('p')[0];
12 // 添加屬性節點
13         var attr = document.createAttribute('id'); 
14         attr.value = 'idValue';
15         element.setAttributeNode(attr); 
16 
17 // 修改屬性值
18         var attr = document.createAttribute('class'); 
19         attr.value = 'classNewValue';
20         element.setAttributeNode(attr);
21         
22     </script>
23 </body>
24 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Dom樹結構和dom操作 DOM常用方法總結常用數組、字符串方法總結&獲取元素、DOM操作 Javascript 對DOM節點的操作 js操作bom和dom Python javascript操作DOM 使用jquery操作dom javascript-DOM操作什么是DOM及相關操作 CSS-DOM操作