3.4、JavaScript的DOM对象、DOM事件和JS事件对象event的属性和方法

程序员文章站 2022-05-07 20:11:38

...

文章目录

Node节点
查找HTML元素
改变HTML元素
DOM事件
删除已有的HTML元素

DOM事件

获取焦点失去焦点
键盘事件
鼠标事件
单击事件
表单事件
加载事件
其他事件

JS事件对象event

属性
方法

DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM树
3.4、JavaScript的DOM对象、DOM事件和JS事件对象event的属性和方法

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

Node节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

我们常用父（parent）、**子（child）**和 **同胞（sibling）**等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）。
每个节点都有父节点、除了根（它没有父节点）。
一个节点可拥有任意数量的子节点。
同胞是拥有相同父节点的节点。

查找HTML元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>查找HTML元素</h2>
    <p id="demo">
        【#多地2020高考结束#，转发微博，向他们说声感谢[心]】感谢父母永远做自己最坚强的后盾；感谢老师默默耕耘让我们放飞人生梦想；感谢所有高考路上的护航人；也感谢那个永不言弃、拼搏到底的自己…十余载寒窗苦读，特殊的超长假期，你#高考后最想感谢的人#是谁？戳↓↓告别这段不可复制的高考时光！ 
    </p>
    <!-- 通过标签名查找：标签选择器 -->
    <p>
        【战疫情 斗暴雨 今日全国多地高考结束】“高三打基础，高四985”2019年高考后一位考生的“幽默”回答令人印象深刻。除北京、天津、山东等地，以及受严重洪涝灾害影响推迟考试的歙县外，延迟了一个月举行的高考，在多地落下帷幕。7月8日是2020高考的第二天，有的考生紧绷的身心终于可以缓解，而有的考生仍在苦战。#新京报直播#在安徽黄山歙县、甘肃兰州、北京等地，探访考点情况及考生状态，记录2020不平凡的高考“表情”。
    </p>
    <p class="test">
        蘑菇屋是个神奇的地方
        里面住着天使
        一花一草都在对你微笑
    </p>
    <script>
        /* 通过id查找：id选择器 */
        var x = document.getElementById("demo");
        document.write(x.innerHTML);
        document.write("<br>");
        /* 通过标签名查找：标签选择器 */
        var y = document.getElementsByTagName("p");
        document.write(y[1].innerHTML);
        document.write("<br>");
        /* 通过class名查找：类选择器 */
        var z = document.getElementsByClassName("test");
        document.write(z[0].innerHTML);
    </script>
</body>
</html>

改变HTML元素

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

JavaScript 能够创建动态的 HTML 内容：

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML = 新的 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="demo">
        【高考结束时，你是什么心情？[挤眼]】随着外语考试到点的铃声响起，目前，#多地2020高考结束#。来说说，高考结束时，你是什么心情？#高考英语# #高考英语作文钉子户# 高考结束时，你是什么心情？ 
    </p>
    <br>
    <button onclick="changeInnerHtml()">按钮</button>

    <script>
        function changeInnerHtml() {
            document.getElementById("demo").innerHTML = "哈哈，你被代替了。换我来。";
        }
    </script>
</body>
</html>

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute = 新属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https:www.bilibili.com">跳转到b站</a>
    <hr>
    <button onclick="changeAttribute()">修改超链接的打开页面</button>
    <script>
        function changeAttribute() {
            document.getElementsByTagName("a")[0].target = "_blank";
        }
    </script>
</body>
</html>

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property = 新样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        【致敬 感恩 雨中护航】7月8日下午17时许，2020年高考结束的最后时刻，绥德突降大雨，在学校周边执勤的民警冒着大雨坚守执勤岗位，守护莘莘学子高考圆满结束。这一幕引来了学生家长的致敬，上前为其举起了雨伞。致敬，感恩!
    </p>
    <button onclick="changeHtmlStyle()">按钮</button>
    <script>
        function changeHtmlStyle() {
            document.getElementsByTagName("p")[0].style.fontSize = "20px";
            document.getElementsByTagName("p")[0].style.lineHeight = "30px";
            document.getElementsByTagName("p")[0].style.color = "red";
            document.getElementsByTagName("p")[0].style.fontFamily = "楷体";
        }
    </script>
</body>
</html>

3.4、JavaScript的DOM对象、DOM事件和JS事件对象event的属性和方法

DOM事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

onclick = JavaScript代码

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>点击按钮执行<em>displayDate()</em>函数</p>
    <button>按钮</button>
    <p id="demo"></p>

    <script>
        document.getElementsByTagName("button")[0].onclick = function () {
            var date = new Date();
            var str = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" 
                + date.getMinutes() + ":" + date.getSeconds();
            document.getElementById("demo").innerHTML = str; 
        }
    </script>
</body>
</html>

删除已有的HTML元素

先获取元素的父节点，然后通过父节点删除自己。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <p id="p1">这是一个段落。</p>
        <button>按钮</button>
    </div>

    <script>
        document.getElementsByTagName("button")[0].onclick = function () {
            var child = document.getElementById("p1");
            var parent = child.parentElement;
            parent.removeChild(child);
        };
    </script>
</body>

</html>

DOM事件

获取焦点失去焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text"><span id="sa"></span>
    <script>
        var ele = document.getElementsByTagName('input')[0];
        ele.onfocus = function() {
            document.getElementById("sa").innerText = "获取焦点";
            console.log("获取焦点");
        }
        ele.onblur = function () {
            document.getElementById("sa").innerHTML = "失去焦点";
            console.log("失去焦点");
        }
    </script>
</body>
</html>

