DOM 學習

時間 2019-12-21

標籤 dom 學習欄目 HTML 简体版

原文原文鏈接

Document Object Model (DOM)是HTML和XML文檔的編程接口。它提供了上述文檔的一種結構化表示，同時也定義了一種經過程序來改變文檔結構，風格，以及內容的方式。javascript

DOM與BOM的關係：BOM包含DOM

html

文檔根節點java

var de = document.documentElement;

好比,在chrome瀏覽器blank頁面的控制檯console.log(document.documentElement)打印出源碼
node

console.log(de.tagName)//打印出根元素

獲取body元素
var d1 = document.getElementsByTagName("body"); console.log(d1)

經常使用節點類型chrome

元素節點——文檔中具備標籤的節點
文本節點——標籤中不是註釋的文本塊

經常使用的節點屬性編程

nodeType——節點類型，元素節點是1，文本節點是3
nodeValue——節點值，元素節點爲空，文本節點的nodeValue屬性即爲文本內容
firstChild——該元素節點包含的第一個子節點
lastChild——該元素節點包含的最後一個子節點
nextSibling——該節點的後一個兄弟節點
previousSibling——該節點的前一個兄弟節點
childNodes——子節點列表,能夠經過node.childNodes[index]（或node.childNodes.item(index)）來獲取子節點
nodeName——節點名稱，對於元素節點，返回tagName,對於文本，則返回#text
demo.html

<!DOCTYPE html>
<html>
<head>
    <title>html</title>
</head>
<body>
 <div>
     <p>
         <li>test1</li>
         <li>test2</li>
         <li>test3</li>
         <li>test4</li>
     </p>
     <button type='button' onclick='test()'>test</button>
 </div>
 <script type="text/javascript">
    function test(){
        alert('sometest')
    }
 </script>
</body>
</html>

firstChild:html文檔的第一個元素head

lastChild 最後一個元素是body

使用節點類型檢測,每一個節點都有nodeType屬性，指明它的節點類型。對於元素節點，它的值是1，而對於文本節點，它的值是3
console.log(document.documentElement.lastChild.nodeType)
console.log(document.documentElement.firstChild.nodeType)

獲取屬性數組

<li id='d1' style='font-size:100px;'>test1</li>

var d = document.getElementById('d1'); console.log(d.style)//將全部的style的全部屬性所有打印出來了瀏覽器

方法總結：app

JavaScript→Dom就是C#→.Net Framwork。less

window對象：

alert方法，彈出消息對話框。

confirm方法，顯示「肯定」、「取消」對話框。

navigate方法，從新導航到指定的地址。

setInterval每隔一段時間執行指定的代碼，第一個參數爲代碼的字符串，第二個參數爲間隔時間（單位毫秒），返回值爲定時器的標識

clearInterval取消setInterval的定時執行，至關於Timer中的Enabled=False。由於setInterval能夠設定多個定時，因此clearInterval要指定清除那個定時器的標識，即setInterval的返回值。

setTimeout也是定時執行，可是不像setInterval那樣是重複的定時執行，只執行一次。

clearTimeout也是清除定時。

showModalDialog彈出模態對話框。

showModelessDialog彈出非模態窗口。

window.location.href='http://www.baidu.com'，從新導向新的地址。

window.location.reload() 刷新頁面。

window.event是很是重要的屬性，用來得到發生事件時的信息，事件不侷限於window對象的事件，全部元素的事件均可以經過event屬性取到相關信息。

clientX、clientY 發生事件時鼠標在客戶區的座標；

screenX、screenY 發生事件時鼠標在屏幕上的座標；

offsetX、offsetY 發生事件時鼠標相對於事件源（好比點擊按鈕時觸發onclick）的座標。

.srcElement，得到事件源對象。幾個事件共享一個事件響應函數用。

keyCode，發生事件時的按鍵值。

button，發生事件時鼠標按鍵，1爲左鍵，2爲右鍵，3爲左右鍵同時按。

altKey屬性，bool類型，表示發生事件時alt鍵是否被按下，相似的還有ctrlKey、shiftKey屬性

screen對象，屏幕的信息

clipboardData對象，對粘貼板的操做。clearData("Text")清空粘貼板；getData("Text")讀取粘貼板的值，返回值爲粘貼板中的內容；setData("Text",val)，設置粘貼板中的值。

【<input type="button" value="推薦給好友" onclick="clipboardData.setData('Text','推薦給你一個網站，很好玩'+location.href);alert('已經將網址放到粘貼板中，發給你的好友便可');"/>

重複賬號：<input type="text" onpaste="alert('爲保證賬號的正確，請勿粘貼賬號');return false;" />】

【clipboardData.setData('Text', clipboardData.getData('Text') + '本文來rohelm博客，轉載請註明來源。' + location.href);】

body對象的事件

onload：網頁加載完畢時觸發。

onunload：網頁關閉（或者離開）後觸發。

onbeforeunload：在網頁準備關閉（或者離開）後觸發。在事件中爲"window.event.returnValue賦值（要顯示的警告消息），這樣窗口離開（好比前進、後退、關閉）就會彈出確認消息

document對象的事件

document.write('<font color=red>你好</font>');

getElementById方法，根據元素的Id得到對象,getElementsByName返回值是對象數組。

getElementsByTagName，得到指定標籤名稱的元素數組.

createElement方法來建立具備指定標籤的DOM對象，而後經過調用某個元素的appendChild方法將新建立元素添加到相應的元素下。

<doctype html>
 <html>
 <head>
      <title>遍歷對象，動態添加</title>
       <meta charset='utf-8'>
  </head>
 <body>
 <input type="button" onclick="test()" value="生成列表"/>
  <div id="news"></div>
</body>

<script type="text/javascript">
     function test(){
         var di = document.getElementById('news')
         var ta = document.createElement('table')
         ta.border = 1;
         var obj = {'1':'no','2':'arr','3':'fdsfaed'}
         for(var i in obj){
             var tr = document.createElement('tr')
             var td = document.createElement('td')
             td.innerHTML=i
             tr.appendChild(td)
             ta.appendChild(tr)
             var td2 = document.createElement('td')
             td2.innerHTML=obj[i]
             tr.appendChild(td)
             tr.appendChild(td2)
             ta.appendChild(tr)
         }
         di.appendChild(ta)
     }
</script>
</html>

getAttribut/getAttribut

<doctype html>
 <html>
 <head>
      <title>set/getAttribute</title>
      <meta charset='utf-8'> 
  </head>
 <body>
   <div id='d1'>test1</div>
   <button type='button' onclick='test()'>testBtn</button>
</body>
<script type="text/javascript">
     function test(){
       var prop = document.getElementById('d1')
           alert(prop.getAttribute('id'))
           prop.setAttribute('title','none')
           alert(prop.getAttribute('title'))
          
         }
</script>
</html>

相關標籤/搜索

每日一句

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