Python開發【第十二篇】：DOM

http://www.cnblogs.com/wupeiqi/articles/5643298.html

 

 

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

1、查找元素

一、直接查找

1 2 3 4

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

二、間接查找

1 2 3 4 5 6 7 8 9 10 11 12 13

parentNode           / /  父節點 childNodes           / /  全部子節點 firstChild           / /  第一個子節點 lastChild            / /  最後一個子節點 nextSibling          / /  下一個兄弟節點 previousSibling      / /  上一個兄弟節點   parentElement            / /  父節點標籤元素 children                 / /  全部子標籤 firstElementChild        / /  第一個子標籤元素 lastElementChild         / /  最後一個子標籤元素 nextElementtSibling      / /  下一個兄弟標籤元素 previousElementSibling   / /  上一個兄弟標籤元素

2、操做

一、內容

1 2 3 4 5

innerText   文本 outerText innerHTML   HTML內容 innerHTML   value       值

二、屬性

1 2 3 4 5 6 7 8 9

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

  Demo

三、class操做

1 2 3

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

四、標籤操做

a.建立標籤

1 2 3 4 5 6 7 8

// 方式一 var  tag = document.createElement( 'a' ) tag.innerText =  "wupeiqi" tag.className =  "c1" tag.href =  "http://www.cnblogs.com/wupeiqi"   // 方式二 var  tag =  "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"

b.操做標籤

1 2 3 4 5 6 7 8 9 10 11

// 方式一 var  obj =  "<input type='text' />" ; xxx.insertAdjacentHTML( "beforeEnd" ,obj); xxx.insertAdjacentElement( 'afterBegin' ,document.createElement( 'p' ))   //注意：第一個參數只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'   // 方式二 var  tag = document.createElement( 'a' ) xxx.appendChild(tag) xxx.insertBefore(tag,xxx[1])

五、樣式操做

1 2 3 4

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

  Demo

六、位置操做

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

總文檔高度 document.documentElement.offsetHeight    當前文檔佔屏幕高度 document.documentElement.clientHeight    自身高度 tag.offsetHeight    距離上級定位高度 tag.offsetTop    父定位標籤 tag.offsetParent    滾動高度 tag.scrollTop   /*      clientHeight -> 可見區域：height + padding      clientTop    -> border高度      offsetHeight -> 可見區域：height + padding + border      offsetTop    -> 上級定位標籤的高度      scrollHeight -> 全文高：height + padding      scrollTop    -> 滾動高度      特別的：          document.documentElement代指文檔根節點 */

  test

  Demo-滾動固定

  Demo-滾動菜單

  Demo-滾動高度

七、提交表單

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

八、其餘操做

1 2 3 4 5 6 7 8 9 10 11 12 13 14

console.log                 輸出框 alert                       彈出框 confirm                     確認框    // URL和刷新 location.href               獲取URL location.href =  "url"        重定向 location.reload()           從新加載    // 定時器 setInterval                 屢次定時器 clearInterval               清除屢次定時器 setTimeout                  單次定時器 clearTimeout                清除單次定時器

3、事件

對於事件須要注意的要點：

• this
• event
• 事件鏈以及跳出

this標籤當前正在操做的標籤，event封裝了當前事件的內容。

實例：

  搜索框

  跑馬燈