JS的DOM案例和事件案例

最新推荐文章于 2024-05-21 14:15:14 发布

gain_and_follow_fate

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量354

点赞数 9

分类专栏：小白分享文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_47195668/article/details/135082694

版权

小白分享专栏收录该内容

5 篇文章 0 订阅

订阅专栏

DOM案例

来源：黑马JavaWeb开发教程
在这里插入图片描述
HTML中的Element对象可以通过Document对象获取，而Document对象是通过Window对象获取，书写时Window可以省略。
Document对象中提供的获取Element元素对象的函数：
document.getElementById(‘id属性值’)，根据id属性值获取
document.getElementsByTagName(‘标签名称’)，根据标签名称获取，返回值为数组
document.getElementsByName(‘name属性值’)，根据name属性值获取，返回值为数组
document.getElementsByClassName(‘class属性值’)，根据class属性值获取，返回值为数组
获得Element元素对象之后就可以用其调标签中的属性做一些操作，如img的src属性更改图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="light" src="img/off.gif"> <br>

    <div class="cls">传智教育</div>   <br>
    <div class="cls">黑马程序员</div> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>
    <script>
        
        //1. 点亮灯泡，通过id获取元素对象，就可以通过元素对象调img中的src属性
        var light = document.getElementById('light');
        light.src = "img/on.gif"

        //2. 将所有的 div 标签的标签体内容替换为 非常好
        var divs = document.getElementsByTagName('div');
        for(let i = 0; i < divs.length; i++){
            // innerHTML的用法给我的感觉类似于string，如果想要赋新值，直接用=，如果想要拼接，用+=
            // 对修改的文本提供css样式，可以直接在引号里用标签包裹，font是字体标签，设置字体颜色为红色
            divs[i].innerHTML += "<font color='red'>very good</font>";
        }
        
        //3. 使所有的复选框呈现被选中的状态
        var hobbys = document.getElementsByName('hobby');
        for(let i = 0; i < hobbys.length; i++){
            // 这里我最开始用的是hobbys[i].checked = true;但是没有效果，写成下面的样子就可以了，原因未知
            const hobby = hobbys[i];
            hobby.checked = true;
        }

    </script>
</body>
</html>

事件案例

在这里插入图片描述
事件：如按钮被点击，鼠标移动到元素上等
事件绑定：
方式一：通过HTML标签中的事件属性进行绑定

<input type="button" value="按钮1" onclick="on()"> 
<script>
	function on(){
		alert("被点击了-")
    }
</script>

方式二：通过DOM元素属性进行绑定

<input type="button" value="按钮2" id="btn"> 
<script>
	document.getElementById('btn').onclick = function(){
		alert("被点击了-")
    }
</script>

常见事件：

事件名	说明
onclick	鼠标点击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	表单提交时触发该事件
onkeydown	某个键盘的键被按下时
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件案例</title>
</head>
<body>
    <img id="light" src="img/off.gif"> <br>
    <input type="button" value="点亮" onclick="on()"> 
    <input type="button"  value="熄灭" onclick="off()">
    <br> <br>
    <input type="text" id="name" value="ITCAST">
    <br> <br>
    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>
    <input type="button" value="全选" onclick="allSelect()"> 
    <input type="button" value="反选" onclick="notAllSelect()">

    <script>
        // 方式1完成事件绑定
        // var img = document.getElementById('light');
        function on(){
            document.getElementById('light').src = "img/on.gif";
        }

        function off(){
            document.getElementById('light').src = "img/off.gif";
        }
       
        // 方式2完成事件绑定  toLowerCase()  全部英文字母转小写
        document.getElementById('name').onfocus = function(){
            document.getElementById('name').value = document.getElementById('name').value.toLowerCase();
        }
        // toUpperCase()  全部英文字母转大写
        document.getElementById('name').onblur = function(){
            document.getElementById('name').value = document.getElementById('name').value.toUpperCase();
        }

        function allSelect(){
            var hobbys = document.getElementsByName('hobby');
            for (let i = 0; i < hobbys.length; i++) {
                const element = hobbys[i];
                // 复选框 选择或不选，使用checked，值为true或false
                element.checked = true;
            }
        }

        function notAllSelect(){
            var hobbys = document.getElementsByName('hobby');
            for (let i = 0; i < hobbys.length; i++) {
                const element = hobbys[i];
                element.checked = false;
            }
        }

    </script>
</body>
</html>