[TOC]
# **属性知识小结**
>[info] 1、标签属性：
> 语法：属性名="属性值"
> 使用DOM对象操作：
> 获取元素（标签）属性值：对象名.属性名
> 设置元素（标签）属性值：对象名.属性名="属性值"
>
> 2、DOM对象的属性
> 获取DOM对象属性值：对象名.属性名
> 设置DOM对象属性值：对象名.属性名="属性值"
>
> 3、样式属性：
> 语法，{属性名：属性值}；
> 使用DOM对象操作：
> 获取元素（样式）属性值：对象名.style.属性名
> 设置元素（样式）属性值：对象名.style.属性名="属性值"
>
> 通过DOM元素设置样式属性的时候，样式属性是行内样式，优先级最高。在设置样式属性的时候，宽、高、位置样式的值是字符串类型，要加上单位 px
# 非表单元素的属性（掌握）
  所谓表单元素，就是可以放在form表单标签中存储用户输入的数据的标签，如 input、select标签，而非表单元素就是只能展示数据，不能存储用户输入的数据 的标签，如 a、img标签。
  常用的非表单元素属性有 href、title、id、src、className，使用DOM对象操作属性，常用操作有 使用元素获取属性值，以及使用元素修改属性值。以下以a、img标签为例
html和css代码
```
<!-- html代码 -->
<a id="link" href="http://www.baidu.com" title="百度链接">百度</a>
<img id="girl" src="images/a.jpg" alt="美女图片" title="美女"/>
```
JavaScript代码
```
//获取标签的DOM对象
var link = document.getElementById('link');
var girl = document.getElementById('girl');
//获取DOM对象的属性值
console.log(link.id);
console.log(link.href);
console.log(link.title);
console.log(girl.id);
console.log(girl.src);
console.log(girl.title);
//设置DOM对象的属性值
link.href='http://www.taobao.com';
link.title='淘宝';
```
## **需求
1、**点击按钮，显示或隐藏 div**
需求分析：
以下是每一个步骤的功能实现
****1、全选- 点击父checkbox全选 (1)在父checkbox上注册点击事件; (2)当点击父checkbox时, 让所有子checkbox的状态始终跟父checkbox的状态保持一致;
html和css代码
~~~
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>小米Mix2s</td>
<td>3000</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>华为P30</td>
<td>3800</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>小米手环</td>
<td>200</td>
</tr>
</tbody>
</table>
<input type="button" value=" 反 选 " id="btn">
</div>
~~~
JavaScript代码
```
// 1: 全选- 点击父checkbox全选
// 获取tbody元素
var j_tb = document.getElementById('j_tb');
// 获取事件源
var j_cbAll = document.getElementById('j_cbAll');
// (1) 在父checkbox上注册点击事件
j_cbAll.onclick = function () {
// (2) 当点击父checkbox时, 让所有子checkbox的状态始终跟父checkbox的状态保持一致;
var inputs = j_tb.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'checkbox') {
// 所有子checkbox的状态始终跟父checkbox的状态保持一致
input.checked = j_cbAll.checked;
}
}
}
```
2、全选- 点击所有子checkbox全选 (1)在所有的子checkbox上注册点击事件; (2)当每次点击子checkbox时, 判断所有子checkbox是否全部被选中,如果全部被选中,则要去同步选中父checkbox, 如果有一个子checkbox没有被选中,则父checkbox不要选中;
以下代码是在第一步骤基础上写的，包括了第一部分的代码
~~~
// ====================== 1: 全选- 点击父checkbox全选 ======================
// 获取tbody元素
var j_tb = document.getElementById('j_tb');
// 获取所有的子checkbox
var inputs = j_tb.getElementsByTagName('input');
// 获取事件源
var j_cbAll = document.getElementById('j_cbAll');
// (1) 在父checkbox上注册点击事件
j_cbAll.onclick = function () {
// (2) 当点击父checkbox时, 让所有子checkbox的状态始终跟父checkbox的状态保持一致;
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'checkbox') {
// 所有子checkbox的状态始终跟父checkbox的状态保持一致
input.checked = j_cbAll.checked;
}
}
}
// ====================== 2: 全选- 点击所有子checkbox全选 ======================
// (1) 在所有的子checkbox上注册点击事件;
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断当前遍历到的input是否是复选框,如果不是复选框,则不注册事件
if (input.type !== 'checkbox') {
// 不是复选框
continue;
}
// 在子checkbox上注册点击事件
input.onclick = function () {
// alert('测试子checkbox');
// (2) 当每次点击子checkbox时, 判断所有子checkbox是否全部被选中,如果全部被选中,则要去同步选中父checkbox,
// 如果有一个子checkbox没有被选中,则父checkbox不要选中;
// 记录子checkbox是否都被选中的标记
var isCheckedAll = true;
// 遍历所有input, 获取所有子checkbox
for (var j = 0; j < inputs.length; j++) {
var input = inputs[j];
if (input.type !== 'checkbox') {
// 不是复选框
continue;
}
if (input.checked === false) {
// 存在不选中的子checkbox,则父checkbox同步不选中;
isCheckedAll = false;
}
}
// 如果子checkbox全部被选中,则要去同步选中父checkbox;
// 同步父checkbox
j_cbAll.checked = isCheckedAll;
}
}
~~~
3、反选 (1)在反选按钮上注册点击事件; (2)当点击反选按钮时, 将所有的子checkbox的状态取反, 然后判断所有的子checkbox是否都被选中, 如果所有的子checkbox都已经被选中,则要选中父checkbox,否则不选中父checkbox;
以下代码是在第二步骤基础上写的，包括了第二部分的代码
~~~
// ======================= 1: 全选- 点击父checkbox全选 =======================
// 获取tbody元素
var j_tb = document.getElementById('j_tb');
// 获取所有的子checkbox
var inputs = j_tb.getElementsByTagName('input');
// 获取反选按钮元素
var btn = document.getElementById('btn');
// 获取事件源
var j_cbAll = document.getElementById('j_cbAll');
// (1) 在父checkbox上注册点击事件
j_cbAll.onclick = function () {
// (2) 当点击父checkbox时, 让所有子checkbox的状态始终跟父checkbox的状态保持一致;
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'checkbox') {
// 所有子checkbox的状态始终跟父checkbox的状态保持一致
input.checked = j_cbAll.checked;
}
}
}
// ====================== 2: 全选- 点击所有子checkbox全选 =====================
// (1) 在所有的子checkbox上注册点击事件;
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断当前遍历到的input是否是复选框,如果不是复选框,则不注册事件
if (input.type !== 'checkbox') {
// 不是复选框
continue;
}
// 在子checkbox上注册点击事件
input.onclick = function () {
// alert('测试子checkbox');
// (2) 当每次点击子checkbox时, 判断所有子checkbox是否全部被选中,如果全部被选中,则要去同步选中父checkbox,
// 如果有一个子checkbox没有被选中,则父checkbox不要选中;
synJcbAll();
}
}
// 3: ============================== 反选 ==============================
// (1) 在反选按钮上注册点击事件
btn.onclick = function () {
// (2) 当点击反选按钮时, 将所有的子checkbox的状态取反, 然后判断所有的子checkbox是否都被选中,
// 如果所有的子checkbox都已经被选中,则要选中父checkbox,否则不选中父checkbox;
// 将所有的子checkbox的状态取反
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断当前遍历到的input是否是复选框,如果是,则设置复选框的状态取反
if (input.type !== 'checkbox') {
// 不是复选框,则跳到下一次循环
continue;
}
input.checked = !input.checked;
// 如果所有的子checkbox都已经被选中,则要选中父checkbox,否则不选中父checkbox
synJcbAll();
}
}
// 抽取公共代码带函数中, 以便以后重复调用
// 用于将子checkbox的状态同步到父checkbox的函数
function synJcbAll() {
// 记录子checkbox是否都被选中的标记
var isCheckedAll = true;
// 遍历所有input, 获取所有子checkbox
for (var j = 0; j < inputs.length; j++) {
var input = inputs[j];
if (input.type !== 'checkbox') {
// 不是复选框
continue;
}
if (input.checked === false) {
// 存在不选中的子checkbox,则父checkbox同步不选中;
isCheckedAll = false;
}
}
// 如果子checkbox全部被选中,则要去同步选中父checkbox;
// 同步父checkbox
j_cbAll.checked = isCheckedAll;
}
~~~
**小结** 重点：全选反选效果； 难点：当选中所有 子checkbox时，选中父checkbox；**以下是每一个步骤的功能实现
1、全选- 点击父checkbox全选 (1)在父checkbox上注册点击事件; (2)当点击父checkbox时, 让所有子checkbox的状态始终跟父checkbox的状态保持一致;
html和css代码
~~~
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>小米Mix2s</td>
<td>3000</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>华为P30</td>
<td>3800</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>小米手环</td>
<td>200</td>
</tr>
</tbody>
</table>
<input type="button" value=" 反 选 " id="btn">
</div>
~~~
JavaScript代码
~~~
// 1: 全选- 点击父checkbox全选
// 获取tbody元素
var j_tb = document.getElementById('j_tb');
// 获取事件源
var j_cbAll = document.getElementById('j_cbAll');
// (1) 在父checkbox上注册点击事件
j_cbAll.onclick = function () {
// (2) 当点击父checkbox时, 让所有子checkbox的状态始终跟父checkbox的状态保持一致;
var inputs = j_tb.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'checkbox') {
// 所有子checkbox的状态始终跟父checkbox的状态保持一致
input.checked = j_cbAll.checked;
}
}
}
~~~
2、全选- 点击所有子checkbox全选 (1)在所有的子checkbox上注册点击事件; (2)当每次点击子checkbox时, 判断所有子checkbox是否全部被选中,如果全部被选中,则要去同步选中父checkbox, 如果有一个子checkbox没有被选中,则父checkbox不要选中;
以下代码是在第一步骤基础上写的，包括了第一部分的代码
~~~
// ====================== 1: 全选- 点击父checkbox全选 ======================
// 获取tbody元素
var j_tb = document.getElementById('j_tb');
// 获取所有的子checkbox
var inputs = j_tb.getElementsByTagName('input');
// 获取事件源
var j_cbAll = document.getElementById('j_cbAll');
// (1) 在父checkbox上注册点击事件
j_cbAll.onclick = function () {
// (2) 当点击父checkbox时, 让所有子checkbox的状态始终跟父checkbox的状态保持一致;
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'checkbox') {
// 所有子checkbox的状态始终跟父checkbox的状态保持一致
input.checked = j_cbAll.checked;
}
}
}
// ====================== 2: 全选- 点击所有子checkbox全选 ======================
// (1) 在所有的子checkbox上注册点击事件;
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断当前遍历到的input是否是复选框,如果不是复选框,则不注册事件
if (input.type !== 'checkbox') {
// 不是复选框
continue;
}
// 在子checkbox上注册点击事件
input.onclick = function () {
// alert('测试子checkbox');
// (2) 当每次点击子checkbox时, 判断所有子checkbox是否全部被选中,如果全部被选中,则要去同步选中父checkbox,
// 如果有一个子checkbox没有被选中,则父checkbox不要选中;
// 记录子checkbox是否都被选中的标记
var isCheckedAll = true;
// 遍历所有input, 获取所有子checkbox
for (var j = 0; j < inputs.length; j++) {
var input = inputs[j];
if (input.type !== 'checkbox') {
// 不是复选框
continue;
}
if (input.checked === false) {
// 存在不选中的子checkbox,则父checkbox同步不选中;
isCheckedAll = false;
}
}
// 如果子checkbox全部被选中,则要去同步选中父checkbox;
// 同步父checkbox
j_cbAll.checked = isCheckedAll;
}
}
~~~
3、反选 (1)在反选按钮上注册点击事件; (2)当点击反选按钮时, 将所有的子checkbox的状态取反, 然后判断所有的子checkbox是否都被选中, 如果所有的子checkbox都已经被选中,则要选中父checkbox,否则不选中父checkbox;
以下代码是在第二步骤基础上写的，包括了第二部分的代码
~~~
// ======================= 1: 全选- 点击父checkbox全选 =======================
// 获取tbody元素
var j_tb = document.getElementById('j_tb');
// 获取所有的子checkbox
var inputs = j_tb.getElementsByTagName('input');
// 获取反选按钮元素
var btn = document.getElementById('btn');
// 获取事件源
var j_cbAll = document.getElementById('j_cbAll');
// (1) 在父checkbox上注册点击事件
j_cbAll.onclick = function () {
// (2) 当点击父checkbox时, 让所有子checkbox的状态始终跟父checkbox的状态保持一致;
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'checkbox') {
// 所有子checkbox的状态始终跟父checkbox的状态保持一致
input.checked = j_cbAll.checked;
}
}
}
// ====================== 2: 全选- 点击所有子checkbox全选 =====================
// (1) 在所有的子checkbox上注册点击事件;
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断当前遍历到的input是否是复选框,如果不是复选框,则不注册事件
if (input.type !== 'checkbox') {
// 不是复选框
continue;
}
// 在子checkbox上注册点击事件
input.onclick = function () {
// alert('测试子checkbox');
// (2) 当每次点击子checkbox时, 判断所有子checkbox是否全部被选中,如果全部被选中,则要去同步选中父checkbox,
// 如果有一个子checkbox没有被选中,则父checkbox不要选中;
synJcbAll();
}
}
// 3: ============================== 反选 ==============================
// (1) 在反选按钮上注册点击事件
btn.onclick = function () {
// (2) 当点击反选按钮时, 将所有的子checkbox的状态取反, 然后判断所有的子checkbox是否都被选中,
// 如果所有的子checkbox都已经被选中,则要选中父checkbox,否则不选中父checkbox;
// 将所有的子checkbox的状态取反
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断当前遍历到的input是否是复选框,如果是,则设置复选框的状态取反
if (input.type !== 'checkbox') {
// 不是复选框,则跳到下一次循环
continue;
}
input.checked = !input.checked;
// 如果所有的子checkbox都已经被选中,则要选中父checkbox,否则不选中父checkbox
synJcbAll();
}
}
// 抽取公共代码带函数中, 以便以后重复调用
// 用于将子checkbox的状态同步到父checkbox的函数
function synJcbAll() {
// 记录子checkbox是否都被选中的标记
var isCheckedAll = true;
// 遍历所有input, 获取所有子checkbox
for (var j = 0; j < inputs.length; j++) {
var input = inputs[j];
if (input.type !== 'checkbox') {
// 不是复选框
continue;
}
if (input.checked === false) {
// 存在不选中的子checkbox,则父checkbox同步不选中;
isCheckedAll = false;
}
}
// 如果子checkbox全部被选中,则要去同步选中父checkbox;
// 同步父checkbox
j_cbAll.checked = isCheckedAll;
}
~~~
**小结** 重点：全选反选效果； 难点：当选中所有 子checkbox时，选中父checkbox；**
2. 给按钮注册事件；
3. 在事件处理函数中，控制div显示、隐藏，并控制按钮文字的切换；
  显示和隐藏效果的控制：定义一个变量，用作控制div显示、隐藏的标记。
