JS学习笔记---事件三要素以及DOM改变元素内容

最新推荐文章于 2022-08-13 17:00:17 发布
最新推荐文章于 2022-08-13 17:00:17 发布
阅读量149 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46831501/article/details/116956625
版权

学习内容：

1、掌握事件三要素：事件源 事件类似 事件处理程序。
2、清楚执行事件的步骤：
（1）获取事件源
（2）注册事件（绑定事件）
（3）添加事件处理程序（采取函数赋值形式）
3、掌握改变元素内容的DOM操作。
4、能区分innerText与innerHTML的区别
（1） innerText：不识别HTML标签 ；去除空格以及换行
（2）innerHTML：能识别HTML标签；保留空格以及换行

在这里插入图片描述

innerText案例代码：

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function() {
            div.innerText = getDate();
        }

        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ];
            var day = date.getDay();
            return '今天是' + year + '年' + month + '月' + dates + '日' + arr[day];
        }
    </script>
</body>

输出结果：

在这里插入图片描述
在这里插入图片描述

innerHTML案例代码：

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function() {
            div.innerHTML = getDate();
        }

        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ];
            var day = date.getDay();
            return '<strong>今天是</strong>' + year + '年' + month + '月' + dates + '日' + arr[day];
        }
    </script>
</body>

输出结果：

在这里插入图片描述

innerText与innerHTML都可以不添加事件源
在这里插入图片描述

