[JS DOM&BOM]操作元素
Posted 鱼竿钓鱼干
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[JS DOM&BOM]操作元素相关的知识，希望对你有一定的参考价值。
[JS DOM&BOM]操作元素
修改元素内容
innerText（不推荐）
注册事件
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<script>
//获取元素
var btn=document.querySelector('button');
var div=document.querySelector('div');
//注册事件
btn.onclick=function(){
div.innerText=getDate();
}
function getDate(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth();
var dates=date.getDate();
return '今天是： '+year+'年'+month+'月'+dates+'日';
}
</script>
</body>
直接操作dom
<body>
<p>123</p>
<script>
var p=document.querySelector('p');
p.innerText=getDate();
function getDate(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth();
var dates=date.getDate();
return '今天是： '+year+'年'+month+'月'+dates+'日';
}
</script>
</body>
innerhtml（推荐使用）
innerText 不识别html标签，非标准，而且去除空格和换行
<body>
<p>123</p>
<script>
var p=document.querySelector('p');
p.innerText='<strong>加粗</strong>';
</script>
</body>
浏览器效果
innerHTML 识别html标签 W3C标准 保留空格和换行
<body>
<p>123</p>
<script>
var p=document.querySelector('p');
p.innerHTML='<strong>加粗</strong>';
</script>
</body>
浏览器效果
两个属性都是可读写的，可以获取元素里的内容
修改元素属性
除了元素内容，还可以改src,href,id,alt,title之类的
修改图片的src
点击按钮换图片
<body>
<button id="page1">图片1</button>
<button id="page2">图片2</button><br>
<img src="./image/1.jpg" alt="">
<script>
var page1=document.getElementById('page1');
var page2=document.getElementById('page2');
var img=document.querySelector('img');
page1.onclick=function(){
img.src='./image/1.jpg';
}
page2.onclick=function(){
img.src='./image/2.jpg';
}
</script>
</body>
修改表单属性
点击按钮改变表单内容并在点击后禁用按钮
<body>
<button>按钮</button>
<input type="text" value="输入内容">
<script>
var btn=document.querySelector('button');
var input=document.querySelector('input');
btn.onclick=function(){
//input.innerHTML='点击了';这个是div之类的普通盒子才能用innerHTML改变内容
input.value='点击了';
//btn.disabled=true;和下面一样点击后禁用按钮
this.disabled=true;
//this指向的是事件函数的 调用者 btn
}
</script>
</body>
显示隐藏密码明文
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width",
initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px;
position: relative;
}
.box input{
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img{
width: 24px;
position:absolute;
top: 2px;
right: 2px;
}
</style>
</head>
<body>
<div class="box">
<label for="">
<img src="./image/1.jpg" alt="" id="eye">
</label>
<input type="password" name="" id="pwd">
</div>
<script>
var eye=document.getElementById('eye');
var pwd=document.getElementById('pwd');
var flag=0;
eye.onclick=function(){
if(flag==0){
pwd.type='text';
eye.src='./image/2.jpg';
flag=1;
}
else{
pwd.type='password';
eye.src='./image/1.jpg';
flag=0;
}
}
</script>
</body>
</html>
修改
使用element.style 修改元素样式
适合样式少，功能简单的，行内样式操作，优先级高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width",
initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.querySelector('div');
div.onclick=function(){
this.style.backgroundColor='pink';
}
</script>
</body>
</html>
循环精灵图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width",
initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.box{
width: 250px;
margin: 100px auto;
}
.box li{
float:left;
width: 24px;
height: 24px;
background-color: pink;
margin: 15px;
background:url(./DOM/jsapis_material-master/第一天/images/sprite.png) no-repeat;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var lis=document.querySelectorAll('li');
for(var i=0;i<lis.length;i++){
//让索引号 成一44就是每个li的背景y坐标
lis[i].style.backgroundPosition='0 -'+i*44+'px';
}
</script>
</body>
</html>
显示隐藏文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
input {
color: #999;
}
</style>
</head>
<body>
<input type="text" value="手机">
<script>
var text=document.querySelector('input');
text.onfocus=function(){
if(this.value=='手机'){
this.value='';//如果内容为默认值，获得焦点就清空
}
this.style.color='#333';//获得焦点颜色变深
}
text.onblur=function(){
if(this.value=='')this.value='手机';//当前内容为空，失去焦点后填充默认值
this.style.color='#999';
}
</script>
</body>
</html>
使用className 修改元素样式
如果样式修改较多，可以采用操作类名的方式修改元素样式
注意：className会把原来类名覆盖掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.change {
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="first">文本</div>
<script>
var test = document.querySelector('div');
test.onclick = function() {
this.className = 'change';
//this.className = 'first change' className会把原来类名覆盖掉，所以这样写可以保留原来类名
}
</script>
</body>
</html>
密码框验证信息
<!DOCTYPE html>
<htm以上是关于[JS DOM&BOM]操作元素的主要内容，如果未能解决你的问题，请参考以下文章