html和css代码
```
<style>
#box {
background-color: red;
width: 200px;
height: 200px;
}
.show{
display: block;
}
.hidden{
display: none;
}
</style>
<input type="button" id="showOrHidden" value="隐藏"/>
<div id="box">我是div</div>
```
JavaScript代码
```
//1、获取按钮对象
var showOrHidden = document.getElementById('showOrHidden');
var box = document.getElementById('box');
//显示 或 隐藏 标记
var flag = true;
// 2、注册事件
showOrHidden.onclick = function () {
// 3、点击按钮显示或隐藏div
// 4、修改按钮的文字
if (flag) {
//隐藏div
//class在JS中是关键字，不能作为属性名，DOM中规定了对象中对应标签class属性的名称为className
box.className = 'hidden';
// showOrHidden.value='显示';
this.value = '显示';
flag = false;
} else {
// 显示div
box.className = 'show';
// showOrHidden.value='隐藏';
this.value = '隐藏';
flag = true;
}
}
```
>[info] 在DOM对象中，除了使用 对象.属性名 的格式访问属性，还可以使用 this关键字，下面总结this关键字的使用。
> this在JS代码中表示一个指针，它总是指向某个对象（引用类型），this指向谁是由函数的调用方式来决定的。函数可以作为普通函数、对象的方法、构造函数来调用，如下是this在几种调用方式中的指向。
> 1. 普通函数调用中： this 指向 window对象
> 2. 构造函数调用中： this 指向 当前被正在被创建的对象
> 3. 对象方法调用中： this 指向 调用该方法的对象
> 4. 事件处理函数调用中： this 指向 当前事件源
<br>
**2、美女相册**
html和css代码
```
<style type="text/css">
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
}
#imagegallery a {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery a img {
border: 0;
}
</style>
<h2>
美女相册
</h2>
<div id="imagegallery">
<a href="images/1.jpg" title="美女A">
<img src="images/1-small.jpg" width="100px" alt="美女1"/>
</a>
<a href="images/2.jpg" title="美女B">
<img src="images/2-small.jpg" width="100px" alt="美女2"/>
</a>
<a href="images/3.jpg" title="美女C">
<img src="images/3-small.jpg" width="100px" alt="美女3"/>
</a>
<a href="images/4.jpg" title="美女D">
<img src="images/4-small.jpg" width="100px" alt="美女4"/>
</a>
</div>
<div style="clear:both"></div>
<img id="image" src="images/placeholder.png" alt="" width="450px"/>
<p id="des">选择一个图片</p>
```
通过案例效果可以知道，我们需要先解决a标签的默认跳转问题，即先取消a标签的默认跳转行为。
```
<a id="goToGirl" href="images/1.jpg">
<img src="images/1-small.jpg" alt="美女"/>
</a>
//要在a标签跳转之前取消跳转行为
var goToGirl = document.getElementById('goToGirl');
goToGirl.onclick=function () {
alert('a标签');
// 取消a标签的默认跳转行为
return false;
}
```
**美女相册实现思路：**
1. 获取所有的a标签对象
2. 循环给所有的a标签对象注册事件
3. 取消a标签的默认跳转行为：在事件处理函数中取消a标签的默认跳转行为，关键代码为 return false；
4. 设置大图片：点击哪张小图就将其对应的大图路径设置到大图位置，此时使用this关键字获取当前事件源（被点击的标签）。
5. 设置图片标题：使用innerText获取或设置p标签中的内容（后面课程会讲解innerText）
```
// (1) 获取到所有的a标签;
// 获取div元素
var imagegallery = document.getElementById('imagegallery');
// 从div元素中获取所有的a标签元素
var links = imagegallery.getElementsByTagName('a');
// 遍历集合,获取到集合中所有的a标签元素
for (var i = 0; i < links.length; i++) {
var link = links[i];
// (2) 在所有的a标签上注册点击事件;
link.onclick = function () {
// alert('美女!');
// (4) 设置大图片: 当点击a标签时,获取到被点击的a标签的href属性值,设置到img标签的src属性中;
// 获取img标签元素
var image = document.getElementById('image');
// image.src = link.href;
image.src = this.href;
// link 代表的是什么?
// console.log(link);
// this 指向什么对象?
// console.log(this);
// 获取p标签
var des = document.getElementById('des');
// console.dir(des);
// console.log(des.innerText);
des.innerText = this.title;
// (3) 取消a标签的默认跳转行为: 核心代码 return false;
return false;
}
}
```
## **innerHTML和innerText**
  innerHTML和innerText的区别：
  nnerHTML中包含HTML标签和文本内容；包含HTML页面中的所有换行和空格。
  innerText中只包含HTML标签中的文本内容，而过滤掉了HTML标签；如果有换行或多个空格，都会当做一个空格处理。
