JavaScript（二）js 操作 html 标签（添加事件、改变属性、改变标签内容、定时器）

谁借莪１个温暖的怀抱￠ 2022-03-28 14:48 601阅读 0赞

# 找到页面元素 #

>  *  先给标签一个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>
> 
> <img src="1.jpg" οnclick="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操作页面可以轻松控制页面上的一些标签，为它们添加事件，依次来达到很多效果，如轮播图、滑块等效果。