DOM 操作之屬性操作

章目標

掌握基本屬性的使用
掌握 textContent 和 innerHTML 的區別

掌握表單屬性的使用
掌握自定義屬性的使用

本章任務

能夠完成美女相冊案例
能夠完成登錄驗證功能

能夠完成注冊頁面的同意協議單選框功能
能夠完成小圖切換大圖功能

屬性操作

在美女畫廊的案例中，我們需要獲取到 img 元素，并修改 img 中顯示的圖片還需要獲取到頁面上的 p 元素修改 p 元素中顯示的內容，本章中我們就來學習如何修改元素的相關屬性。

基本屬性

基本屬性指的是 HTML 標簽本身所具有的屬性(HTML 中的標準屬性)，這些屬性在瀏覽器把 HTML 文檔生成 DOM 樹的時候會自動設置為 DOM 樹上元素節點對象的屬性。

常用的基本屬性：href、title、id、src。

獲取或者設置基本屬性的語法和步驟：

// 獲取 DOM 元素
let dom = document.getElementById('id');
// 獲取屬性
console.log(dom.屬性名稱)
// 設置屬性
dom.屬性名稱 = '屬性值'

獲取元素屬性的值

<a id="link" href="http://www.baidu.com">百度</a>

let link = document.getElementById('link');
// 獲取元素的屬性
console.log(link.id); // "link"
console.log(link.href); // "http://www.baidu.com/"

設置元素屬性的值

let link = document.getElementById('link');
// 設置元素的屬性
link.title = 'google';
link.href = 'http://www.google.com';

你可以嘗試下點擊按鈕修改 img 標簽的圖片(修改 src 屬性)。

更改標簽之間的內容

在美女畫廊中我們需要更改 p 標簽之間的內容，但是如何設置標簽之間的內容？這里沒有對應 HTML 的標準屬性，但是這是一種常見的操作 DOM 對象提供了兩個屬性可以讓我們方便的修改標簽之間的內容：textContent 和 innerHTML，下面我們分別來介紹。

獲取或者設置標簽之間的文本內容

let p = document.getElementById('p');
// 獲取標簽之間的內容
console.log(p.textContent);
// 設置標簽之間的內容
p.textContent = 'Hello DOM';

你可能在其他地方見過 innerText 屬性，注意這是早期 IE 中獲取或者設置標簽之間文本內容的屬性，現代瀏覽器依然支持該屬性，但是 DOM 中規定的標準屬性是 textContent

獲取或者設置標簽之間的 HTML 內容

let p = document.getElementById('p');
// 獲取標簽之間的內容
console.log(p.innerHTML)
// 設置標簽之間的內容
p.innerHTML = '<b>Hello DOM</b>'

textContent 和 innerHTML 的區別

textContent 獲取的內容中包含 HTML 標簽會被忽略
textContent 設置的內容中包含 HTML 標簽會直接顯示

innerHTML 獲取的內容中包含 HTML 會返回標簽和內容
innerHTML 設置的內容中包含 HTML 標簽，標簽會被渲染

HTML 中的字符實體

在網頁中有一些特殊的符號，比如：< >；想要顯示這些符號需要對這些內容進行轉義，也就是使用 HTML 的實體。

字符實體的表示形式：

&字符實體編號;

<   // < 顯示小于號
>   // > 顯示大于號

顯示結果	描述	實體名稱	實體編號
	空格
<	小于號	<	<
>	大于號	>	>
&	和號	&	&
"	引號	"	"
'	撇號	' (IE不支持)	'
￠	分（cent）	¢	¢
￡	鎊（pound）	£	£
￥	元（yen）	¥	¥
€	歐元（euro）	€	€
§	小節	§	§
?	版權（copyright）	©	©
?	注冊商標	®	®
?	商標	™	™
×	乘號	×	×
÷	除號	÷	÷

需要記住其中的空、>、< 的字符實體名稱

案例：美女畫廊

