使用getElementByID()方法访问DOM元素
使用getElementsByName()方法访问DOM元素
使用getElementsByTagName()方法访问DOM元素方法
方法 描述
getElementById() | 返回对拥有指定id的第一个对象的引用 |
getElementsByName() | 返回带有指定名称的对象的集合 |
getElementsByTagName() | 返回带有指定标签名的对象的集合 |
write() | 向文档写文本、HTML表达式或JavaScript代码 |
实现操作元素和操作属性更改图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:400px;
height:300px;
background:url("img/1.webp")center/cover;
}
</style>
</head>
<body>
<div id="d1">
</div>
<img id="m1" src="img/1.webp" alt="">
<button οnclick="fn1()">点击更改图片</button>
</body>
<script>
var a=1;
//箭头函数是普通函数的简写
setInterval(()=>{
//操作元素(html)的css
d1.style.backgroundImage='url("img/'+(a%3)+'.webp")'
a++
},1000)function fn1(){
//操作属性
m1.src="img/2.webp"
}
</script>
</html>
使用display样式属性控制元素的隐藏和显示
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 300px; height:250px;
background: red;
}
</style>
</head>
<body>
<div id="d1"></div>
<br>
<button οnclick="fn1()">点击隐藏</button>
<button οnclick="fn2()">点击出现</button>
<script>
function fn1(){
d1.style.display="none"
}
function fn2(){
d1.style.display="block"
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text"><input type="text"><input type="text">
<input type="text"><input type="text"><input type="text">
<input type="text"><input type="text"><input type="text">
<input type="text"><input type="text"><input type="text">
<input type="text"><input type="text"><input type="text">
<input type="text"><input type="text"><input type="text">
<input type="text"><input type="text"><input type="text">
<input type="text"><input type="text"><input type="text">
<input type="text"><input type="text"><input type="text">
<input type="text"><input type="text"><input type="text">
<br>
<button onclick="fn1('圣诞节')">圣诞节</button>
<button onclick="fn1('万圣节')">万圣节</button>
<script>
function fn1(a){
//拿到所有输入框
var b=document.getElementsByTagName("input")
//更改值
for(let i of b){
i.value=a;
}
}
//找到页面中所有的输入框
//给所有输入框赋值(失去焦点事件,获得焦点事件)
(()=>{
var is=document.getElementsByTagName("input")
for(let i of is){
//给元素获得焦点事件赋值
i.onfocus=()=>{
i.value=""
}
//给元素失去焦点赋值
i.onblur=()=>{
i.value="春节"
}
}
})();
</script>
</body>
</html>