DOM获取元素及添加事件

最新推荐文章于 2022-11-17 23:09:11 发布

weixin_34255055

最新推荐文章于 2022-11-17 23:09:11 发布

阅读量497

点赞数

文章标签： git python

原文链接：https://my.oschina.net/yxmBetter/blog/829586

版权

2019独角兽企业重金招聘Python工程师标准>>>

学会了操作页面上的元素，那么就开始了解一下更多的内容。

深入理解DOM

DOM就是把html中的所有的标签模拟成一个树形结构图,然后每一个标签就是一个元素,每一个元素就是一个对象。
Dom把html中所有的内容都视为对象，所以，无论是标签还是回车换行还是空白都是对象。

事件添加代码的三种写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--第一种写法-->
<input type="button" value="按钮1" id="btn1" onclick="f1();"/>
<!--第二种写法-->
<input type="button" value="按钮2" id="btn2"/>
<!--第三种写法-->
<input type="button" value="按钮3" id="btn3"/>
<script>

    //点击按钮显示对话框
    //1
    window.id="100";
    function f1() {
        alert("哈哈"+this.id);//undefined,此时的this不是按钮,this是window
        alert(this);
    }
    //2
    document.getElementById("btn2").onclick=function () {
      alert("嘎嘎"+this.id);
    };
    //3
    document.getElementById("btn3").onclick=f2;
    function f2() {
        alert("嘿嘿"+this.id);
    }
</script>

</body>
</html>

获取元素的其他方式

通过id获取元素,只能获取一个
- document.getElementById(id名);
通过标签名字获取元素,获取多个
- document.getElementsByTagName(标签名);
通过标签中name属性的值来获取元素,获取多个
- document.getElementsByName(name名);
- 如果是单选的按钮，里面的name属性的值每一组都是一样
通过类名获取，获取应用了该类名的多个（这个是HTML5中新增的）
- document.getElementsByClassName(类名)