DOM

時間 2019-11-09

標籤 dom 欄目 HTML 简体版

原文原文鏈接

文檔對象模型（Document Object Model，DOM）是一種用於HTML和XML文檔的編程接口。它給文檔提供了一種結構化的表示方法，能夠改變文檔的內容和呈現方式。咱們最爲關心的是，DOM把網頁和腳本以及其餘的編程語言聯繫了起來。DOM屬於瀏覽器，而不是JavaScript語言規範裏的規定的核心內容。javascript

查找元素html

1.直接查找java

1 document.getElementById             根據ID獲取一個標籤
2 document.getElementsByName          根據name屬性獲取標籤集合
3 document.getElementsByClassName     根據class屬性獲取標籤集合
4 document.getElementsByTagName       根據標籤名獲取標籤集合

2.間接查找node

 1 parentNode          // 父節點
 2 childNodes          // 全部子節點
 3 firstChild          // 第一個子節點
 4 lastChild           // 最後一個子節點
 5 nextSibling         // 下一個兄弟節點
 6 previousSibling     // 上一個兄弟節點
 7  
 8 parentElement           // 父節點標籤元素
 9 children                // 全部子標籤
10 firstElementChild       // 第一個子標籤元素
11 lastElementChild        // 最後一個子標籤元素
12 nextElementtSibling     // 下一個兄弟標籤元素
13 previousElementSibling  // 上一個兄弟標籤元素

操做編程

1.內容瀏覽器

1 innerText   文本
2 outerText
3 innerHTML   HTML內容
4 innerHTML  
5 value       值

2.屬性app

1 attributes                // 獲取全部標籤屬性
2 setAttribute(key,value)   // 設置標籤屬性
3 getAttribute(key)         // 獲取指定標籤屬性
4  
5 /*
6 var atr = document.createAttribute("class");
7 atr.nodeValue="democlass";
8 document.getElementById('n1').setAttributeNode(atr);
9 */

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="button" value="全選"  onclick="CheckAll();"/>
 9     <input type="button" value="取消" onclick="CancelAll();"/>
10     <input type="button" value="反選" onclick="ReverseCheck();"/>
11 
12     <table border="1" >
13         <thead>
14 
15         </thead>
16         <tbody id="tb">
17             <tr>
18                 <td><input type="checkbox" /></td>
19                 <td>111</td>
20                 <td>222</td>
21             </tr>
22             <tr>
23                 <td><input type="checkbox" /></td>
24                 <td>111</td>
25                 <td>222</td>
26             </tr>
27             <tr>
28                 <td><input type="checkbox" /></td>
29                 <td>111</td>
30                 <td>222</td>
31             </tr>
32             <tr>
33                 <td><input type="checkbox" /></td>
34                 <td>111</td>
35                 <td>222</td>
36             </tr>
37         </tbody>
38     </table>
39     <script>
40         function CheckAll(ths){
41             var tb = document.getElementById('tb');
42             var trs = tb.childNodes;
43             for(var i =0; i<trs.length; i++){
44 
45                 var current_tr = trs[i];
46                 if(current_tr.nodeType==1){
47                     var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
48                     inp.checked = true;
49                 }
50             }
51         }
52 
53         function CancelAll(ths){
54             var tb = document.getElementById('tb');
55             var trs = tb.childNodes;
56             for(var i =0; i<trs.length; i++){
57 
58                 var current_tr = trs[i];
59                 if(current_tr.nodeType==1){
60                     var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
61                     inp.checked = false;
62                 }
63             }
64         }
65 
66         function ReverseCheck(ths){
67             var tb = document.getElementById('tb');
68             var trs = tb.childNodes;
69             for(var i =0; i<trs.length; i++){
70                 var current_tr = trs[i];
71                 if(current_tr.nodeType==1){
72                     var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
73                     if(inp.checked){
74                         inp.checked = false;
75                     }else{
76                         inp.checked = true;
77                     }
78                 }
79             }
80         }
81 
82     </script>
83 </body>
84 </html>
85 
86 Demo

demo

三、class操做編程語言

1 className                // 獲取全部類名
2 classList.remove(cls)    // 刪除指定類
3 classList.add(cls)       // 添加類

四、標籤操做ide

a.建立標籤函數

1 // 方式一
2 var tag = document.createElement('a')
3 tag.innerText = "wupeiqi"
4 tag.className = "c1"
5 tag.href = "http://www.cnblogs.com/wupeiqi"
6  
7 // 方式二
8 var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"