需求：

獲取一組 a 元素
獲取大圖對應的 img 元素

獲取 id 為 des 的 p 元素
遍歷所有的 a 元素，注冊 click 事件

獲取 a 的 href 屬性并賦值給 img 的 src 屬性
獲取當前點擊的 a 的 title 值賦值給 p 的 textContent

取消 a 的默認行為(見下面注意的地方)

代碼：

// 1. 獲取一組a元素
let links = document.getElementsByTagName('a');
// 2. 獲取id為photo的img元素
let photo = document.getElementById('photo');
// 3. 獲取id為des的p元素
let p = document.getElementById('des');
// 4. 循環遍歷a，注冊 click事件
for (let i = 0; i < links.length; i++) {
  links[i].onclick = function () {
    // 4.1 獲取當前點擊的a的href值賦值給 img的src屬性
    photo.src =  this.href;
    // 4.2 獲取當前點擊的a的title值賦值給p的 textContent
    p.textContent = this.title;
    // 4.3 取消a的默認跳轉行為
    return false;
  };
}

注意：給 a 元素注冊點擊事件的時候，如果 a 元素設置了 href 屬性，當觸發 a 的點擊事件并且事件處理函數執行完畢后，會繼續執行跳轉到 href 屬性，這是 a 標簽的默認行為。

我們想要 a 的事件處理函數不跳轉，取消 a 標簽的默認行為可以在事件處理函數中 return false

表單屬性

JavaScript 最初的目的是用來驗證用戶的輸入是否合法，為了實現表單元素的驗證，我們需要獲取用戶輸入的內容，這需要使用到表單元素的屬性。

常用的表單元素屬性

value：用于大部分表單元素的內容獲取(option除外)
type：可以獲取input標簽的類型(輸入框或復選框等)

disabled：禁用屬性
checked：復選框/單選框選中屬性

selected：下拉菜單選中屬性

案例：登錄的驗證

需求：

驗證用戶協議是否同意
驗證用戶名必須在 3-6 位之間，包含3和6位

驗證密碼必須大于等于8位

代碼：

let btn = document.querySelector('#btn');
btn.onclick = function () {
  let username = document.querySelector('#username').value;
  let pwd = document.querySelector('#pwd').value;
  let chk = document.querySelector('#chk');

  if (!chk.checked) {
    alert('請同意用戶協議');
    return false;
  }
  if (username.length < 3 || username.length > 6) {
    alert('用戶名應該在3-6位之間');
    return false;
  }

  if (pwd.length < 8) {
    alert('密碼必須超過8位');
    return false;
  }


  alert('我去登陸了')
  // 阻止 a 的默認行為
  return false;
};

案例：注冊頁面

需求：

同意協議的復選框選中，讓完成注冊按鈕可用
同意協議的復選框不選中，讓完成注冊按鈕不可用

代碼：

// 1. 獲取復選框
let agree = document.querySelector('#agree');
// 2. 獲取按鈕
let registerBtn = document.querySelector('#registerBtn');
// 3. 給復選框注冊點擊事件
agree.onclick = function () {
  registerBtn.disabled = !agree.checked;
};

案例：購物車的全選功能

需求：

當點擊全選的 checkbox

讓所有商品前面的 checkbox 的選中狀態和全選的 checkbox 的選中狀態保持一致

點擊商品前面的 checkbox

如果所有商品全部都選中，全選 checkbox 選中
如果有一個商品沒有選中，全選 checkbox 不選中

代碼：

// 1. 獲取thead中一個復選框
let allck = document.querySelector('#all');
// 2. 獲取tbody中一組復選框
//【功能1】
let cks = document.querySelectorAll('tbody input[type=checkbox]');
// 3. 給thead中一個復選框注冊點擊事件
allck.onclick = function () {
  // 3.1 獲取thead中這個復選框的checked值
  let isOk = allck.checked;
  // 3.2 循環遍歷tbody中的每一個復選框，設置checked值為thead中這個復選框的checked值
  for (let i = 0; i < cks.length; i++) {
    cks[i].checked = isOk;
  }
};

