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：下拉菜单选中属性

案例：登录的验证

dom节点问题（操作之属性操作）(1)

需求：

验证用户协议是否同意
验证用户名必须在 3-6 位之间，包含3和6位

验证密码必须大于等于8位

代码：

案例：注册页面

dom节点问题（操作之属性操作）(2)

需求：

同意协议的复选框选中，让完成注册按钮可用
同意协议的复选框不选中，让完成注册按钮不可用

代码：

// 1. 获取复选框 let agree = document.querySelector('#agree'); // 2. 获取按钮 let registerBtn = document.querySelector('#registerBtn'); // 3. 给复选框注册点击事件 agree.onclick = function () { registerBtn.disabled = !agree.checked; };

案例：购物车的全选功能

dom节点问题（操作之属性操作）(3)

需求：

当点击全选的 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; };

作业图片切换

dom节点问题（操作之属性操作）(4)