DOM操作
操作元素内容
| 方法 | 作用 |
|---|---|
| element.innerHTML | 设置或返回元素开始和结束标签之间HTML。包括HTML标签，同时保留空格和换行，识别HTML标签 |
| element.innerText | 设置或返回元素的文本内容，在返回的时候会去除HTML标签和多余的空格、换行，在设置的时候会进行特殊字符转义 |
| element.textContent | 设置或者返回指定节点的文本内容，同时保留空格和换行 |
<button>显示当前系统元素</button>
<div>时间</div>
<script>
//1、获取元素
var btn = document.querySelector('button')
var div = document.querySelector('div')
//2、注册事件
btn.onclick = function(){
div.innerHTML = '2021年6月8日'
}
</script>
- innerHTML在使用时会保持编写的格式以及标签样式，获取元素内部的HTML代码，自结束标签不适用；（推荐使用）
- innerText去掉所有格式以及标签的纯文本内容
- textContent属性在去掉标签后会保留文本格式
<p>寂寞空庭 春欲晚
梨花满地 不开门</p>
<script>
var p = document.querySelector('p');
console.log(p.innerHTML);
console.log(p.innerText);
</script>
操作元素属性
在DOM中，HTML属性操作是指使用JavaScript来操作一个元素的HTML属性。
一个元素包含很多的属性，例如，对于一个img图片元素来说，可以操作它的src、title属性等。
获取属性
获取元素的内置属性值：
element.属性element.getAttribute('属性名')
获取元素的自定义属性：
element.getAttribute('属性名')
设置属性
设置内置属性的值：
element.属性 = 值
设置自定义属性的值：element.setAttribute('属性'，'值')
移除属性
element.removeAttribute('属性')
HTML5中自定义属性的实现
通过’data-属性名’方式自定义属性
<div data-index='2'></div> html5的写法 'data-'是自定义属性的前缀，便于区分自定义属性和内置属性
<div index='2'></div> html5之前的写法
在html5中设置自定义属性值的方式：
- 元素对象名.dataset.属性名 = 值
在html5中获取自定义属性值的方式：
- 元素对象名.dataset.属性
- 元素对象名.dataset[‘属性’]
- 元素对象名.getAttribute(‘属性’)
eg：点击按钮切换图片，鼠标悬停时显示不同的提示文字
<button id="b1">蓝天</button>
<button id="b2">马路</button>
<br><br>
<img src="../images/1.jpg" title="蓝天" width="140px" height="120px">
<script>
//获取页面元素
var sky = document.querySelector('#b1')
var road = document.querySelector('#b2')
var img = document.querySelector('img')
//给按钮注册事件
sky.onclick = function(){
img.src = "../images/1.jpg";
img.title = '蓝天';
}
road.onclick = function(){
img.src = "../images/2.jpg"
img.title = '马路'
}
</script>
eg：显示隐藏密码明文
实现步骤：
- 准备一个父盒子div
- 在父盒子中放入两个子元素，一个input元素和一个img元素
- 单击眼睛图片切换input的type值（text和password）
<div class="box">
<input type="password" id="pwd">
<label for="">
<img src="./images/eye_close.png" id="eye">
</label>
</div>
<script>
//1、获取元素
var eye = document.querySelector('#eye');
var pwd = document.querySelector('#pwd');
//2、注册事件处理程序
var flag = 0;
eye.onclick = function(){
if(flag == 0){
pwd.type = 'text';
eye.src = './images/eye_open.png';
flag = 1;
}else{
pwd.type = 'password';
eye.src = './images/eye_close.png';
flag = 0
}
}
</script>
eg：Tab栏切换
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style-type: none;
}
.tab{
width: 978px;
margin: 100px auto;
}
.tab_list{
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li{
float: left;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current{
background-color: #c81623;
color: #fff;
}
.item{
display: none;
border: 1px solid red;
}
</style>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">产品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(50000)</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">商品介绍模块内容</div>
<div class="item">规格与包装模块内容</div>
<div class="item">售后保障模块内容</div>
<div class="item">商品评价(5000)模块内容</div>
<div class="item">手机社区模块内容</div>
</div>
</div>
<script>
//获取标签部分的元素对象
var tab_list = document.querySelector('.tab_list')
var lis = tab_list.querySelectorAll('li');
//获取内容部分的所有元素对象
var item = document.querySelectorAll('.item');
for(var i=0;i<lis.length;i++){ // for循环绑定点击事件
lis[i].setAttribute('index',i); // 开始给5个小li设置索引号
lis[i].onclick = function(){
for(var i=0;i<lis.length;i++){
lis[i].className = ''
}
this.className = 'current';
var index = this.getAttribute('index');
for(var i=0;i<item.length;i++){
item[i].style.display = 'none';
}
item[index].style.display = 'block';
}
}
</script>
</body>
eg：导航下拉栏
<style>
*{
margin: 0%;
padding: 0%;
}
li{
list-style-type: none;
}
a{
text-decoration: none;
font-size: 14px;
}
.nav{
margin: 100px;
}
.nav>li{
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a{
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover{ /* 主菜单的悬停样式 */
background-color: #eee;
}
.nav ul{ /* 所有子菜单的样式 */
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li{
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover{
background-color: #FFF5DA;
}
</style>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li><a href="">私信</a></li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<li>
<a href="#">留言板</a>
<ul>
<li><a href="">私信</a></li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<li>
<a href="#">电话</a>
<ul>
<li><a href="">私信</a></li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<li>
<a href="#">邮箱</a>
<ul>
<li><a href="">私信</a></li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
</ul>
<script>
//1、获取元素
var nav = document.querySelector('.nav');
var lis = nav.children;
console.log(lis);
//2、注册鼠标指针经过和鼠标指针离开事件
for(var i=0;i<lis.length;i++){
lis[i].onmouseover = function(){
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function(){
this.children[1].style.display = 'none';
}
}
</script>
</body>
操作元素样式
操作元素样式的两种方式：
- 操作style属性
- 操作className属性
操作style属性
- 元素对象的样式，可以直接通过“
元素对象.style.样式属性名”的方式操作。 - 样式属性名对应CSS样式名，但需要去掉CSS样式名里的半字线“-”，并将半字线后面的英文的首字母大写。
常见的style属性操作样式名：
| 样式属性名 | 作用 |
|---|---|
| background | 设置或返回元素的背景属性 |
| backgroundColor | 设置或返回元素的背景色 |
| display | 设置或返回元素的显示类型 |
| fontSize | 设置或返回元素的字体大小 |
| height | 设置或返回元素的高度 |
| left | 设置或返回定位元素的左部位置 |
| listStyleType | 设置或返回列表项标记的类型 |
| overflow | 设置或返回如何处理呈现在元素框外面的内容 |
| textAlign | 设置或返回文本的水平对齐方式 |
| textDecoration | 设置或返回文本的修饰 |
| textIndent | 设置或返回文本第一行的缩进 |
| transform | 向元素应用2D或3D转换 |
<div id="box"></div>
<script>
var ele = document.querySelector('#box'); // 获取元素对象
ele.style.width = '100px';
ele.style.height = '100px';
ele.style.transform = 'rotate(7deg)';
// 上述3行代码相当于在CSS中添加以下样式：
#box {width: 100px; height: 100px; transform: rotate(7deg);}
</script>
操作className属性
- 如果样式修改较多，可以采取操作类名的方式更改元素样式，语法为“
元素对象.className” - 访问className属性的值表示获取元素的类名，为className属性赋值表示更改元素类名。
- 如果元素有多个类名，在className中以空格分隔。
eg:点击div后div样式改变
<!-- 给定一个div背景色为粉色，点击div后div的属性改变 -->
<style>
/* 未点击之前div的CSS样式 */
div{
width: 100px;
height: 100px;
background-color:pink;
}
/* 点击后div的CSS样式 */
.change{
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
</style>
<body>
<div class="first">西安邮电大学</div>
<script>
/* 控制div点击后的CSS样式，通过改变className的值 */
var test = document.querySelector('div')
test.onclick = function(){
this.className = 'change'
}
</script>
</body>
排他思想
排除掉其他的（包括自己），然后再给自己设置想要实现的效果。总而言之，排他思想的实现步骤就是所有元素全部清除与设置当前元素。
eg：单击按钮，变换当前按钮的背景色
实现：
- 在同一组元素中，想要某一个元素实现某种样式，使用循环的排他思想算法来实现。
- 所有按钮颜色设为无
- 设置当前点击按钮背景颜色为’pink’
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
//1、获取所有元素，btns得到的是类数组对象
var btns = document.querySelectorAll('button');
for(var i=0;i<btns.length;i++){ //里面的每一个元素btns[i]
btns[i].onclick = function(){
for(var i=0;i<btns.length;i++){ //先去掉所有按钮的背景颜色
btns[i].style.backgroundColor = '';
}
this.style.backgroundColor = 'pink' //然后设置当前的元素背景色为粉色
}
}
</script>
</body>
eg：鼠标指针经过时背景变色
实现：
- 使用鼠标指针经过事件onmouseover和鼠标指针离开事件onmouseout实现案例效果。
- 鼠标经过该行，背景颜色变为pink
- 鼠标移除该行，背景颜色取消
//设置CSS样式
<style>
.bg{
background-color: pink;
}
</style>
<body>
<table border="1">
<thead>
<tr>
<th width='80'>代码</th>
<th width='100'>名称</th>
<th width='100'>最新公布净值</th>
<th width='100'>累计净值</th>
<th width='100'>前单位净值</th>
<th width='100'>净值增长率</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>003512</td>
<td>3个月定期开放债劵</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.074%</td>
</tr>
<tr align="center">
<td>003512</td>
<td>3个月定期开放债劵</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.074%</td>
</tr>
</tbody>
</table>
<script>
var trs = document.querySelector('tbody').querySelectorAll('tr')//获取tbody下的所有行
for(var i=0;i<trs.length;i++){
trs[i].onmousemove = function(){
this.className = 'bg'
}
trs[i].onmouseout = function(){
this.className = ''
}
}
</script>
</body>
384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