//【功能2】
// 1. 循環遍歷tbody中每一個復選框注冊點擊事件
for (let i = 0; i < cks.length; i++) {
  cks[i].onclick = function () {
   // 2. 獲取tbody中所有的復選框的個數
    let len1 = cks.length; 
    //3. 獲取tbody中選中的復選框的個數
    let len2 = document.querySelectorAll('tbody input:checked').length;
    // 4. 對比是否一致，若一致，則設置thead中全選框為true，否則為false
    if (len1 === len2) {
      allck.checked = true;
    } else {
      allck.checked = false;
    }
  };
}

自定義屬性

到這里為止我們介紹的都是標簽所擁有的屬性，也就是 HTML 中的標準屬性，標簽中還支持自定義屬性，為了到達某些業務的需求，我們可以把數據存儲到標簽的自定義屬性中。

例如：在購物車的案例中，如果我們要刪除某個購物車中的商品的話，我們可以把這條數據的 id 存儲到當前行的自定義屬性中，例如：proId 這個屬性。

自定義屬性有兩種用法，分別是：

使用 DOM 中的標準 API 操作

getAttribute()：獲取標簽行內屬性
setAttribute()：設置標簽行內屬性

removeAttribute()：移除標簽行內屬性
這組 API 也可以操作 HTML 的標準屬性

HTML 5中新增的 data- 形式的自定義屬性

可以通過元素.dataset 來獲取或者設置 data- 后的自定義屬性名稱
未來推薦使用這種方式存儲數據，具有語義

// div
const d5 = document.querySelector('#d5');
const d6 = document.querySelector('#d6');
// 瀏覽器中審查元素，可以看到 d5 的 div 中會有 proId 的屬性
d5.setAttribute('proId', 5)
console.log(d5.getAttribute('prodId'))

// 瀏覽器審查元素，可以看到 data-pro-id 的屬性
// 瀏覽器自動把大寫字母轉換成了 pro-id 的形式
d6.dataset.proId = 6
console.log(d6.dataset.proId)

注意：我們獲取到的自定義屬性或者標準屬性的值都是字符串類型。

注意：元素.自定義屬性的用法

<div id="d5" prodId="5">刪除</div>
<div id="d6">刪除</div>

瀏覽器在處理 HTML 的時候，會把 HTML 文檔轉換為瀏覽器內存中的 DOM 樹，在轉換的過程中，標簽的 HTML 標準屬性會被轉換為 DOM 元素的屬性，但是標簽的自定義屬性不會轉換為 DOM元素的屬性。

const d5 = document.querySelector('#d5');
console.log(d5.proId);  // 打印的結果為 undefined

但是我們可以設置 DOM 元素的自定義屬性，注意，這里的自定義屬性并不會轉換成 HTML 標簽的自定義屬性，僅僅是對象的屬性，我們依然可以通過 DOM 對象，獲取到該屬性的值。

const d6 = document.querySelector('#d6');
d6.proId = 6
console.log(d6.proId);  // 打印結果為 6

案例：點擊小圖切換大圖

<img id="small" width="80px" src="./images/small.jpg" data-big="./images/big.jpg"/>
<img id="big" src="./images/placeholder.jpg" />

let small = document.querySelector('#small');
let big = document.querySelector('#big');

small.onclick = function () {
  // 在事件處理函數中可以通過 this 獲取到觸發事件的元素
  // 這里的 this 就是 small 對象
  let bigImgSrc = this.dataset.big;
  big.src = bigImgSrc;
};

作業

圖片切換

猜數字游戲

HTML DOM 允許 JavaScript 改變 HTML 元素的內容。

改變 HTML 輸出流

JavaScript 能夠創建動態的 HTML 內容：

今天的日期是： Thu Aug 25 2016 09:23:24 GMT+0800 (中國標準時間)