b.操做標籤

 1 // 方式一
 2 var obj = "<input type='text' />";
 3 xxx.insertAdjacentHTML("beforeEnd",obj);
 4 xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
 5  
 6 //注意：第一個參數只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
 7  
 8 // 方式二
 9 var tag = document.createElement('a')
10 xxx.appendChild(tag)

五、樣式操做

1 var obj = document.getElementById('i1')
2  
3 obj.style.fontSize = "32px";
4 obj.style.backgroundColor = "red";

 1 <input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="請輸入關鍵字" style="color: gray;" />
 2 
 3     <script>
 4         function Focus(ths){
 5             ths.style.color = "black";
 6             if(ths.value == '請輸入關鍵字' || ths.value.trim() == ""){
 7 
 8                 ths.value = "";
 9             }
10         }
11 
12         function Blur(ths){
13             if(ths.value.trim() == ""){
14                 ths.value = '請輸入關鍵字';
15                 ths.style.color = 'gray';
16             }else{
17                 ths.style.color = "black";
18             }
19         }
20     </script>
21 
22 Demo

demo

六、提交表單

1 document.geElementById('form').submit()

七、其餘操做

 1 console.log                 輸出框
 2 alert                       彈出框
 3 confirm                     確認框
 4   
 5 // URL和刷新
 6 location.href               獲取URL
 7 location.href = "url"       重定向
 8 location.reload()           從新加載
 9   
10 // 定時器
11 setInterval                 屢次定時器
12 clearInterval               清除屢次定時器
13 setTimeout                  單次定時器
14 clearTimeout                清除單次定時器

事件

綁定事件

要想讓 JavaScript 對用戶的操做做出響應，首先要對 DOM 元素綁定事件處理函數。所謂事件處理函數，就是處理用戶操做的函數，不一樣的操做對應不一樣的名稱。
在JavaScript中，有三種經常使用的綁定事件的方法：

1.在DOM元素中直接綁定:

這裏的DOM元素，能夠理解爲HTML標籤。JavaScript支持在標籤中直接綁定事件，語法爲：
onXXX="JavaScript Code"

其中：

onXXX 爲事件名稱。例如，鼠標單擊事件 onclick ，鼠標雙擊事件 ondouble，鼠標移入事件 onmouseover，鼠標移出事件 onmouseout 等。
JavaScript Code 爲處理事件的JavaScript代碼，通常是函數。

例如，單擊一個按鈕，彈出警告框的代碼有以下兩種寫法。

1.原生函數

1 <input  onclick="alert('謝謝支持')"  type="button"  value="點擊我，彈出警告框" />

2. 自定義函數

1 <input  onclick="myAlert()"  type="button"  value="點擊我，彈出警告框" />
2 <script type="text/javascript">
3 function myAlert(){
4     alert("謝謝支持");
5 }
6 </script>

2.在JavaScript代碼中綁定:

在JavaScript代碼中（即<script>標籤內）綁定事件可使JavaScript代碼與HTML標籤分離，文檔結構清晰，便於管理和開發。
在JavaScript代碼中綁定事件的語法爲：
elementObject.onXXX=function(){
// 事件處理代碼
}
其中：

elementObject 爲DOM對象，即DOM元素。
onXXX 爲事件名稱。

例如，爲 id="demo" 的按鈕綁定一個事件，顯示它的 type 屬性：

1 <input  id="demo"  type="button"  value="點擊我，顯示 type 屬性" />
2 <script type="text/javascript">
3 document.getElementById("demo").onclick=function(){
4     alert(this.getAttribute("type"));  //  this 指當前發生事件的HTML元素，這裏是<div>標籤
5 }
6 </script>

3.綁定事件監聽函數:

綁定事件的另外一種方法是用 addEventListener() 或 attachEvent() 來綁定事件監聽函數。

addEventListener()函數語法：
elementObject.addEventListener(eventName,handle,useCapture);

attachEvent()函數語法：
elementObject.attachEvent(eventName,handle);

例如，爲一個 id="demo" 的按鈕綁定事件，鼠標單擊時彈出警告框：

1 addEvent(document.getElementById("demo"),"click",myAlert);
2 
3 function myAlert(){
4     alert("又是一個警告框");
5 }

相關標籤/搜索

每日一句

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