如何理解DOM对象和事件

最新推荐文章于 2024-06-22 01:26:01 发布
最新推荐文章于 2024-06-22 01:26:01 发布
阅读量434 收藏 1
点赞数
分类专栏： JavaScript 文章标签： DOM javaScript DOM事件 DOM对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sun13921881708/article/details/71247063
版权

如何理解DOM对象

作用

使用DOM技术可以控制页面中的HTML和CSS，就是把页面中的所有的内容封装成对象。

对象

1.Document：文件


获取文档对象：var doc = window.document;

2.Element：元素


获取元素对象：var font = document.getElementById("");

3.Attribute：属性


获取属性对象：var color = font.getAttributeNode("color")

4.Text：文本


获取文本对象：var text = font.text/font.firstChild;

节点类型Node类型

1.自身属性


nodename nodeValue nodeType

2.导航属性


parentNode childNodes

DOM中的事件

解释：给对应元素的对象，添加一个Function类型的属性，这个Function的对象会在相应的时机被调用，调用时机跟属性的名称有关。


var font = document.getElementById("aaa");
          font.onclick = function(){
           alert();
          font.onkeydown = function(event){
           if(event.keycode==13){}
           alert();
           }
      <body οnlοad="fun1()">
      event.stopPropagation(); 阻止事件的传播


熙哲数
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM对象的深入理解
最可爱的草莓酱兔兔
04-24 315
DOM是啥？ JS由三部分组成： ECMAScript DOM(Document Object Model): 文档对象模型，简单来说，就是提供一系列的属性和方法，让我们能够操作页面中的DOM元素(可以理解为HTML标签)。 BOM(Browser Object Model): 浏览器对象模型 如何获取DOM元素？ 这里先简单列举两个，用以探究DOM内部结构。 语法 含义 do...
DOM事件对象
沉梦昂志
07-12 202
绑定事件的两种方式/DOM事件的级别 我们在之前的一篇文章《04-JavaScript/22-DOM简介和DOM操作》中已经讲过事件的概念。这里讲一下绑定（注册）事件的两种方式，我们以onclick事件为例。 DOM0的写法：onclick element.onclick = function () { } 举例： <body> <button>点我</button> <script> var btn = document.getE
2021-09-26
m0_62077482的博客
09-26 99
一、事件 **事件的作用：**为html的元素添加动作(行为) 1.1 鼠标事件 鼠标单击事件 onclick 鼠标双击事件 ondbclick 鼠标滑过事件 onmouseover 鼠标移出事件 onmouseout 鼠标穿过事件 1.2 表单事件 ​ 获得焦点(聚焦)事件 onfocus ​ 失去焦点事件 onblur ​ 内容改变事件 onchange 1.3 键盘事件 ​ 键盘按下事件 onkeydown ​ 键盘弹起事件
Dom对象方法的理解
shenmill的博客
08-30 286
Dom—文档对象模型(Document Object Model)，对象方getElementById()， getElementsByTagName(),getElementsByClassName(), getElementsByName()
如何理解和实现c#事件
zy41796745的专栏
12-04 481
原文地址：http://www.cnblogs.com/matthew/archive/2008/08/19/1270671.html 网上有很多关于事件是如何实现的，但看来看去都不是很明了。有时候很多网站都转载相同的内容，千篇一律，所以自己打算好好研究一下这东东究竟如何实现。Step 1 什么是事件究竟什么是事件呢？想到事件，就让我想到911. 记得那段事件大家都在谈91
关于DOM对象的理解
weixin_30480075的博客
05-19 97
DOM（Document Object Model）定义了访问HTML文档对象的一套属性、方法和事件。本质是建立网页与脚本语言或程序语言沟通桥梁。随处可搜到一个浏览器对象分层结构的图片，参照那个图片会有更好的理解。 转载于:https://www.cnblogs.com/3QAll/p/3737833.html...
DOM 事件对象
最新发布
2401_82968855的博客
06-22 844
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。(W3C)事件对象会在事件被触发时获得，对象包含了当前事件的一些信息，如点击事件可以获取到点击的位置，键盘输入事件可以获取到按下的键。
jQuery对象和DOM对象之间相互转换的方法介绍
10-24
在Web开发中，经常需要在jQuery对象和DOM对象之间进行转换，以便可以利用各自对象的方法优势进行高效编程。jQuery对象是包装了DOM对象的类数组对象，它们之间的转换虽然看似简单，但在实际操作中却非常重要。 首先...
javascript 删除dom对象的事件函数代码
01-19
JS添加/删除事件在IE和支持dom浏览器分别为：attachEvent（ie中的添加事件），detachEvent（ie中的删除事件），addEventListener（支持dom浏览器中的添加事件），removeEventListener（支持dom浏览器中的删除事件）...
jquery对象和javascript对象即DOM对象相互转换
12-09
jQuery对象和JavaScript对象（DOM对象）虽然在很多方面都是互补的，但它们在功能和使用上有着明显的区别。理解如何在这两者之间进行转换是编写高效、简洁的jQuery代码的关键。 首先，jQuery对象是通过调用jQuery...
jquerydom对象的事件隐藏显示和对象数组示例
01-21
1.事件处理 1.1.事件绑订 bind(type,fn); 例子: 代码如下: $(function(){ //正式的写法 $(‘#d1’).bind(‘click’,function(){ $(this).css(‘font-size’,’80px’); }); //简写形式 $(‘#d1’).click(function(){...
【学习笔记】：DOM对象及事件绑定
01-08
【学习笔记】：DOM对象及事件绑定 ...以上就是关于DOM对象和事件绑定的一些基本知识点，理解并掌握它们对于开发交互性强的Web应用至关重要。通过熟练运用DOM操作和事件处理，可以创建出各种动态效果和用户交互功能。
关于Dom事件的理解
sinat_41707161的博客
03-25 313
一、DOM事件的级别     DOM事件分为三个级别，分别是0级、2级和3级事件。     分别长这样：0级事件： Element.onclick = function(){}; 2级事件: Element.addEventListener('click',function(){},false); 3级事件： Element.addEventListener('keyup',function(){...
DOM对象初步理解
ZiXiaweb的博客
08-24 272
了解DOM需要清楚几个问题： 什么是DOM？ DOM可以用来干什么？ DOM是怎么来的？ 怎么使用DOM？ 1. 什么是DOM？ HTML DOM 是 HTML 的标准对象模型和编程接口。 它定义了： 作为对象的 HTML 元素 所有 HTML 元素的属性 访问所有 HTML 元素的方法 所有 HTML 元素的事件 换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。 2. DOM可以用来干什么？ 理解了DOM是API，就知道它就是一些功能，通过这些功能可以对HTML
如何理解事件以及使用事件
weixin_42150685的博客
04-09 664
**疑惑点： **对于刚接触事件来说，往往会有一种现象那就是，我为什么要用事件来调用过程，我直接调用不行吗？一样可以达到效果啊，我根本就搞不懂为啥需要事件呢？ 理解直接调用和事件调用的区别 首先引用MSDN对事件的描述 执行流程是由外部发生的事情（称为“事件”）决定的 你比如说，我的按钮单击了，但是我单击后的事情由用户处理而不是我在按钮内部处理，你没理由说，我单击了按钮，我又在按钮里面自己做了一件...
理解DOM到底是什么
weixin_34025051的博客
12-01 1536
文档对象模型或者说我们熟悉的“DOM”，web网页的一个界面。它本质上是允许程序读取和操作页面的内容，结构和样式的页面API。 接下来一一分解。 网页如何构建 浏览器如何从源HTML文档转到在视口中显示样式化和交互式页面称为“关键渲染路径”。 这些步骤大致可分为两个阶段。第一阶段涉及浏览器解析文档以确定最终将在页面上渲染的内容，第二阶段涉及浏览器执行渲染。 第一阶段的结果是所谓的“渲染树”。 渲...
一些DOM中的理解
weixin_45846980的博客
08-23 198
前言  在我们经过了前面学习基础js的核心语法，也进入到构成整个js的第二个部分DOM，那么什么是DOM，它又有那些作用，学习了DOM会对我现在代码水平，又有怎样的提升，下面我们一一解答 DOM的简介 在我们js中DOM(文档对象模型)，定义了如何操作文档标准，它允许代码动态地获取和更新文档内容，结构和样式 概念 是将一个HTML或XML文档，用对象模型表示出来,每个对象称之为DOM对象 DOM对象有称之为节点node； W3C DOM标准的三个不同的部分关系（包含关系） 核心 DOM：所有文档类型的标准
JS事件、Bom对象和Dom对象
dirft_lez的博客
06-16 141
JS事件、Bom对象和Dom对象 主要内容 事件 ​ 事件 (Event) 是 JavaScript 应用跳动的心脏 ，进行交互，使网页动起来。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。 ​ 通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。 作
JavaScript-字面量对象详解
熙哲数
07-25 1966
字面量对象 定义：js的字面量对象，就是一种简化的创建对象的方式，和用构造函数创建对象一样存在于堆内存当中 字面量对象表达式语法： {属性：属性值，属性：属性值,.....} ​ 属性访问： 1.通过（.）语法访问：obj.propertyName 通过语法访问[]:obj["name"] ​ 遍历字面量对象 for(var temppro in obj){ } ​ 我会把
理解DOM：文档对象模型详解
"DOM对象.docx" 文档对象模型（DOM），全称为Document Object Model，是一种通用的、标准化的、与语言无关的接口，用于访问和操纵HTML或XML文档的结构、内容和样式。DOM的核心在于它将网页内容建模为一棵可交互的树...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值