在 JavaScript 中，document.write() 可用于直接向 HTML 輸出流寫內容。

實例

<!DOCTYPE html>

<html>

<body>

document.write(Date());

</script>

</body>

</html>

	絕對不要在文檔加載完成之后使用 document.write()。這會覆蓋該文檔。

改變 HTML 內容

修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。

如需改變 HTML 元素的內容，請使用這個語法：

document.getElementById(id).innerHTML=新的 HTML

本例改變了 <p>元素的內容：

實例

<html>

<body>

<p id="p1">Hello World!</p>

document.getElementById("p1").innerHTML="新文本!";

</script>

</body>

</html>

本例改變了 <h1> 元素的內容：

實例

<!DOCTYPE html>

<html>

<body>

<h1 id="header">Old Header</h1>

var element=document.getElementById("header");

element.innerHTML="新標題";

</script>

</body>

</html>

實例講解：

上面的 HTML 文檔含有 id="header" 的 <h1> 元素
我們使用 HTML DOM 來獲得 id="header" 的元素
JavaScript 更改此元素的內容 (innerHTML)

改變 HTML 屬性

如需改變 HTML 元素的屬性，請使用這個語法：

document.getElementById(id).attribute=新屬性值

本例改變了 <img> 元素的 src 屬性：

實例

<!DOCTYPE html>

<html>

<body>

document.getElementById("image").src="landscape.jpg";

</script>

</body>

</html>

實例講解：

上面的 HTML 文檔含有 id="image" 的 <img> 元素
我們使用 HTML DOM 來獲得 id="image" 的元素
JavaScript 更改此元素的屬性（把 "smiley.gif" 改為 "landscape.jpg"）

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

戲

到目前為止，我們已經學過了JavaScript的一些簡單的語法。但是這些簡單的語法，并沒有和瀏覽器有任何交互。

也就是我們還不能制作一些我們經常看到的網頁的一些交互，我們需要繼續學習BOM和DOM相關知識。

JavaScript分為 ECMAScript，DOM，BOM。

BOM（Browser Object Model）是指瀏覽器對象模型，它使 JavaScript 有能力與瀏覽器進行“對話”。

DOM （Document Object Model）是指文檔對象模型，通過它，可以訪問HTML文檔的所有元素。

Window對象是客戶端JavaScript最高層對象之一，由于window對象是其它大部分對象的共同祖先，在調用window對象的方法和屬性時，可以省略window對象的引用。例如：window.document.write()可以簡寫成：document.write()。

BOM

window對象

看上面的例子你會發現，name直接封裝到了window對象上，了解一下就可以了。

所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。

*如果文檔包含框架（frame 或 iframe 標簽），瀏覽器會為 HTML 文檔創建一個 window 對象，并為每個框架創建一個額外的 window 對象（了解）。

*沒有應用于 window 對象的公開標準，不過所有瀏覽器都支持該對象（了解）。

所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。

全局變量是 window 對象的屬性。全局函數是 window 對象的方法。

接下來要講的HTML DOM 的 document 也是 window 對象的屬性之一。

一些常用的Window方法：（在瀏覽器調試器的console里面輸入下面這些屬性或者方法，就能看到對應的效果）

window.innerHeight - 瀏覽器窗口的內部高度
window.innerWidth - 瀏覽器窗口的內部寬度
window.open() - 打開新窗口
window.close() - 關閉當前窗口 (只能關閉用js的window.open()打開的頁面，了解一下就行了)

window的子對象

navigator對象（了解即可）

瀏覽器對象，通過這個對象可以判定用戶所使用的瀏覽器，包含了瀏覽器相關信息。

navigator.appName // Web瀏覽器全稱

navigator.appVersion // Web瀏覽器廠商和版本的詳細字符串

navigator.userAgent // 客戶端絕大部分信息

navigator.platform // 瀏覽器運行所在的操作系統