键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" onkeypress="keyPress(event)"> <!-- 传递事件对象event -->

    <script>
        var ele = document.getElementsByTagName("input")[0];
        ele.onkeydown = function() {
            console.log('键盘被按下');
        }
        ele.onkeyup = function() {
            console.log("按键被松开");
        }
        /* ele.onkeypress = function() {
            // 上面两个的综合
            console.log("按键按下并松开");
        } */
        function keyPress(event) {
            console.log('按键' + event.keyCode + '按下并松开');
            // event.keyCode 获取按键键码的ASCII
        }
    </script>
</body>
</html>

鼠标事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #demo {
            width: 300px;
            height: 500px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="demo" onmousedown="mousedown(event)">

    </div>

    <script>
        var ele = document.getElementById("demo");
        function mousedown(event) {
            // 鼠标按下
            console.log(event.button);
            // 获取鼠标按下的是左键/右键
            ele.style.backgroundColor = "green";
        }
        ele.onmouseup = function () {
            // 鼠标松开
            ele.style.backgroundColor = "red";
        }
        ele.onmouseover = function () {
            // 鼠标移上
            ele.style.height = "300px";
        }
        ele.onmouseout = function () {
            // 鼠标移开
            ele.style.height = "500px";
        }

        ele.onmousemove = function () {
            // 鼠标移动
            console.log("鼠标移动");
        }
    </script>
</body>
</html>

单击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="demo">按钮</button>

    <script>
        var ele = document.getElementById("demo");
        ele.onclick = function () {
            console.log("点击事件");
        }
        ele.ondblclick = function () {
            console.log("双击事件");
        }
    </script>
</body>
</html>

表单事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#" method="GET">
        用户名：<input type="text" name="username">
        密码：<input type="text" name="password">
        <input type="submit" value="注册">
        <input type="reset" value="重置">
    </form>

    <script>
        var ele = document.getElementsByTagName("form")[0];
        ele.onsubmit = function () {
            // return false; 禁止表单数据提交  return true;  允许表单提交
            return true;
        }
        ele.onreset = function () {
            console.log("重置表单数据");
        }
        ele.oninput = function () {
            // 边输入边校验，一般不采用
            console.log("表单输入数据");
        }
    </script>
</body>
</html>

加载事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            console.log(document.getElementById("demo"));
        }
    </script>
</head>
<body>
    <div id="demo">

    </div>
</body>
</html>

其他事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#" method="GET">
        <select name="" id="">
            <option value="basketball">篮球</option>
            <option value="football">足球</option>
            <option value="ping-pong">乒乓球</option>
        </select>
    </form>

    <script>
        var ele = document.getElementsByTagName("select")[0];
        ele.onchange = function () {
            console.log(ele.value);
        }
    </script>
</body>
</html>

JS事件对象event

event事件对象由浏览器来创建，我们可以直接来使用。

属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 500px;
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <div onclick="mydiv(event)">
        <button>按钮</button>
    </div>
    
    <script>
        /*
        currentTarget:   获取的是绑定了该事件的元素对象
		target :  获取的是触发了该事件的元素对象 
        */
        function mydiv(event) {
            var e = event.currentTarget;
            console.log(e);
            var v = event.target;
            console.log(v);
            // 点击div，第一个输出div对象，第二个输出div对象
            // 点击button，第一个输出idv，第二个输出button
        }
    </script>
</body>
</html>

方法

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #d1 {
            width: 300px;
            height: 300px;
            background-color: red;
        }
        #d2 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        #d3 {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="d1" onclick="mytest1(event)">
        <div id="d2" onclick="mytest2(event)">
            <div id="d3" onclick="mytest3(event)">

            </div>
        </div>
    </div>

    <script>
        /* function mytest1() {
            console.log(1);
        }
        function mytest2() {
            console.log(2);
        }
        function mytest3() {
            console.log(3);
        } */

        /* 
        点击id=d3的div时，控制台输出3 2 1
        点击id=d2的div时，控制台输出2 1
        点击id=d1的div时，控制台输出1
         */

        function mytest1(e) {
            console.log(1);
        }
        function mytest2(e) {
            e.stopPropagation();
            console.log(2);
        }
        function mytest3(e) {
            e.stopPropagation();
            console.log(3);
        }
        /* 
        点击id=d3、d2、d1的div时，控制台只输出3、2、1。
         */
    </script>
</body>
</html>

阻止元素的默认行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://www.bilibili.com">跳转到哔哩哔哩首页</a>

    <script>
        var ele = document.getElementsByTagName("a")[0];
        ele.onclick = function (event) {
            console.log("aaa");
            event.preventDefault();
        }
    </script>
</body>
</html>

3.4、JavaScript的DOM对象、DOM事件和JS事件对象event的属性和方法

文章目录

DOM

Node节点

查找HTML元素

改变HTML元素

DOM事件

删除已有的HTML元素

DOM事件

获取焦点失去焦点

键盘事件

鼠标事件

单击事件

表单事件

加载事件

其他事件

JS事件对象event

属性

方法

关于ajax对象一些常用属性、事件和方法大小写比较常见的问题总结

JS实现动态添加DOM节点和事件的方法示例

jQuery事件对象的属性和方法详解

从jQuery的remove()和原生JS的removeChild()方法再观jQuery对象和DOM对象的关系（代码教程）

关于ajax对象一些常用属性、事件和方法大小写比较常见的问题总结

jquery dom对象的事件隐藏显示和对象数组示例

DOM和XMLHttpRequest对象的属性和方法，domxmlhttprequest_PHP教程

优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发

优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发

显示js对象所有属性和方法的函数_javascript技巧