```
<div id="box">
我是一个div
<span id="sp">我是 一个span</span>
</div>
```
```
var box = document.getElementById('box');
//innerHTML中包含HTML标签和文本内容；包含HTML页面中的所有换行和空格。
console.dir(box);
console.log(box.innerHTML);
//innerText中只包含HTML标签中的文本内容，而过滤掉了HTML标签；不包含换行和空格，
// 如果有换行或多个空格，都会当做一个空格处理。
console.log(box.innerText);//获取标签内部文本
//获取标签内部文本
console.log(box.textContent);
```
通过上面演示可知，浏览器会将我们写的html标签解析掉，导致我们无法在页面原样输出标签。而在实际开发中，我们有时候需要将标签原样输出标签到浏览器中显示，怎么办？这时候我们就需要用到转义符。
HTML转义符
>[info] " "
> ' '
> & &
> < < // less than 小于
> > > // greater than 大于
> 空格
> © ©
转义后的代码
```
<div id="box">
我是一个div
<span id="sp">我是 一个span</span>
<b>"加粗"</b> 字体
<!--转义符-->
<b>加粗</b>字体
</div>
```
>[info] 注意：DOM对象中还有一个对象跟innerText的功能相似，就是textContent，innerText 和 textContent 两个属性存在浏览器兼容性问题。
> 在旧版FF中，只支持textContent
> 在旧版IE中，只支持innerText
模拟解决 innerText和textContent在浏览器中的兼容性问题
我们知道，在不同的旧版浏览器中，要么只支持 textContent，要么只支持 innerText。如果支持则属性返回string类型的数据，不支持则返回undefined，因此我们可写出以下兼容性代码。
```
//模拟解决 innerText和textContent在浏览器中的兼容性问题
function getInnerText(element) {
if (typeof element.innerText==='string') {
return element.innerText;
}else {
return element.textContent;
}
}
```
代码思路: 当元素中innerText属性值不为undefined时,则使用innerText属性,否则使用textContent属性.
<br>
# 表单元素属性
* value 用于获取和设置表单元素的内容
* type 用于获取和设置input标签的类型
* disabled 获取和设置标签状态（true表示禁用, false表示启用）
* checked 复选框选中属性（true表示选中, false表示不选中）
* selected 下拉菜单选中属性（true表示选中, false表示不选中）
## 需求
**1、点击按钮禁用文本框**
需求分析：禁用之后的文本框，不能在手动输入值，但是可以使用代码赋值。
html和css代码
```
<input type="button" id="bnt" value="按钮"/>
<br>
<input type="text" id="txt" value="你好！"/>
```
JavaScript代码
```
// 需求：点击按钮时，禁用文本框
//获取标签对应的DOM对象（元素）
var bnt = document.getElementById('bnt');
//注册事件
bnt.onclick=function () {
var txt = document.getElementById('txt');
//获取标签属性值
console.log(txt.value);
console.log(txt.type);
console.log(txt.disabled);
//设置标签属性值
txt.disabled=true;
txt.value='hello world!'
}
```
>[info]1、disabled、checked、selected 属性 在HTML中只有两种可能的效果（比如选择/不选中，可编辑/不可编辑），对应DOM中的属性值为 true或false。
>2、在html标签中，只要标签中写了disabled属性，不管disabled的值是什么，标签都会是禁用状态；
**2、当页面加载完毕, 先给每个文本框设置任意值，当点击按钮时, 获取所有文本框的值，并使用 | 作为分隔符拼接文本框的值 ;**
需求分析：
（1）循环给每个文本框赋值
（2）当点击按钮时，获取文本框的值并使用 | 分隔文本框的值，然后输出
  方式一：使用字符串拼接；
  方式二：使用数组；