看示例：

screen對象（了解即可）

屏幕對象，不常用。

一些屬性：

screen.availWidth - 可用的屏幕寬度
screen.availHeight - 可用的屏幕高度

history對象（了解即可）

window.history 對象包含瀏覽器的歷史。

瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但我們無法查看具體的地址，可以簡單的用來前進或后退一個頁面。

history.forward() // 前進一頁，其實也是window的屬性，window.history.forward()

history.back() // 后退一頁

location對象

window.location 對象用于獲得當前頁面的地址 (URL)，并把瀏覽器重定向到新的頁面。

常用屬性和方法：

location.href 獲取URL

location.href="URL" // 跳轉到指定頁面

location.reload() 重新加載頁面,就是刷新一下頁面

上面的內容需要大家記住的是：

1.window對象

2.window的子對象：location的那幾個屬性和方法

3.其他的作為了解

我們下面來學些比較有意思有用的內容：

彈出框

可以在 JavaScript 中創建三種消息框：警告框、確認框、提示框。

警告框

警告框經常用于確保用戶可以得到某些信息。

當警告框出現后，用戶需要點擊確定按鈕才能繼續進行操作。

語法：

alert("你看到了嗎？");

確認框（了解即可）

確認框用于使用戶可以驗證或者接受某些信息。

當確認框出現后，用戶需要點擊確定或者取消按鈕才能繼續進行操作。

如果用戶點擊確認，那么返回值為 true。如果用戶點擊取消，那么返回值為 false。

語法：

confirm("你確定嗎？")

我們可以根據返回的true和false來判斷一下，然后根據這個值來使用location去跳轉對應的網站。

提示框（了解即可）

提示框經常用于提示用戶在進入頁面前輸入某個值。

當提示框出現后，用戶需要輸入某個值，然后點擊確認或取消按鈕才能繼續操縱。

如果用戶點擊確認，那么返回值為輸入的值。如果用戶點擊取消，那么返回值為默認值，就是第二個參數，如果沒有默認值那么返回null。

語法：

prompt("請在下方輸入","你的答案")

可以通過用戶輸入的內容來判斷我們怎么去進行后面的操作

除了那個警告框（用的也不都），其他的都很少用，比較丑陋，了解一下就行

計時相關（比較重要）

通過使用 JavaScript，我們可以在一定時間間隔之后來執行代碼，而不是在函數被調用后立即執行。我們稱之為計時事件。

setTimeout() 一段時間后做一些事情

語法：

var t=setTimeout("JS語句",毫秒) 第一個參數js語句多數是寫一個函數，不然一般的js語句到這里就直接執行了，先用函數封裝一下，返回值t其實就是一個id值（瀏覽器給你自動分配的）

setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名為 t 的變量中。假如你希望取消這個 setTimeout()，你可以使用這個變量名來指定它。

setTimeout() 的第一個參數是含有 JavaScript 語句的字符串。這個語句可能諸如 "alert('5 seconds!')"，或者對函數的調用，諸如 alertMsg()"。

第二個參數指示從當前起多少毫秒后執行第一個參數（1000 毫秒等于一秒）。

clearTimeout()

語法：

clearTimeout(setTimeout_variable)

舉個例子：

// 在指定時間之后執行一次相應函數

var timer = setTimeout(function(){alert(123);}, 3000)

// 取消setTimeout設置

clearTimeout(timer);

setInterval() 每隔一段時間做一些事情

setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。

setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。

語法：

setInterval("JS語句",時間間隔)

返回值

一個可以傳遞給 Window.clearInterval() 從而取消對 code 的周期性執行的值。

clearInterval()

clearInterval() 方法可取消由 setInterval() 設置的 timeout。

clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值。

語法：

clearInterval(setinterval返回的ID值)

舉個例子：

// 每隔一段時間就執行一次相應函數

var timer = setInterval(function(){console.log(123);}, 3000)

// 取消setInterval設置

