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

其他 2020-08-12 06:50:55 阅读次数: 0

文章目录

DOM

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

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

HTML DOM树
在这里插入图片描述

通过可编程的对象模型，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 元素的内容。

扫描二维码关注公众号，回复： 11575127 查看本文章

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>

在这里插入图片描述

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>

猜你喜欢

转载自blog.csdn.net/ShawnYue_08/article/details/107577221
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022