章目標

• 掌握基本屬性的使用
• 掌握 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 的實體。

字符實體的表示形式：

&字符實體編號;

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

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

案例：美女畫廊

• 需求：

• 獲取一組 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;
};

作業

圖片切換

猜數字游戲