clearInterval(timer);

DOM

DOM（Document Object Model）是一套對文檔的內容進行抽象和概念化的方法。

當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被構造為對象的樹。

HTML DOM 樹

DOM標準規定HTML文檔中的每個成分都是一個節點(node)：

文檔節點(document對象)：代表整個文檔
元素節點(element 對象)：代表一個元素（標簽）
文本節點(text對象)：代表元素（標簽）中的文本
屬性節點(attribute對象)：代表一個屬性，元素（標簽）才有屬性
注釋是注釋節點(comment對象)

JavaScript 可以通過DOM創建動態的 HTML：

JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應（鼠標點擊事件，鼠標移動事件等）

查找標簽（和css一樣，你想操作某個標簽需要先找到它）

直接查找

document.getElementById 根據ID獲取一個標簽

document.getElementsByClassName 根據class屬性獲取（可以獲取多個元素，所以返回的是一個數組）

document.getElementsByTagName 根據標簽名獲取標簽合集

例子：

間接查找

parentElement 父節點標簽元素

children 所有子標簽

firstElementChild 第一個子標簽元素

lastElementChild 最后一個子標簽元素

nextElementSibling 下一個兄弟標簽元素

previousElementSibling 上一個兄弟標簽元素

如果查找出來的內容是個數組，那么就可以通過索引來取對應的標簽對象

上面說的這些查找標簽的方法，以后我們很少用，等學了JQuery，會有很好用、更全的查找標簽的功能，上面這些大家簡單練習一下，有個了解就行了。

節點操作

創建節點（就是創建標簽）

語法：

createElement(標簽名)

示例：

var divEle = document.createElement("div");

添加節點

語法：

追加一個子節點（作為最后的子節點）

somenode.appendChild(newnode)；

把增加的節點放到某個節點的前邊。

somenode.insertBefore(newnode,某個節點);

示例：

var imgEle=document.createElement("img");

imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");

var d1Ele = document.getElementById("d1");

d1Ele.appendChild(imgEle);

刪除節點：

語法：

獲得要刪除的元素，通過父元素調用該方法刪除。

somenode.removeChild(要刪除的節點)

替換節點：

語法：

somenode.replaceChild(newnode, 某個節點);

somenode是父級標簽，然后找到這個父標簽里面的要被替換的子標簽，然后用新的標簽將該子標簽替換掉

屬性節點

獲取文本節點的值：

var divEle = document.getElementById("d1")

divEle.innerText #輸入這個指令，一執行就能獲取該標簽和內部所有標簽的文本內容

divEle.innerHTML #獲取的是該標簽內的所有內容，包括文本和標簽

設置文本節點的值：

var divEle = document.getElementById("d1")

divEle.innerText="1"

divEle.innerHTML="<p>2</p>" #能識別成一個p標簽

attribute操作

var divEle = document.getElementById("d1");

divEle.setAttribute("age","18") #比較規范的寫法

divEle.getAttribute("age")

divEle.removeAttribute("age")

// 自帶的屬性還可以直接.屬性名來獲取和設置，如果是你自定義的屬性，是不能通過.來獲取屬性值的

imgEle.src

imgEle.src="..."

獲取值操作

語法：

elementNode.value

適用于以下標簽，用戶輸入或者選擇類型的標簽：

1.input

2.select

3.textarea

var iEle = document.getElementById("i1");

console.log(iEle.value);

var sEle = document.getElementById("s1");

console.log(sEle.value);

var tEle = document.getElementById("t1");

console.log(tEle.value);

例如：頁面上有下面三個標簽

class的操作

className 獲取所有樣式類名(字符串)

首先獲取標簽對象

標簽對象.classList.remove(cls) 刪除指定類

classList.add(cls) 添加類

classList.contains(cls) 存在返回true，否則返回false

classList.toggle(cls) 存在就刪除，否則添加，toggle的意思是切換，有了就給你刪除，如果沒有就給你加一個

