DOM編程從入門到忘記

文檔對象模型（Document Object Model，DOM）是使用 W3C 定義的 API (Application Program Interface) 來操作 HTML 文檔 （此處不局限於 HTML，亦可操作 XHTML、XML 等），使用戶可以與進行頁面交互。

它使用對象的表示方式來表示對應的文檔結構及其中的內容。

通過使用 DOM 提供的 API (Application Program Interface) 可以動態的修改節點（node），也就是對 DOM 樹的直接操作。 瀏覽器中通過使用 JavaScript 來實現對於 DOM 樹的改動。

動態的修改節點可以分為兩步，1. 找到一個節點或者說標簽 2. 操作這個標簽。

一、查找元素

1、直接查找

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

2、間接查找

// 包含標簽中間的文本
parentNode          // 父節點
childNodes          // 所有子節點
firstChild          // 第一個子節點
lastChild           // 最後一個子節點
nextSibling         // 下一個兄弟節點
previousSibling     // 上一個兄弟節點
 
//不包含標簽中間的文本
parentElement           // 父節點標簽元素
children                // 所有子標簽
firstElementChild       // 第一個子標簽元素
lastElementChild        // 最後一個子標簽元素
nextElementtSibling     // 下一個兄弟標簽元素
previousElementSibling  // 上一個兄弟標簽元素

二、操作

1、內容

innerText   純文本
outerText
innerHTML   HTML內容,可以包含標簽
outerHTML  
value       表單標簽選中的值

2、屬性

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

3、class操作

className                // 獲取所有類名
classList                // 獲取所有類名，以列表形式
classList.remove(cls)    // 刪除指定類
classList.add("cls")       // 添加類

document.getElementById('gettxt').classList
>> ["c1","hide"]

4、標簽操作

a.創建標簽

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

b.操作標簽

// 方式一
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])

5、樣式操作

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

<input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="請輸入關鍵字" style="color: gray;" />

<script>
   function Focus(ths){
       ths.style.color = "black";
       if(ths.value == '請輸入關鍵字' || ths.value.trim() == ""){

           ths.value = "";
       }
   }

   function Blur(ths){
       if(ths.value.trim() == ""){
           ths.value = '請輸入關鍵字';
           ths.style.color = 'gray';
       }else{
           ths.style.color = "black";
       }
   }
</script>

6、位置操作

總文檔高度
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代指文檔根節點
*/

7、提交表單

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

8、其他操作

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

三、事件

對於事件需要註意的要點：
a 綁定

方式一
<button onclick="displayDate()">試一試</button>

方式二
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

b 事件觸發

this標簽當前正在操作的標簽，event封裝了當前事件的內容

• this 觸發當前事件的標簽
• event 觸發當前標簽的事件內容 keycoode
• 事件鏈以及跳出
• 自定義事件>預設事件

<a href ="http://baidu.com" onclick="return Func();">sou baidu</a>
// 自定義事件優先順序大於預設事件
// 阻止預設事件 加上 return 
<script>
function Func(){
    alert(轉去百度)；
    return false；  //true執行預設事件，false不執行預設事件
}
</script>