[php学习十二]javaScript的基本练习3-Dom

最新推荐文章于 2023-05-28 00:26:55 发布

灵眼儿上方

最新推荐文章于 2023-05-28 00:26:55 发布

阅读量340

点赞数

分类专栏： php 文章标签： PHP javascript DOM

本文链接：https://blog.csdn.net/liyanq528/article/details/52049563

版权

php 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript DOM</title>
    <style>
        .EventDiv{
            background-color: #FFA500;
            border: 1px solid;
        }
    </style>
</head>
<body>
<div class="myDiv">Hello
    <p>Div中的p标签</p>
</div>
<hr>
<p><small>通过JS改变元素的属性</small></p>
<div id="changeByJS"
     οnmοuseleave="this.innerHTML = '鼠标走了啊~!'"
     οnmοuseοver="this.innerHTML = '鼠标来了啊~!'"
     οnclick="this.innerHTML = '点击了啊~!!'"></div>
<p><small>addEventListener练习</small></p>
<hr>
<button id="btnListener">试验addEventListener</button>
<div id="ListenerResult"></div>
<hr>
<p><small>改变页面大小时显示个随机数</small></p>
<div id="windowListener"></div>
<hr>
<div id="DivEvent1" class="EventDiv"><p id="PEvent1">点击我,我是冒泡事件</p></div>
<div id="DivEvent2" class="EventDiv"><p id="PEvent2">点击我,我是捕捉事件</p></div>
<hr>
<script>
    /*注意点1:获取标签的时候,注意是NodeList还是Object!~~*/
    var d = document.getElementsByClassName("myDiv");
    document.writeln("通过Class获得的DIV:" + d[0].innerHTML);
    var p = d[0].getElementsByTagName("p");
    document.writeln("通过TagName获得的P:" + p[0].innerHTML);
    document.write("<p><small>今天的日期是:" + Date() + "</small></p>");
    var ChangeDiv = document.getElementById("changeByJS");
    ChangeDiv.innerHTML = "JS设置的innerHTML";
    /*注意点2:这种设置style的方式,在Safari里不能实现效果,不知道原因~!*/
    ChangeDiv.style = "background-color: #FFA500; height: 30px;padding-top: 10px";
    var btn = document.getElementById("btnListener");
    btn.addEventListener("click",btnClickOne);
    /*注意点3:btnClickTwo要想传参数,只能再套一层函数了~!*/
    btn.addEventListener("click",function () {
        btnClickTwo(this);
    });
    function btnClickOne() {
        document.getElementById("ListenerResult").innerHTML = "btnClickOne事件;";
    }
    function btnClickTwo(btn) {
        document.getElementById("ListenerResult").innerHTML += "btnClickTwo事件;btn.innerHTML:" + btn.innerHTML;
    }
    window.addEventListener("resize",function () {
        document.getElementById("windowListener").innerHTML = Math.random();
    });

    document.getElementById("DivEvent1").addEventListener("click",function () {
        alert("点击了DVI1元素");
    },false);
    document.getElementById("DivEvent2").addEventListener("click",function () {
        alert("点击了DVI2元素");
    },true);
    document.getElementById("PEvent1").addEventListener("click",function () {
        alert("点击了P1元素");
    },false);
    document.getElementById("PEvent2").addEventListener("click",function () {
        alert("点击了P2元素");
    },true);
</script>
</body>
</html>

灵眼儿上方

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[php学习十二]javaScript的基本练习3-Dom

JavaScript DOM .EventDiv{ background-color: #FFA500; border: 1px solid; } Hello Div中的p标签通过JS改变元素的属性<div id="changeByJS" onmouseleave="t
复制链接

扫一扫