　例如：我想將c2的類加到class里面去

指定CSS操作

obj.style.backgroundColor="red"

JS操作CSS屬性的規律：

1.對于沒有中橫線的CSS屬性一般直接使用style.屬性名即可。如：

obj.style.margin

obj.style.width

obj.style.left

obj.style.position

2.對含有中橫線的CSS屬性，將中橫線后面的第一個字母換成大寫即可。如：

obj.style.marginTop

obj.style.borderLeftWidth

obj.style.zIndex

obj.style.fontFamily

我們上面所說的這些修改樣式的方法，是不是應該應用在用戶的某些操作上啊，如果你用戶點擊了某個內容，讓它變變顏色之類的，給用戶一些好看的效果或者指示的效果啊，所以這就要和我們下面要學的事件結合起來要做的事情，通過事件+上面的樣式修改來實現。

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標簽來定義事件動作。

常用事件(就先說一下onfocus，onblur，onclick，onchange吧，其他的回頭再說~~)

onclick 當用戶點擊某個對象時調用的事件句柄。

ondblclick 當用戶雙擊某個對象時調用的事件句柄。

onfocus 元素獲得焦點。 // 練習：輸入框

onblur 元素失去焦點。應用場景：用于表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.

onchange 域的內容被改變。應用場景：通常用于表單元素,當元素內容被改變時觸發.（select聯動）

onkeydown 某個鍵盤按鍵被按下。應用場景: 當用戶在最后一個輸入框按下回車按鍵時,表單提交.

onkeypress 某個鍵盤按鍵被按下并松開。

onkeyup 某個鍵盤按鍵被松開。

onload 一張頁面或一幅圖像完成加載。

onmousedown 鼠標按鈕被按下。

onmousemove 鼠標被移動。

onmouseout 鼠標從某元素移開。

onmouseover 鼠標移到某元素之上。

onselect 在文本框中的文本被選中時發生。

onsubmit 確認按鈕被點擊，使用的對象是form。

綁定方式：

方式一：（已經不常用了，多數用方式二了）

function changeColor(ths) {

ths.style.backgroundColor="green";

}

</script>

注意：

this是實參，表示觸發事件的當前元素。

函數定義過程中的ths為形參。

方式二：

var divEle2 = document.getElementById("d2");

divEle2.onclick=function () {

//console.log(this)

this.innerText="呵呵"; #哪個標簽觸發的這個事件，this就指向誰

}

</script>

注意一個問題：

還有一種解決辦法就是將script標簽寫到body標簽最下面

結合計時器的事件示例，input框里面動態顯示時間:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="x-ua-compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>定時器</title>
 <script> //當js代碼中有找標簽的操作的時候，別忘了頁面加載的時候的順序，以防出現找不到標簽的情況出現，我們可以將這個script標簽放到body標簽最下面，或者用window.onload，<br>這里我沒有放，你們練習的時候放到下面去
 var intervalId; //用來保存定時器對象，因為開始定時器是一個函數，結束定時器是一個函數，兩個函數都是操作的一個定時器，讓他們互相能夠操作這個定時器，<br>就需要一個全局變量來接受一下這個對象
 
 
 //把當前事件放到id為i1的input標簽里面
 function f() {
 var timeStr = (new Date()).toLocaleString(); // 1.拿到當前事件
 var inputEle = document.getElementById("i1");// 2.獲取input標簽對象
 inputEle.value = timeStr; //3.將事件賦值給input標簽的value屬性
 }
 //開始定時任務
 function start() {
 f();
 if (intervalId === undefined) { //如果不加這個判斷條件，你每次點擊開始按鈕，就創建一個定時器，每點一次就創建一個定時器，點的次數多了就會在頁面上生成好多個定時器，<br>并且點擊停止按鈕的時候，只能停止最后一個定時器，這樣不好，也不對，所以加一個判斷
 intervalId = setInterval(f, 1000);
 }
 }
 //結束定時任務
 function end() {
 clearInterval(intervalId); //　清除對應的那個定時器
 intervalId = undefined;
 }
 
 </script>
