在白龙网看来，JS不仅可以改变网页的结构，内容，样式，还可以改变元素的内容与属性。
1、修改元素内容
（1）修改文本内容
修改元素的文本内容，可以添加静态内容，例如，添加一个字符串；也可以添加动态内容，例如通过函数把当前日期加载到页面。
<body>
<div>点击</div>
<p>1235</p>
<h1></h1>
<script>
//innerText 修改元素文本内容
var div = document.querySelector('div');
var p = document.querySelector('p');
var h1 = document.querySelector('h1');
h1.innerHTML = getDate();//直接在页面加载当前日期
div.onclick = function() {
p.innerText = getDate();//当鼠标点击时才加载当前日期
}
function getDate() {
var date = new Date();
var yaer = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var day = date.getDay();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
return yaer + '年' + month + '月' + dates + '日' + arr[day];
}
</script>
</body>
（2）修改html内容
修改元素内容，还可以使用innerHTML。但是与innerText相比，他们是有区别，也是有联系的。他们的共同点，都可以获取元素内容，修改元素内容。不同点是innerText不支持HTML标签，不保留空格和换行；而innerHTML支持HTML标签，保留空格与换行。
<body>
<p>
白龙网
<span>是一个从建站到SEO的在线服务平台</span>
</p>
<script>
var p = document.querySelector('p');
p.innerHTML = '<b>今天是</b>17号';
p.innerText = '<b>今天是</b>17号';
console.log(p.innerText);// innerText 无法识别html标签，并且去除空格、换行
console.log(p.innerHTML);//innerHTML 支持html标签，并且保留空格、换行
</script>
</body>
2、修改元素属性
（1）基本步骤
修改元素的属性分为三步，一是获取元素，二是添加事件，三是在实现程序中，通过"元素名.属性名 = ‘属性值’"的方式添加、修改属性即可。
修改元素的属性分为三步，一是获取元素，二是添加事件，三是在实现程序中，通过"元素名.属性名 = ‘属性值’"的方式添加、修改属性即可。
<body>
<button class="btn1">a图片</button>
<button class="btn2">b图片</button><br>
<img src="./a.jpg" alt="">
<script>
//获取元素
var ldh = document.querySelector('.btn1');
var zxy = document.querySelector('.btn2');
var img = document.querySelector('img');
//添加事件类型
zxy.onclick = function() {
img.src = './b.jpg';
img.title = '第二张图片';
};
ldh.onclick = function() {
img.src = './a.jpg';
img.title = '第一张图片';
}
//添加实现程序
</script>
</body>
案例1：根据一天不同时间段，显示不同图片、问候语
这个案例没有添加任何事件，只是在一天不同的时间段内，修改了不同的图片属性与问候语
<body>
<img src="./a.jpg" alt="">
<div>上午好</div>
<script>
//获取元素
var img = document.querySelector('img');
var div = document.querySelector('div');
//获取当前小时
var time = new Date();
var h = time.getHours();
if (h < 12) {
img.src = './a.jpg';
div.innerText = '上午好';
} else if (h < 18) {
img.src = './b.jpg';
div.innerText = '下午好';
} else {
img.src = './c.jpg';
div.innerText = '晚上好';
}
</script>
</body>
案例2：修改表单属性值
<body>
<button>按钮</button>
<input type="text" value="请输入关键词">
<script>
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function() {
input.value = 'search';//修改input的值要用value，非凡不是innerText
// btn.disabled = true;
this.disabled =true;//禁用当前调用者
}
</script>
</body>
案例3：修改表单类型，实现密码明文、加密切换功能
这个案例把HTML/CSS/JS融合在一块，实现了密码的明文、加密显示交互效果
<body>
<style>
.box {
position: relative;
width: 400px;
height: 35px;
background-color: #ccc;
margin: 100px auto;
border-bottom: 1px solid red;
}
.box input {
height: 29px;
width: 370px;
outline: none;
}
.box img {
position: absolute;
top: 2px;
right: 2px;
width: 18px;
height: 30px;
}
</style>
<div class="box">
<input type="password" name="" id="psd">
<img src="./close.png" alt="" id="pic">
</div>
<script>
var img = document.getElementById('pic');
var input = document.getElementById('psd');
var flag = 0;//使用flag标记不同的状态，实现在一张图片上点击图片时，显示不同的图片
img.onclick = function() {
if(flag == 0) {
input.type = 'text';//修改inpu元素type属性为文本，让密码显示出来
img.src = './open.png';
flag = 1;
}
else {
input.type = 'password';//修改input元素的type属性为password，隐藏密码
img.src = './close.png';
flag = 0;
}
}
</script>
</body>
3、修改元素样式
（1）行内样式修改
以 元素.style.属性名 = ‘属性值’ 的形式修改元素的样式；产生了行内样式的效果，因此其优先级最高。样式少，功能简单时，可以使用该方式。
<body>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<div>白龙网</div>
<script>
var bgc = document.querySelector('div');
bgc.onclick = function() {
bgc.style.backgroundColor = 'red';
bgc.style.width = '300px';
bgc.style.fontSize = '50px';
bgc.style.color = 'white';
bgc.style.fontWeight = '700';
}
</script>
</body>
案例1：点击x号，关闭浮选框
这个案例应用到的知识点是，修改元素的样式，当鼠标点击指定按钮时，让目标标签的样式隐藏起来。
<body>
<style>
div {
width: 200px;
height: 200px;
padding: 5px 10px 0 0;
background-color: pink;
text-align: right;
}
</style>
<div class="box">
<button class="close">x</button>
</div>
<script>
var btn =document.querySelector('.close');
var boxs = document.querySelector('.box');
btn.onclick = function() {
boxs.style.display = 'none';
}
</script>
</body>
案例2：循环打印精灵图 21
该案例的核心在于循环打印竖着的精灵图片的坐标位置，因为是坚排精灵图片，所以横坐标不用管，肯定是0，而动态变化的是Y坐标位置，并且精灵图片的Y坐标位置有规律0，44，88……所以可以知道背景图片上的所有精灵图片的坐标位置是：0 -44i
案例3：显示隐藏的文本内容
获取焦点文字消失+颜色变化，失去焦点文字出现+颜色恢复
增加了获取焦点、失去焦点两个方法，同时，在这两个方法下，要判断input的值是存在与否，决定给value写入什么，以及字体颜色的变化。这里的text可以用this代替。
<body>
<style>
input {
color: #999;
}
</style>
<input type="text" value="白龙网">
<script>
var text = document.querySelector('input');
text.onfocus = function() {
if (text.value == '白龙网') {
text.value = '';
text.style.color = '#333';
}
}
text.onblur = function() {
if (text.value == '') {
text.value = '白龙网';
text.style.color = '#999';
}
}
</script>
</body>
（2）类名样式修改
当要添加的样式比较多时，再使用元素.style就不方便了，可以使用 元素.className = ‘类名’ 的方式给目标元素添加一个类，在类中任意添加样式；如果要删除类名对应的样式，只需要把className的属性值设置为空''即可。
另外，这种添加类，会覆盖掉魇标签中的类，如果要保留原标签中的类，则在等号右侧的引号内先写上原类名，再写上新类名，多类名选择器，不同的类名之间用空格隔开，即：元素.className = ‘原类名 新类名’。
同时，也可以参考上述方法使用tagName添加、修改id。
<body>
<style>
div {
width: 200px;
height: 200px;
background-color:red;
}
.change {
font-size: 30px;
text-align: center;
line-height: 200px;
}
</style>
<div>白龙网</div>
<script>
var ele = document.querySelector('div');
ele.onclick = function() {
ele.className = 'change';
}
</script>
</body>
案例1：失去焦点后，判断输入值的长度，正确与错误信息的显示
<body>
<style>
.icon-zhengque {
color: greenyellow;
}
em {
font-style: normal;
}
.spanChange {
color: red;
}
.emChange {
color: red;
}
</style>
<div class="regist">
<input type="text" class="sr">
<span class="iconfont icon-zhengque sp"></span>
<em class="emtext">请输入6~16位的密码</em>
</div>
<script>
var inputs = document.querySelector('.sr');
var spans = document.querySelector('.sp');
var ems = document.querySelector('.emtext');
inputs.onblur = function() {
if (inputs.value.length < 6 || inputs.value.length > 16) {
spans.className = 'iconfont icon-cuowu sp spanChange';
ems.className = 'emtext emChange';
ems.innerHTML = '你输入的位置不正确，只能输入6~16位之间哦';
} else {
spans.className = 'iconfont icon-zhengque sp';
ems.className = 'emtext';
ems.innerHTML = '恭喜你，密码太强悍了';
}
}
</script>
</body>
案例2：开关灯效果
用flag状态，控制开关两种可能。
<body>
<button>关灯</button>
<script>
var btn = document.querySelector('button');
var bodys = document.body;
var flag = 0;
btn.onclick = function() {
if (flag == 0) {
bodys.style.backgroundColor = '#000';
btn.innerHTML = '开灯';
flag = 1;
} else {
bodys.style.backgroundColor = '#fff';
btn.innerHTML = '关灯';
flag = 0;
}
}
</script>
</body>
案例3：下拉菜单
<body>
<style>
.box {
}
ul {
list-style: none;
display: none;
}
nav {
float: left;
}
</style>
<div class="box">
<nav>首页</nav><span class="iconfont icon-zhengque"></span>
<ul>
<li>名师</li>
<li>名师</li>
<li>名师</li>
<li>名师</li>
<li>名师</li>
</ul>
</div>
<script>
var span = document.querySelector('span');
var ul = document.querySelector('ul');
var flag = 0;
span.onclick = function() {
if (flag == 0) {
ul.style.display = 'block';
flag = 1;
} else {
ul.style.display = 'none';
flag = 0;
}
}
</script>
</body>
案例4：导航条点击变色功能实现，排它思想，双重循环
外层循环控制每一次点击之后目标LI的背景变色，而内层循环控制未变色的其它LI背景色。
<body>
<style>
ul {
list-style: none;
}
ul li {
float: left;
width: 30px;
margin-right: 5px;
border: 1px solid #000;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<script>
var lis = document.getElementsByTagName('li');
console.log(lis);
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
for (var j = 0; j < lis.length; j++) {
lis[j].style.backgroundColor = '';
}
this.style.backgroundColor = 'red';
}
}
</script>
</body>
案例5：换肤效果，点击小图显示大图
该案例的的价值有两点，一是使用选择器，先获取上级元素，再获取子元素中的所有图片；二是使用this.src获取当前图片对象的所有地址，然后赋值给body背景图片。要养成使用当前对象this的习惯。
<style>
body {
background-image: url(./a.jpg);
background-repeat: no-repeat;
background-size:cover;
}
ul {
list-style: none;
}
.box {
width: 655px;
height: auto;
margin: 100px auto;
}
.box li {
float: left;
width: 200px;
margin-right: 5px;
}
img {
width: 200px;
}
</style>
<body>
<div class="box">
<ul>
<li><img src="./a.jpg" alt=""></li>
<li><img src="./b.jpg" alt=""></li>
<li><img src="./c.jpg" alt=""></li>
</ul>
</div>
<script>
var imgs = document.querySelector('.box').querySelectorAll('img');
// console.log(imgs);
for (i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
var bodys = document.body;
bodys.style.backgroundImage = 'url(' + this.src + ')'
}
}
</script>
</body>
案例6：表格隔行变色的效果
这个特效需要使用两个新的方法onmouseover,onmouseover,让鼠标经过的时候，显示一个种，鼠标过后又是什么颜色。
<style>
.bg {
background-color: red;
}
</style>
<body>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>专业</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>刘德华</td>
<td>男</td>
<td>19</td>
<td>计算机网络</td>
</tr>
<tr>
<td>001</td>
<td>刘德华</td>
<td>男</td>
<td>19</td>
<td>计算机网络</td>
</tr>
<tr>
<td>001</td>
<td>刘德华</td>
<td>男</td>
<td>19</td>
<td>计算机网络</td>
</tr>
<tr>
<td>001</td>
<td>刘德华</td>
<td>男</td>
<td>19</td>
<td>计算机网络</td>
</tr>
<tr>
<td>001</td>
<td>刘德华</td>
<td>男</td>
<td>19</td>
<td>计算机网络</td>
</tr>
<tr>
<td>001</td>
<td>刘德华</td>
<td>男</td>
<td>19</td>
<td>计算机网络</td>
</tr>
<tr>
<td>001</td>
<td>刘德华</td>
<td>男</td>
<td>19</td>
<td>计算机网络</td>
</tr>
<tr>
<td>001</td>
<td>刘德华</td>
<td>男</td>
<td>19</td>
<td>计算机网络</td>
</tr>
<tr>
<td>001</td>
<td>刘德华</td>
<td>男</td>
<td>19</td>
<td>计算机网络</td>
</tr>
</tbody>
</table>
<script>
var trs = document.querySelector('tbody').querySelectorAll('tr');
for (i = 0; i < trs.length; i++) {
trs[i].onmouseover = function() {
this.className = 'bg';
}
trs[i].onmouseout = function() {
this.className = '';
}
}
</script>
</body>
案例7：表单全选与取消全选
<style>
.bg {
background-color: red;
}
table {
margin: 100px auto;
text-align: center;
}
</style>
<body>
<table border="1" cellspacing="0" width="600px">
<thead>
<tr>
<th><input type="checkbox" name="" id="chkall"></th>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>专业</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>001</td>
<td>刘德华</td>
<td>男</td>
<td>19</td>
<td>计算机网络</td>
</tr>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>001</td>
<td>刘德华</td>
<td>男</td>
<td>19</td>
<td>计算机网络</td>
</tr>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>001</td>
<td>刘德华</td>
<td>男</td>
<td>19</td>
<td>计算机网络</td>
</tr>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>001</td>
<td>刘德华</td>
<td>男</td>
<td>19</td>
<td>计算机网络</td>
</tr>
</tbody>
</table>
<script>
var chkalls = document.getElementById('chkall');
var chkany = document.querySelector('tbody').getElementsByTagName('input');
//由于全选框的状态影响子选框的状态，即：全选勾选，子选框全部选中，反之，子选框不命选中，所以只需要把全选框的状态赋值给子选框即可
chkalls.onclick = function() {
// console.log(this.checked);当前复选框的选中状态
//方法1：根据当前全选复选框的状态，循环打印下面4个框的状态
// if (this.checked) {
// console.log(this.checked);
// for (var i = 0 ; i < chkany.length; i ++) {
// chkany[i].checked = true;
// }
// } else {
// for (var i = 0 ; i < chkany.length; i ++) {
// chkany[i].checked = false;
// }
// }
//方法2：先获取当前复选框架的状态this.checked，再把这个状态赋值给下面4个框的状态
for (i = 0; i < chkany.length;i++) {
chkany[i].checked = this.checked;
}
}
//由于子复选框的状态影响全选框的状态，所以外层循环控制每次点击事件，同时内层循环控制每个点击时其它子复选框的状态；然后通过flag标记值的变化，来影响全选框的状态
for (var i = 0;i < chkany.length;i++) {
chkany[i].onclick = function() {//每一个元素都要绑定事件，所以用chkany[i]
var flag = true;
for (var i = 0;i < chkany.length;i++) {
if(!chkany[i].checked) {//判断4个数组元素的状态，所以用chkany[i]
flag = false;
}
}
chkalls.checked = flag;
}
}
</script>
</body>
4、获取元素属性
（1）属性操作
对元素属性的操作，可以增加、删除，修改、查询。
对元素属性的操作，可以增加、删除，修改、查询。
<body>
<div id="first" index="111">1</div>
<script>
//A.获取属性（内置属性、自定义属性）
var div = document.getElementById('first');
console.log(div.id);//1-1.element.属性名，用来获取元素内置属性
console.log(div.getAttribute('index'));//1-2.element.getAttribute('属性'),用来获取用户自定义的元素属性
//B.设置属性（修改：有属性为修改，增加：无属性为增加）
div.id = 'second';
div.className = 'newclass';//2-1内容属性方法设置类名，用.className
div.setAttribute('index',222);
div.setAttribute('class','newclass2');//2-2自定义属性设置类名，用class
//C.移除属性
div.removeAttribute('index');
</script>
</body>
(2)设置属性
另外，对于自定义属性，我们要从设置、获取两个方面来深入理解：
另外，对于自定义属性，我们要从设置、获取两个方面来深入理解：
<body>
<div data-time-name="99">1</div>
<script>
// 1.获取元素
var div = document.querySelector('div');
// 2.设置自定义属性
div.setAttribute('data-index',22);
div.setAttribute('data-time',88);
//3.获取自定义属性
console.log(div.getAttribute('data-index'));
console.log(div.dataset.index);//dataset是个集合，里面存放了所有以data开头的自定义属性，只能获取以data开头的自定义属性，IE11才支持
console.log(div.dataset.time);//取对象属性的方法一：.属性名
console.log(div.dataset['time']);//取对象属性的方法二：['属性名']
//如果自定义属性名有两个以上的“-”连接，则使用dataset调用属性名时，要用驼峰命名法
console.log(div.getAttribute('data-time-name'));
console.log(div.dataset.timeName);
</script>
</body>
案例1：tab栏切换
主要使用了排它思想与以及自定义属性的设置与获取，内置类的添加
主要使用了排它思想与以及自定义属性的设置与获取，内置类的添加
通过这个案例，我们发现，自定义属性可以保存数据，使用数据，即：给元素添加一个自定义属性，再获取自定义属性。从而不用把数据放到数据库中了。自定义属性必须用自定义属性的方法获取。
自定义属性的命名规范：data-index = '123'
<body>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.box {
margin: 100px auto;
width: 600px;
height: 50px;
background-color: #999;
}
.box .top li {
float: left;
width: 120px;
height: 50px;
text-align: center;
line-height: 50px;
}
.top .current {
background-color: red;
}
.bottom .item {
display: none;
}
</style>
<div class="box">
<!-- 上面导航 -->
<div class="top">
<ul>
<li class="current">商品规格</li>
<li>成品包装</li>
<li>售后保障</li>
<li>商品评价</li>
<li>联系客服</li>
</ul>
</div>
<!-- 下面内容 -->
<div class="bottom">
<div class="item">商品规格商品规格商品规格商品规格111</div>
<div class="item">成品包装成品包装成品包装成品包装222</div>
<div class="item">售后保障售后保障售后保障售后保障333</div>
<div class="item">商品评价商品评价商品评价商品评价444</div>
<div class="item">联系客服联系客服联系客服联系客服555</div>
</div>
</div>
<script>
var boxs = document.querySelector('.box');
var lis = boxs.querySelectorAll('li');
var items = boxs.querySelectorAll('.item');
// console.log(lis);
//循环点击每一个LI，让他背景色变红
for (i = 0; i < lis.length; i++) {
// 2-1每个标签添加一个索引号
lis[i].setAttribute('index',i);
lis[i].onclick = function() {
// 1-1删除其它标签背景颜色
for (i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 1-2留下当前标签背景颜色
this.className = 'current';
var index = this.getAttribute('index');
// console.log(index);
//2-2隐藏单击LI之外索引号对应的内容
for (i = 0 ; i < items.length; i++) {
items[i].style.display = 'none';
}
//2-3打印索引号对应的内容
items[index].style.display = 'block';
}
}
</script>
</body>