找到页面元素
- 先给标签一个id属性，然后根据id的值查找。
document.getElementById("id值");
- 可以根据标签名称查找
document.getElementsByTagName("标签名name");
- 根据选择器查找页面元素
document.querySelectorAll("选择器");// 其中选择器可以是 #id, .class, 元素, ...
改动标签属性
- 先找到标签元素，把标签元素看做一个对象, 用`对象.属性`
例如：
<img src> 找到 `img对象.src `
<input value> 找到 `input对象.value`
改动标签内容
先找到标签对象，然后用以下语法：
- 标签对象.innerText
- 标签对象.innerHTML
例如：给内容赋值时`"<span style='color:red'>aaa</span>"`
这时 innerText 会把这段html按照普通文本的方式显示
innerHTML 会把这些html先按照html语法进行解析，解析后显示
添加事件
- 常见事件
ondblclick 鼠标双击
onchange value取值发生改变时(主要指表单标签)
onmouseover 鼠标移入
onmouseout 鼠标移出
onfocus 获取焦点
onblur 失去焦点
onkeydown 按键按下
onkeyup 按键松开
- 方法一：
找到标签.事件属性 = function() {}
如：单击图片变为另一个图片，浏览器上输出鼠标单击发生了
document.getElementById("img1").onclick = function (){
console.log("鼠标单击发生了");
document.getElementById("img1").src = "2.jpg";
};
- 方法二：也就是先写一个js，然后在标签上写上事件="函数名();"，这样就可以调用函数了，有点像java中的函数调用
<script>
function fun1() {
document.getElementById("img1").src = "2.jpg";
}
</script>扫描二维码关注公众号，回复： 5334953 查看本文章
<img src="1.jpg" onclick="fun1()">
定时器
- setTimeout(函数, 延时毫秒值);
如：每隔5秒，执行一次fun2函数
var i = 0;
function func2() {
setTimeout(function(){
func2();
console.log("ok:" + i);
i++;
} , 5000);
}
代码演示
轮播图（三张图片循环播放）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script>
var array = ["1.jpg", "2.jpg", "3.jpg"];//图片名字的集合
var i = 0;
//定时写一个函数，每个3秒换一次图片
function change() {
setTimeout(function(){
i++;
if(i == 3) {
i = 0;
}
//得到图片对象，使图片的路径每隔三秒改变一次，这里因为HTML文件和图片在一个文档下，直接用图片名.扩展名就好了
document.getElementById("img1").src = array[i];
//因为要一直来回播放图片，因此不断自调用
change();
} , 3000);
}
//执行change函数
change();
</script>
</head>
<body>
//图片的id为img1
<img src="1.jpg" id="img1">
</body>
</html>总结
用js操作页面可以轻松控制页面上的一些标签，为它们添加事件，依次来达到很多效果，如轮播图、滑块等效果。