</head>
<body>
 
<input type="text" id="i1">
<input type="button" value="開始" id="start" onclick="start();">
<input type="button" value="結束" id="end" onclick="end();">
</body>
</html>

事件示例：

搜索框示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>搜索框示例</title>
 
</head>
<body>
 <input id="d1" type="text" value="請輸入關鍵字" onblur="blur()" onfocus="focus()">
 
<script>
function focus(){ //如果在標簽中寫的blur()等方法，沒有傳入this參數，那么我們就需要自己來獲取一下這個標簽，例如下面的getElementById('d1')
 var inputEle=document.getElementById("d1");
 if (inputEle.value==="請輸入關鍵字"){
 inputEle.value="";
 //inputEle.setAttribute('value','')
 }
}
 
function blur(){
 var inputEle=document.getElementById("d1");
 var val=inputEle.value;
 if(!val.trim()){
 inputEle.value="請輸入關鍵字";
 }
}
</script>
</body>
</html>

select聯動：選擇省份，自動列出所有的城市，例如：選擇河北省就顯示河北省所有的市

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="x-ua-compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>select聯動</title>
</head>
<body>
<select id="province">
 <option>請選擇省:</option>
</select>
 
<select id="city">
 <option>請選擇市:</option>
</select>
 
<script>
 data = {"河北省": ["廊坊", "邯鄲"], "北京": ["朝陽區", "海淀區"], "山東": ["威海市", "煙臺市"]};
 
 var p = document.getElementById("province");
 var c = document.getElementById("city");
 //頁面一刷新就將所有的省份都添加到select標簽中
 for (var i in data) {
 var optionP = document.createElement("option"); //創建option標簽
 optionP.innerHTML = i; //將省份的數據添加到option標簽中
 p.appendChild(optionP);//將option標簽添加到select標簽中
 }
 //只要select中選擇的值發生變化的時候，就可以觸發一個onchange事件，那么我們就可以通過這個事件來完成select標簽聯動
 p.onchange = function () {
 //1.獲取省的值
 var pro = (this.options[this.selectedIndex]).innerHTML;//this.selectedIndex是當前選擇的option標簽的索引位置，this.options是獲取所有的option標簽，<br>通過索引拿到當前選擇的option標簽對象，然后.innerHTML獲取對象中的內容，也就是省份
 //還可以這樣獲取省：var pro = this.value;
 var citys = data[pro]; //2. 通過上面獲得的省份去data里面取出該省對應的所有的市
 // 3. 清空option
 c.innerHTML = ""; //清空顯示市的那個select標簽里面的內容
 
 
 //4.循環所有的市，然后添加到顯示市的那個select標簽中
 for (var i=0;i<citys.length;i++) {
 var option_city = document.createElement("option");
 option_city.innerHTML = citys[i];
 c.appendChild(option_city);
 }
 }
</script>
</body>
</html>

window.onload

當我們給頁面上的元素綁定事件的時候，必須等到文檔加載完畢。因為我們無法給一個不存在的元素綁定事件。

window.onload事件在文件加載過程結束的時候觸發。此時，文檔中的所有對象都位于DOM中，并且所有圖像，腳本，鏈接和子框架都已完成加載。

注意：.onload()函數存在覆蓋現象。

在線咨詢

上一篇：html開發筆記08- 字體樣式與顏色（標簽的屬性）
下一篇：詳解視頻編碼實戰

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

DOM 操作之屬性操作

章目標

本章任務

屬性操作

基本屬性

更改標簽之間的內容

案例：美女畫廊

表單屬性

案例：登錄的驗證

案例：注冊頁面

案例：購物車的全選功能

自定義屬性

案例：點擊小圖切換大圖

作業

圖片切換

猜數字游戲

戲

BOM

您的項目需求