html和css代码
```
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="button" id="btn" value="获取文本框的值"/><br>
```
JavaScript代码
方式一：使用字符串拼接
```
// 1、给文本框赋值
//获取所有input元素
var inputs = document.getElementsByTagName('input');
//遍历input元素
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
//判断，如果类型为text，则设置值
if (input.type === 'text') {
input.value = i;
}
}
// 2、点击按钮获取文本框的值并按指定格式（| 分割）输出
var bnt = document.getElementById('btn');
var str = '';
bnt.onclick=function () {
for (var i = 0; i < inputs.length; i++) {
//字符串拼接
var input = inputs[i];
if (input.type === 'text') {
str += input.value + '|';
}
}
//使用substr截取掉最后一个 |
str = str.substr(0,str.length-1);
console.log(str);
}
```
方式二：使用数组的join方法
我们可以使用数组的方式代替字符串拼接，这样避免了大量的字符串拼接，代码执行效率更高。使用join方法指定分割符为 “ | ” 即可。
```
//使用数组的方式（效率较高，推荐使用）
var bnt = document.getElementById('btn');
var array = [];
bnt.onclick=function () {
for (var i = 0; i < inputs.length; i++) {
//字符串拼接
var input = inputs[i];
if (input.type === 'text') {
array.push(input.value);
}
}
var str = array.join('|');
console.log(str);
}
```
**3、检测用户名和密码是否合法**
需求描述：检测用户名是否是3-8位，密码是否是6-12位，如果不满足则高亮显示文本框
需求分析：
1. 获取表单元素; \
2. 判断表单元素中的值是否合法;
3. 如果用户名和密码都合法,则执行登录,否则不能执行登录;
html和css代码
```
c<style>
.cls {
background-color: lightyellow;
}
</style>
用户名：<input id="userName" type="text"/><br><br>
密码：<input id="password" type="password"/><br>
<input id="login" type="button" value=" 登 录 "/>
```
JavaScript代码
// (1) 获取事件源,注册事件;
```
var login = document.getElementById('login');
login.onclick = function () {
// (2) 判断用户名和密码是否合法, 如果不合法,则高亮显示文本框;
var userName = document.getElementById('userName');
if (userName.value.length < 3 || userName.value.length > 8) {
// 不合法
userName.className = 'cls';
// 终止方法的执行
return;
}else {
// 合法, 清除文本框高亮
userName.className = '';
}
var password = document.getElementById('password');
if (password.value.length < 6 || password.value.length > 12) {
// 不合法
password.className = 'cls';
// 终止方法的执行
return;
}else {
// 合法,清除文本框高亮
password.className = '';
}
// (3) 如果用户名和密码都合法, 则执行登录操作, 否则不执行登录操作;
console.log('执行登录...');
}
```
**2、点击按钮时，随机选中下拉框中的的某一项**
需求分析：
1. 给按钮注册点击事件
2. 获取下拉框所有的option
3. 随机生成\[1,5\]之间的一个整数，作为option的随机索引
4. 根据随机索引获取option，并设置该option为选中状态
获取option的长度：**option.length **
设置选中：**option.selected = true;**
html和css代码
```
<input type="button" id="btnSet" value="选中"/>
```
JavaScript
```
// 1、注册点击事件
var btnSet = document.getElementById('btnSet');
btnSet.onclick=function () {
// 2、获取所有的option元素
var selectCity = document.getElementById('selectCity');
var options = selectCity.getElementsByTagName('option');
console.log(selectCity);
console.log(options);
// 3、生成option个数之内的随机数 [0, 5)
// Math.random() [0, 1)
// Math.random() * 5 [0, 5)
// Math.random() * options.length [0, options.length)
var index = parseInt(Math.random() * options.length);
// 4、根据随机数（下标）选中option
var option = options[index];
option.selected = true;
}
```
**3、实现搜索文本框**
需求分析：
当文本框获得焦点时，如果文本框中的内容是 "请输入关键字"，则清空文本框，并将文本框字体颜色设置成黑色。
当文本框失去焦点时，如果文本框中的内容为空，则设置文本框的内容为 "请输入关键字"，并将文本框字体颜色设置成灰色。如果文本框中内容为 "请输入关键字"，则将文字设置成灰色即可。
html和css代码
```
c<style>
.cls {
background-color: lightyellow;
}
</style>
用户名：<input id="userName" type="text"/><br><br>
密码：<input id="password" type="password"/><br>
<input id="login" type="button" value=" 登 录 "/>
```
JavaScript代码
```
// (1) 获取事件源,注册事件;
var login = document.getElementById('login');
login.onclick = function () {
// (2) 判断用户名和密码是否合法, 如果不合法,则高亮显示文本框;
var userName = document.getElementById('userName');
if (userName.value.length < 3 || userName.value.length > 8) {
// 不合法
userName.className = 'cls';
// 终止方法的执行
return;
}else {
// 合法, 清除文本框高亮
userName.className = '';
}
var password = document.getElementById('password');
if (password.value.length < 6 || password.value.length > 12) {
// 不合法
password.className = 'cls';
// 终止方法的执行
return;
}else {
// 合法,清除文本框高亮
password.className = '';
}
// (3) 如果用户名和密码都合法, 则执行登录操作, 否则不执行登录操作;
console.log('执行登录...');
}
```
**2、点击按钮时，随机选中下拉框中的的某一项**
需求分析：
1. 给按钮注册点击事件
2. 获取下拉框所有的option
3. 随机生成\[1,5\]之间的一个整数，作为option的随机索引
4. 根据随机索引获取option，并设置该option为选中状态
获取option的长度：option.length
设置选中：option.selected = true;
html和css代码
```
<input type="button" id="btnSet" value="选中"/>
<select id="selectCity">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">广州</option>
<option value="5">贵港</option>
</select>
```
JavaScript代码
```
// 1、注册点击事件
var btnSet = document.getElementById('btnSet');
btnSet.onclick=function () {
// 2、获取所有的option元素
var selectCity = document.getElementById('selectCity');
var options = selectCity.getElementsByTagName('option');
console.log(selectCity);
console.log(options);
// 3、生成option个数之内的随机数 [0, 5)
// Math.random() [0, 1)
// Math.random() * 5 [0, 5)
// Math.random() * options.length [0, options.length)
var index = parseInt(Math.random() * options.length);
// 4、根据随机数（下标）选中option
var option = options[index];
option.selected = true;
}
```
**3、实现搜索文本框**
需求分析：
当文本框获得焦点时，如果文本框中的内容是 "请输入关键字"，则清空文本框，并将文本框字体颜色设置成黑色。
当文本框失去焦点时，如果文本框中的内容为空，则设置文本框的内容为 "请输入关键字"，并将文本框字体颜色设置成灰色。如果文本框中内容为 "请输入关键字"，则将文字设置成灰色即可。
html和css代码
```
<style>
.gray {
color: gray;
}
.black {
color: black;
}
</style>
<input type="text" class="gray" id="txtSearch" value="请输入关键字"/>
<input type="button" value=" 搜 索 "/>
```
JavaScript代码
```
var txtSearch = document.getElementById('txtSearch');
// （1）当文本框获得焦点时，如果文本框中的内容是 "请输入关键字"，则清空文本框，并将文本框字体颜色设置成黑色。
//注册事件
txtSearch.onfocus = function () {
// alert('666')
if (this.value == '请输入关键字') {
//清空文本框
this.value='';
// this.value.length = 0;
}
//将文本框字体颜色设置成黑色
this.className='black';
}
// （2）当文本框失去焦点时，如果文本框中的内容为空，则设置文本框的内容为 "请输入关键字"，并将文本框字体颜色设置成灰色。如果文本框中内容为 "请输入关键字"，则将文字设置成灰色即可。
//注册事件
txtSearch.onblur=function () {
//txtSearch.value === ''
if (this.value.length===0 || this.value==='请输入关键字'){
this.value='请输入关键字';
}
this.className='gray';
}
```
**4、全选反选（重点）**
```
border-collapse:collapse;/*设置表格为紧缩型表格,即细线表格。*/
```
全选和反选功能，在开发中应用得非常多，以下通过需求分析，学习如何使用JS实现全选反选功能。
该功能可分为如下三大步骤：
>[info]需求: 全选和反选
需求分析:
1、全选- 点击父checkbox全选
(1)在父checkbox上注册点击事件;
(2)当点击父checkbox时, 让所有子checkbox的状态始终跟父checkbox的状态保持一致;
2、全选- 点击所有子checkbox全选
(1)在所有的子checkbox上注册点击事件;
(2)当每次点击子checkbox时, 判断所有子checkbox是否全部被选中,如果全部被选中,则要去同步选 中父checkbox, 如果有一个子checkbox没有被选中,则父checkbox不要选中;
3、反选
(1)在反选按钮上注册点击事件;
(2)当点击反选按钮时, 将所有的子checkbox的状态取反, 然后判断所有的子checkbox是否都被选中,
如果所有的子checkbox都已经被选中,则要选中父checkbox,否则不选中父checkbox;
以下是每一个步骤的功能实现
1、全选- 点击父checkbox全选 (1)在父checkbox上注册点击事件; (2)当点击父checkbox时, 让所有子checkbox的状态始终跟父checkbox的状态保持一致;
html和css代码
~~~
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>小米Mix2s</td>
<td>3000</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>华为P30</td>
<td>3800</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>小米手环</td>
<td>200</td>
</tr>
</tbody>
</table>
<input type="button" value=" 反 选 " id="btn">
</div>
~~~
JavaScript代码
~~~
// 1: 全选- 点击父checkbox全选
// 获取tbody元素
var j_tb = document.getElementById('j_tb');
// 获取事件源
var j_cbAll = document.getElementById('j_cbAll');
// (1) 在父checkbox上注册点击事件
j_cbAll.onclick = function () {
// (2) 当点击父checkbox时, 让所有子checkbox的状态始终跟父checkbox的状态保持一致;
var inputs = j_tb.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'checkbox') {
// 所有子checkbox的状态始终跟父checkbox的状态保持一致
input.checked = j_cbAll.checked;
}
}
}
~~~
2、全选- 点击所有子checkbox全选 (1)在所有的子checkbox上注册点击事件; (2)当每次点击子checkbox时, 判断所有子checkbox是否全部被选中,如果全部被选中,则要去同步选中父checkbox, 如果有一个子checkbox没有被选中,则父checkbox不要选中;
以下代码是在第一步骤基础上写的，包括了第一部分的代码
~~~
// ====================== 1: 全选- 点击父checkbox全选 ======================
// 获取tbody元素
var j_tb = document.getElementById('j_tb');
// 获取所有的子checkbox
var inputs = j_tb.getElementsByTagName('input');
// 获取事件源
var j_cbAll = document.getElementById('j_cbAll');
// (1) 在父checkbox上注册点击事件
j_cbAll.onclick = function () {
// (2) 当点击父checkbox时, 让所有子checkbox的状态始终跟父checkbox的状态保持一致;
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'checkbox') {
// 所有子checkbox的状态始终跟父checkbox的状态保持一致
input.checked = j_cbAll.checked;
}
}
}
// ====================== 2: 全选- 点击所有子checkbox全选 ======================
// (1) 在所有的子checkbox上注册点击事件;
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断当前遍历到的input是否是复选框,如果不是复选框,则不注册事件
if (input.type !== 'checkbox') {
// 不是复选框
continue;
}
// 在子checkbox上注册点击事件
input.onclick = function () {
// alert('测试子checkbox');
// (2) 当每次点击子checkbox时, 判断所有子checkbox是否全部被选中,如果全部被选中,则要去同步选中父checkbox,
// 如果有一个子checkbox没有被选中,则父checkbox不要选中;
// 记录子checkbox是否都被选中的标记
var isCheckedAll = true;
// 遍历所有input, 获取所有子checkbox
for (var j = 0; j < inputs.length; j++) {
var input = inputs[j];
if (input.type !== 'checkbox') {
// 不是复选框
continue;
}
if (input.checked === false) {
// 存在不选中的子checkbox,则父checkbox同步不选中;
isCheckedAll = false;
}
}
// 如果子checkbox全部被选中,则要去同步选中父checkbox;
// 同步父checkbox
j_cbAll.checked = isCheckedAll;
}
}
~~~
3、反选 (1)在反选按钮上注册点击事件; (2)当点击反选按钮时, 将所有的子checkbox的状态取反, 然后判断所有的子checkbox是否都被选中, 如果所有的子checkbox都已经被选中,则要选中父checkbox,否则不选中父checkbox;
以下代码是在第二步骤基础上写的，包括了第二部分的代码
~~~
// ======================= 1: 全选- 点击父checkbox全选 =======================
// 获取tbody元素
var j_tb = document.getElementById('j_tb');
// 获取所有的子checkbox
var inputs = j_tb.getElementsByTagName('input');
// 获取反选按钮元素
var btn = document.getElementById('btn');
// 获取事件源
var j_cbAll = document.getElementById('j_cbAll');
// (1) 在父checkbox上注册点击事件
j_cbAll.onclick = function () {
// (2) 当点击父checkbox时, 让所有子checkbox的状态始终跟父checkbox的状态保持一致;
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'checkbox') {
// 所有子checkbox的状态始终跟父checkbox的状态保持一致
input.checked = j_cbAll.checked;
}
}
}
// ====================== 2: 全选- 点击所有子checkbox全选 =====================
// (1) 在所有的子checkbox上注册点击事件;
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断当前遍历到的input是否是复选框,如果不是复选框,则不注册事件
if (input.type !== 'checkbox') {
// 不是复选框
continue;
}
// 在子checkbox上注册点击事件
input.onclick = function () {
// alert('测试子checkbox');
// (2) 当每次点击子checkbox时, 判断所有子checkbox是否全部被选中,如果全部被选中,则要去同步选中父checkbox,
// 如果有一个子checkbox没有被选中,则父checkbox不要选中;
synJcbAll();
}
}
// 3: ============================== 反选 ==============================
// (1) 在反选按钮上注册点击事件
btn.onclick = function () {
// (2) 当点击反选按钮时, 将所有的子checkbox的状态取反, 然后判断所有的子checkbox是否都被选中,
// 如果所有的子checkbox都已经被选中,则要选中父checkbox,否则不选中父checkbox;
// 将所有的子checkbox的状态取反
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断当前遍历到的input是否是复选框,如果是,则设置复选框的状态取反
if (input.type !== 'checkbox') {
// 不是复选框,则跳到下一次循环
continue;
}
input.checked = !input.checked;
// 如果所有的子checkbox都已经被选中,则要选中父checkbox,否则不选中父checkbox
synJcbAll();
}
}
// 抽取公共代码带函数中, 以便以后重复调用
// 用于将子checkbox的状态同步到父checkbox的函数
function synJcbAll() {
// 记录子checkbox是否都被选中的标记
var isCheckedAll = true;
// 遍历所有input, 获取所有子checkbox
for (var j = 0; j < inputs.length; j++) {
var input = inputs[j];
if (input.type !== 'checkbox') {
// 不是复选框
continue;
}
if (input.checked === false) {
// 存在不选中的子checkbox,则父checkbox同步不选中;
isCheckedAll = false;
}
}
// 如果子checkbox全部被选中,则要去同步选中父checkbox;
// 同步父checkbox
j_cbAll.checked = isCheckedAll;
}
~~~
**小结** 重点：全选反选效果； 难点：当选中所有 子checkbox时，选中父checkbox；
<br>
<br>
# 定义属性操作
常用的自定义属性相关的方法有 `getAttribute()`、`setAttribute()`、`removeAttribute()` ，这三个方法操作的是标签的行内属性，不存在浏览器兼容性问题，称为标准方法。
* `getAttribute()` 获取标签行内属
* `setAttribute() `设置标签行内属性
* `removeAttribute()` 移除标签行内属性
html和css代码
<div id="box" class="black" age="18" parentId="1"></div>
JavaScript代码
```
// 1: 以前的操作: 获取和设置box元素属性
var box = document.getElementById('box');
console.log(box.id);
console.log(box.className);
box.className='divClass';
console.log(box.className);
// 2: 现在的操作: 自定义属性
// (1) 从DOM元素中获取手动添加到标签中的属性age, parentId
console.log(box.age); // undefined
console.log(box.parentId); // undefined
// (2) 使用标准方法从DOM中获取手动添加到标签中的属性(行内属性)
// get 获取, Attribute 属性; 获取属性值
console.log(box.getAttribute('age'));
console.log(box.getAttribute('parentId'));
// 设置标签的行内属性
// 参数一: 属性名,相当于 键;
// 参数二: 属性值,相当于 值;
box.setAttribute('sex', true);
console.log(box.getAttribute('sex'));
box.setAttribute('age', 20);// 已存在age属性,则原来的属性值被覆盖
console.log(box.getAttribute('age'));
// 删除行内属性
box.removeAttribute('age');
console.log(box.getAttribute('age')); // null, 表示没有age元素(已经被删除了)
```
<br>
<br>
# 样式属性操作
CSS中的样式属性： 语法，属性名：属性值； 使用DOM对象操作标签中的样式： 获取样式属性值：对象名.style.属性名 设置元素样式属性值：对象名.style.属性名 = 属性值 + 'px'
通过DOM元素设置样式属性的时候，样式属性是行内样式，优先级最高。在设置样式属性的时候，宽、高、位置样式的值是字符串类型，要加上单位 px
html代码
```
<div id="box" class="boxClass" style="background-color: #0099cc;width: 200px; height: 200px">我是一个div</div>
```
JavaScript代码
```
// 获取box元素
var box = document.getElementById('box');
// 对象类型: CSSStyleDeclaration
console.dir(box);
console.log(box.style);
// 获取样式属性
console.log(box.style.backgroundColor);
console.log(box.style.width);// 200px
console.log(box.style.height);// 200px
// 设置样式属性
box.style.backgroundColor = 'red';
box.style.width = 500 + 'px';
console.log(box.style.width); // 500px
```
<br>
# 元素属性className和style的区别（掌握）
  标签的class属性对应着DOM对象中的className属性，所以修改DOM的className属性相当于修改标签的class属性值。
  注意, 在通过DOM元素设置标签的样式属性的时，我们可以className属性和style属性来设置, 但style属性操作的是标签的行内样式，所以优先级最高。我们可以通过以下代码演示他们的优先级.
  在开发中，怎么选择class属性和style属性的使用？ 如果样式属性比较多，则使用class进行引用; 如果样式属性比较少，则使用style属性，更灵活;
