章目标

• 掌握基本属性的使用
• 掌握 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;
};

作业

图片切换

猜数字游戏