js的dom操作可以改变网页内容、结构和样式，可以利用dom操作元素来改变元素里面的内容、属性等。
改变元素的内容
语法：
element.innerText 从起始位置到终止位置的内容，但它不识别html标签，同时空格和换行也会去掉 element.innerHTML 起始位置到终止位置的全部内容，包括html标签，即<p>里面</p>的内容,同时会保留空格换行,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>改变元素内容</title>
</head>
<body>
<button>点我</button>
<div>文章发表时间</div>
<p>文章发表时间</p>
<script>
//当点击率按钮，div里面的文字会发生变化
var b=document.querySelector('button');
var d=document.querySelector('div');
var dp=document.querySelector('p');
b.onclick=function(){
d.innerText='2021';
dp.innerHTML='<strong>2021</strong>';
//这两个属性是可以读写的，可以获取元素里面的内容
console.log(dp.innerHTML);
}
</script>
</body>
</html>
结果演示
常用元素的属性操作
比如
- innerText 、innerHTML 改变元素内容
- src、href
- id、alt、title
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修改元素属性</title>
</head>
<body>
<button id='f'>正方形</button>
<button id='c'>长方形</button>
<img src="c.jpg" alt="长方形">
<script>
//获取元素
var ff=document.getElementById('f');
var cc=document.getElementById('c');
var i=document.querySelector('img');
ff.onclick=function(){
i.src='f.jpg'
i.title='正方形'
}
cc.onclick=function(){
i.src='c.jpg'
i.title='长方形'
}
</script>
</body>
</html>
结果演示
表单元素的属性操作
比如
- type、value、checked、selected、disabled
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<button id='a'>按钮</button>
<input value="点按钮">
<script>
var an=document.getElementById('a');
var ip=document.querySelector('input');
//可以一直点击
var flag=0;
an.onclick=function(){
if (flag==0){
ip.value='哈哈';
flag=1;
}else{
ip.value='呜呜'
flag=0;
}
}
</script>
</body>
</html>
结果演示
样式属性操作
比如
- 大小、颜色、位置等
- element.style 行内样式操作（适合少的改动，但权重比内嵌的高）
- element.className 类名样式操作
element.style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>快点我</div>
<script>
var d=document.querySelector('div');
d.onclick=function(){
this.style.backgroundColor='blue';
}
</script>
</body>
</html>
结果演示
element.className
- className会直接更改元素的类名，会覆盖原先的类名
- 如果想要保留原先的类名，就要使用多类名的方法，例如this.className=’first change’。
<style>
.change{
}
</style>
<body>
<div></div>
<script>
var t=document.querySelector('div');
t.onclick=function(){
//让当前元素的类名改为了change
this.className='change';
}
</script>
</body>
快速精灵图
<script>
var lis=document.querySelectorAll('li');
for(var i=0;i<lis.length;i++){
var index = i*44;
lis[i].style.backgroundPosition='0 -'+index+'px'; //即0 -44px
}
</script>
焦点事件
- 获得焦点 onfocus
- 失去焦点 onblur
<script>
var text=document.querySelector('input');
text.onfocus=function(){
console.log('得到了焦点');
}
text.onblur = function () {
console.log('失去了了焦点');
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点</title>
<style>
input{
color: rgb(192, 197, 201);
}
</style>
</head>
<body>
<input type="text" value="渣渣龙">
<script>
var t=document.querySelector('input');
t.onfocus=function(){
if(t.value=="渣渣龙"){
t.value="";
}
t.style.color='#333';
}
t.onblur=function(){
if(this.value==""){
this.value="渣渣龙";
}
this.style.color= '#999';
}
</script>
</body>
</html>
结果演示