Tara___
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DOM—事件基础 操作元素（改变元素内容、修改元素属性、表单属性设置、样式属性操作）
m0_59030524的博客
01-02 737
1.事件基础 1.1 事件三要素 事件源、事件类型、事件处理程序 <body> <button id='btn'>唐伯虎</button> <script> // 点击一个按钮，弹出对话框 // 1. 事件三要素：事件源、事件类型、事件处理程序 // （1）事件源：事件被触发的对象——按钮 var btn = document.getElementById('btn');.
DOM—DOM 事件基础知识点总结
weixin_52984349的博客
08-20 1134
DOM—DOM 事件基础知识点总结
JS操作属性和样式及JS事件
Just8th的博客
06-28 461
JS操作属性和样式及JS事件学习笔记
【JS随笔】监听DOM内容改变
m0_66148802的博客
08-13 5787
监听DOM内容改变
js监听html元素值变化,监听元素属性改变事件的方法
weixin_33139275的博客
06-10 8741
监听元素属性改变事件的方法原创Red_Ant_hoyl2018-08-30 01:12:35著作权文章分类html技术阅读数10764©著作权归作者所有：来自51CTO博客作者Red_Ant_hoyl的原创作品，如需转载，请与作者联系，否则将追究法律责任https://blog.51cto.com/u_13479739/2166248**一、onchange事件**只在键盘或者鼠标操作改变对象属性...
web前端学习笔记--Dom
weixin_46493903的博客
08-25 221
web前端学习笔记——DOM 一、概念 DOM：document object model，文档对象模型（将文档抽象为对象），是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格，是一种基于树 的API文档，在处理过程中整个文档都表示在存储器中 DOM又称为文档树模型 文档：一个网页 节点：网页中所有的内容都是节点（标签、属性、文本、注释等） 元素：网页中的标签 属性：标签的属性 二、常用操作 获取元素 根据id获取元素 方法：通过doc
【JavaScript - Web API】DOM（获取元素 / 事件基础 / 操作元素 / 节点操作）
qq_30148319的博客
05-18 455
一、DOM 简介 1、什么是 DOM ？ 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 2、DOM 树 文档：一个页面就是一个文档，DOM 中使用 document 表示。 元素：页面中的所有标签都是元素，DOM 中使用 element 表示。 ...
前端学习笔记 - Web APIs(DOM) 文档对象模型
fengxm0309的博客
10-11 615
Web APIs 和 JS API API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能 Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM ) 主要是针对于浏览
JS学习笔记之DOM 4.22
qq_36450483的博客
04-26 513
JS学习笔记之DOM API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。 MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API 2 DOM
vue-element ui 学习笔记-01
mysteryflower的专栏
06-07 317
https://cn.vuejs.org/ 一、什么是Vue 1.简介 Vue(读音/vju:/,类似于view)是一套用于构建用户界面的渐进式的js框架，发布于2014年2月。 与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。 Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如：vue-router，vue-resource，vuex)或既有项目整合。 结合了HTML+CSS+JS，有很好的生态系统，而且vue体积很小，速度很快，优化很到位。 2、MVVM模式的实现者--双向数
深入理解DOM事件类型系列第三篇——变动事件
weixin_34296641的博客
09-14 266
前面的话 　　变动(mutation)事件能在DOM中的某一部分发生变化时给出提示，这类事件非常有用，但都只能使用DOM2级事件处理程序，且由于浏览器兼容性不好，所以用的不广泛   删除节点 　　删除节点时，涉及到DOMNodeRemoved、DOMNodeRemovedFromDocument和DOMSubtreeModified这三个事件，下面将详细介绍 DOMNodeRemoved...
javascript 监听DOM内容改变事件
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
06-03 1万+
效果演示： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript监听DOM内容改变事件</title> <style type="text/css"> ...
DOM中监听节点变化的事件(变动事件)的用法 — 第13.4.6节
flyingpig2016的博客
12-16 3万+
DOM变动事件用法
javascript：dom的变动事件
胡世林的博客
05-09 2713
比较少用这东西，毕竟很多时候我们都不去实用这个的，而且监听事件已经可以满足我们的需求了。但是记下来。多学一点还是好的资料来源：javascript高级编程代码：当然不止下面的代码这四种方法，只是设个简单的。毕竟这个是一片记录学习的博客&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
监听元素属性改变事件的方法
weixin_33973600的博客
08-30 1133
一、onchange事件只在键盘或者鼠标操作改变对象属性，且失去焦点时触发，脚本触发无效。（就是说你在输入框中输入完内容，输入完了，然后鼠标点别的地方触发该事件）二、oninput事件oninput 事件在用户输入时触发。不支持JS等赋值改变的元素属性。该事件在 <input> 或 <textarea> 元素的值发生改变时触发。（也就是说，不用输入完，边输入边触发该事件）①...
js动态传值，触发值改变事件
你好！刘斩仙
12-14 8083
代码如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.3.js"></script> </head> <body><input id="textarea" type="text"/> <p><button type=
JS文本框内容改变事件
且听风吟的专栏
11-05 1万+
onchange触发事件必须满足两个条件： a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效） b）当前对象失去焦点(onblur)；  (简单说就是：是在文本内容改变，然后失去焦点的时候发生) onpropertychange的话，只要当前对象属性发生改变，都会触发事件，但是它是IE专属的；         oninput是onpropertycha
ES5--节点属性改变触发事件
houdabiao的博客
04-12 865
DOM变动事件的用法  DOM2级的変动事件是为XML或html的DOM设计的，不特定于某种语言。 一：变动事件的分类有7种，最常用的浏览器支持最多的有3种，下面黑体？ 1. DOMSubtreeModified：在DOM结构中发生任何变化时触发； 2. DOMNodeInserted：在一个节点作为子节点被插入到另一个节点中时触发； 3. DOMNodeRemoved：在节点从其父节点中被移除时...
[事件处理] js实现的文本框内容发生改变立马触发事件简单介绍
热门推荐
Stu_zkl的博客
11-18 3万+
js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候，立马触发一个事件执行响应的操作，而不是像是keydow或者keyup事件一样，只能够检测通过键盘输入导致内容的变化， 下面就通过代码实例做一下简单介绍。 一.相关知识准备: 1.onchange事件:此事件会在元素内容发生改变，且失去焦点的时候触发。 浏览器支持度较好。2.onpropertyc
javascript学习笔记--查看html元素和改变html的内容
最新发布
06-01
好的，我可以为您解答关于 JavaScript 学习笔记方面的问题。针对您的问题，查看 HTML 元素和改变 HTML 内容是 JavaScript 中非常常见的操作之一，我们可以通过以下几种方式实现： 1. 通过 `document.getElementById()` 方法获取 HTML 元素，该方法接受一个参数，即需要获取的元素的 ID 值。例如： ``` let elem = document.getElementById("my-element"); ``` 2. 通过 `document.querySelector()` 方法获取 HTML 元素，该方法接受一个参数，即需要获取的元素的 CSS 选择器。例如： ``` let elem = document.querySelector(".my-class"); ``` 3. 通过 `innerHTML` 属性获取或设置 HTML 元素的内容。例如： ``` let elem = document.getElementById("my-element"); console.log(elem.innerHTML); // 获取元素的内容 elem.innerHTML = "新的内容"; // 设置元素的内容 ``` 4. 通过 `textContent` 属性获取或设置 HTML 元素的文本内容。例如： ``` let elem = document.getElementById("my-element"); console.log(elem.textContent); // 获取元素的文本内容 elem.textContent = "新的文本内容"; // 设置元素的文本内容 ``` 希望这些信息能够帮助您更好地了解如何在 JavaScript 中查看 HTML 元素和改变 HTML 内容。如果您有其他问题，请随时向我提出。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值