html和css代码
```
<style>
```
JavaScript代码
```
// 获取box元素
var box = document.getElementById('box');
// 引用定义好的样式: 操作的是嵌入式的样式
box.className = 'boxClass';
// 获取行内样式
console.log(box.style.backgroundColor);
// 设置行内样式
box.style.backgroundColor = 'red';
// 小结: className属性操作的是嵌入样式, style属性操作的是行内样式, 相对于嵌入式和外联式, 行内样式的优先级最高
```
# 需求
**1、开关灯**
目的: 练习style属性的使用;
需求分析：
（1）当点击"关 灯"按钮时，将body背景颜色设置成黑色，同时将 "关 灯" 设置成 "开 灯"；
（2）当点击"开 灯"按钮时，将body背景颜色设置成白色，同时将 "开 灯" 设置成 "关 灯"； 通过效果演示可以看出，"开关灯" 效果其实是操作body的样式，使浏览器界面呈现黑白切换。
html和css代码
```
<input id="btn" type="button" value="关 灯"/>
```
JavaScript代码
```
// 定义一个变量,用于记录开关灯状态
var isOpen = true;
// 获取按钮元素
var btn = my$('btn');
btn.onclick = function () {
// if (isOpen === true) {
if (isOpen) {
//（1）当点击"关 灯"按钮时，将body背景颜色设置成黑色，同时将 "关 灯" 设置成 "开 灯"；
document.body.style.backgroundColor = 'black';
btn.value = '开 灯';
isOpen = false;
} else {
//（2）当点击"开 灯"按钮时，将body背景颜色设置成白色，同时将 "开 灯" 设置成 "关 灯"；
document.body.style.backgroundColor = 'white';
btn.value = '关 灯';
isOpen = true;
}
}
// 抽取常用的代码: 根据id获取标签元素
function my$(id) {
return document.getElementById(id);
}
```
**2、点击按钮变色**
目的: 练习style属性的使用;
需求描述：点击按钮，随机变换body的背景颜色
需求分析：
（1）当点击按钮时，随机生成\[0, 255\]区间的整数作为rgb的颜色值，拼接成rgb(color1, color2, color3)；
（2）当点击按钮时，将颜色值设置为body的背景；
html和css代码
```
<script src="common.js"></script>
<input type="button" id="btn" value="变换颜色"/>
```
JavaScript代码
```
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var color1 = getRandomNum();
var color2 = getRandomNum();
var color3 = getRandomNum();
document.body.style.background = 'rgb('+color1+','+color2+','+color3+')';
}
function getRandomNum(){
return Math.floor(Math.random()*255)
}
```
**3、切换二维码**
目的: 练习className属性,鼠标移入移出事件;
需求分析： （1）当鼠标移入div时，显示二维码图片； （2）当鼠标移出div时，隐藏二维码图片；
html和css代码
~~~
<style>
.nodeSmall {
width: 50px;
height: 50px;
background: url(images/bgs.png) no-repeat -159px -51px;
position: fixed;
right: 10px;
top: 40%;
}
.erweima {
position: absolute;
top: 0;
left: -150px;
}
.nodeSmall a {
display: block;
width: 50px;
height: 50px;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
<script src="common.js"></script>
<div class="nodeSmall" id="node_small">
<div class="erweima hide" id="er">
<img src="images/456.png" alt=""/>
</div>
</div>
~~~
JavaScript代码
~~~
var nodeSmall = my$('node_small');
// 当鼠标移入 onmouseover
// 当鼠标移出 onmouseout
nodeSmall.onmouseover=function () {
//显示二维码
// my$('er').className='erweima show';
my$('er').className = my$('er').className.replace('hide', 'show');
// console.log(my$('er').className);
}
nodeSmall.onmouseout=function () {
//隐藏二维码
my$('er').className = my$('er').className.replace('show', 'hide');
// my$('er').className='erweima hide';
}
~~~
**4、高亮显示正在编辑的文本框**
目的:练习使用当前事件源(this)的style属性 需求描述：设置正在编辑的文本框为高亮状态，表示用户正在操作（编辑），在开发中也是经常要做的功能。 需求分析： （1）获取所有文本框； （2）给所有文本框注册获得焦点事件； （3）当事件发生时，先清空所有文本框的高亮效果, 再设置当前文本框背景为高亮；
html和css代码
~~~
<script src="common.js"></script>
<style>
/*body{*/
/*background-color: lightyellow;*/
/*}*/
</style>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="button" value=" 提交 ">
~~~
JavaScript代码
~~~
// （1）获取所有文本框元素；
var inputs = document.getElementsByTagName('input');
// （2）给所有文本框注册获得焦点事件；
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断当前遍历到的input元素是否是文本框元素
if (input.type !== 'text') {
continue;
}
input.onfocus = function () {
// （3）当事件发生时，先清空所有文本框的高亮效果, 再设置当前文本框背景为高亮；
// 先清空所有文本框的高亮效果
for (var j = 0; j < inputs.length; j++) {
var input = inputs[j];
if (input.type !== 'text') {
continue;
}
input.style.backgroundColor = '';
}
// 设置当前文本框背景为高亮
this.style.backgroundColor = 'lightblue';
}
}
~~~
**5、点击按钮改变div的大小和位置**
目的:练习style中的width,height,top,left,position等属性的使用;
需求分析：
（1）给按钮注册点击事件 ;
（2）当点击按钮时，改变div的大小和位置。使用DOM操作div的样式，可使用className或style属性 注意：在DOM的样式控制中，ID选择器的优先级高于类选择器 ;
html和css代码
~~~
<style>
/*
#box{
width: 200px;
height: 100px;
background-color: red;
}
*/
.cls {
width: 100px;
height: 100px;
background-color: pink;
}
.cls1 {
width: 200px;
height: 200px;
position: absolute;
top: 100px;
left: 100px;
background-color: pink;
}
</style>
<script src="common.js"></script>
<input type="button" value=" 点我 " id="btn"><br>
<br>
<div id="box" class="cls"></div>
~~~
JavaScript代码
~~~
// （1）给按钮注册点击事件 ;
var btn = my$('btn');
btn.onclick = function () {
// （2）当点击按钮时，改变div的大小和位置。使用DOM操作div的样式，可使用className或style属性
// 改变div样式的两种方式: className, style
// 方式一: 注意, ID选择器设置样式时,优先级高于其他选择器;
my$('box').className = 'cls1';
// 方式二: style是函内样式, 比className引用的嵌入样式优先级高;
my$('box').style.width = 200 + 'px';
my$('box').style.height = 200 + 'px';
my$('box').style.backgroundColor = 'red';
my$('box').style.position = 'absolute';
my$('box').style.top = 100 + 'px';
my$('box').style.left = 100 + 'px';
}
~~~
**6、列表隔行变色、高亮显示**
目的: 练习style在鼠标移入移出事件中的应用 需求分析：
（1）遍历每个li元素，设置样式使其各行变色，利用奇偶性；
（2）遍历每个li的时候，注册鼠标移入、移出事件；
（3）当鼠标移入时，将原来的颜色变成浅蓝色，鼠标移出时，恢复原来的颜色；
html和css代码
~~~
<style>
/*body{*/
/*background-color: azure;*/
/*background-color: antiquewhite;*/
/*background-color: lightskyblue;*/
/*}*/
</style>
<script src="common.js"></script>
<ul id="tb">
<li>西施</li>
<li>貂蝉</li>
<li>王昭君</li>
<li>杨玉环</li>
<li>芙蓉姐姐</li>
</ul>
~~~
JavaScript代码
~~~
// （1）遍历每个li元素，设置样式使其各行变色，利用奇偶性；
// 获取所有的li元素
var list = my$('tb').getElementsByTagName('li')
for (var i = 0; i < list.length; i++) {
var li = list[i];
if (i % 2 === 0) {
// 奇数行
li.style.backgroundColor = 'azure';
} else {
// 偶数行
li.style.backgroundColor = 'antiquewhite';
}
var bg = '';
// （2）遍历每个li的时候，注册鼠标移入、移出事件；
li.onmouseover = function () {
// console.log('鼠标移入了');
// 获取原来的颜色
bg = this.style.backgroundColor;
// （3）当鼠标移入时，将原来的颜色变成浅蓝色；
this.style.backgroundColor = 'lightskyblue';
}
li.onmouseout = function () {
// console.log('鼠标移出了');
// 鼠标移出时，恢复原来的颜色;
this.style.backgroundColor = bg;
}
}
~~~
**7、 tab选项卡切换**
目的: 自定义属性操作, 样式操作的综合应用 需求分析：
（1）给每个span注册鼠标经过事件，当鼠标移入span标签时（tab栏）； a、先取消所有span的高亮显示； b、再设置当前span高亮显示；
（2）先隐藏所有的div模块, 再设置当前span（tab栏）对应的div模块； 注意, 所有的span标签和所有的div呈对应关系，我们可以利用元素集合的有序性，在span标签中自定义属性index，然后利用index定位到对应的div
html和css代码
~~~
<style>
* {margin:0; padding: 0;}
ul {
list-style-type: none;
}
.box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
.headDiv {
height: 45px;
}
.headDiv span {
display:inline-block;
width: 90px;
background-color: pink;
line-height: 45px;
text-align: center;
cursor: pointer;
}
.headDiv span.current {
background-color: purple;
}
.bodyDiv div {
height: 255px;
background-color: purple;
display: none;
}
.bodyDiv div.current {
display: block;
}
</style>
<div class="box">
<div class="headDiv" id="headDiv">
<span class="current">体育</span>
<span>娱乐</span>
<span>新闻</span>
<span>综合</span>
</div>
<div class="bodyDiv" id="bodyDiv">
<div class="current">我是体育模块</div>
<div>我是娱乐模块</div>
<div>我是新闻模块</div>
<div>我是综合模块</div>
</div>
</div>
<script src="common.js"></script>
~~~
JavaScript代码
~~~
// 1、鼠标放到tab栏时，高亮显示，其他栏取消高亮
//获取元素
var headDiv = my$('headDiv');
var spans = headDiv.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
var span = spans[i];
//给所有的span标签设置一个标记属性
span.setAttribute('index', i);
// 2、注册鼠标经过事件
span.onmouseover = fn;
}
//事件处理函数
function fn() {
// （1）取消所有span的高亮显示
for (var i = 0; i < spans.length; i++) {
var span = spans[i];
//清空样式
span.className = '';
}
// （2）设置当前span高亮显示
this.className = 'current';
// 3、tab栏对应的div显示，其他div隐藏
var bodyDiv = my$('bodyDiv');
var divs = bodyDiv.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
div.className = '';
}
// 使用span的自定义属性index，定位到对应的div
var index = this.getAttribute('index');
divs[index].className = 'current';
}
~~~
