写在前面,本文将同步发布于Blog、掘金、segmentfault、知乎等处,如果本文对你有帮助,记得为我得到我的个人技术博客项目给个star哦。

为何写这篇文章?

你可能做Web开发已经有一段时间,你是否有想过下列问题呢?
为什么div元素甚至是所有的html元素都可以使用addEventListener来添加事件呢?
为什么每个DOM节点都有parentNode、firstChild、nodeType等属性呢?
为什么每个DOM元素都有className、classList、innerHTML等属性呢?
为什么有些DOM元素有accessKey、contentEditable、isContentEditable等属性呢?
为什么每个DOM元素都有onclick、ondblclick、ondrag等属性?
本文就是来解答这些简单而又不“简单”的问题。

EventTarget

定义

EventTarget 是一个由可以接收事件的对象实现的接口,并且可以为它们创建侦听器。

作用

Element,document 和 window 是最常见的事件目标,但是其他对象也可以是事件目标,比如XMLHttpRequest,AudioNode,AudioContext 等等。
许多事件目标(包括元素,文档和 window)还支持通过 onXXX(如onclick) 属性和属性设置事件处理程序。

该接口的方法

EventTarget.addEventListener()

在EventTarget上注册特定事件类型的事件处理程序。

EventTarget.removeEventListener()

EventTarget中删除事件侦听器。

EventTarget.dispatchEvent()

将事件分派到此EventTarget。

我们自己实现EventTarget

var EventTarget = function() {
this.listeners = {};
}; EventTarget.prototype.listeners = null;
EventTarget.prototype.addEventListener = function(type, callback) {
if (!(type in this.listeners)) {
this.listeners[type] = [];
}
this.listeners[type].push(callback);
}; EventTarget.prototype.removeEventListener = function(type, callback) {
if (!(type in this.listeners)) {
return;
}
var stack = this.listeners[type];
for (var i = 0, l = stack.length; i < l; i++) {
if (stack[i] === callback){
stack.splice(i, 1);
return;
}
}
}; EventTarget.prototype.dispatchEvent = function(event) {
if (!(event.type in this.listeners)) {
return true;
}
var stack = this.listeners[event.type].slice(); for (var i = 0, l = stack.length; i < l; i++) {
stack[i].call(this, event);
}
return !event.defaultPrevented;
};

Node

定义

Node是一个接口,许多DOM类型从这个接口继承,并允许类似地处理(或测试)这些各种类型。Node是一个接口,许多DOM类型从这个接口继承,并允许类似地处理(或测试)这些各种类型。

有那些接口重Node继承其方法和属性?

Document, Element, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference
PS:在方法和属性不相关的特定情况下,这些接口可能返回null。它们可能会抛出异常 - 例如,当将子节点添加到不允许子节点存在的节点时。

接口相关的属性和方法

属性

Node.baseURI

返回一个表示base URL的DOMString。不同语言中的base URL的概念都不一样。 在HTML中,base URL表示协议和域名,以及一直到最后一个'/'之前的文件目录。

Node.childNodes

返回一个包含了该节点所有子节点的实时的NodeList。NodeList 是“实时的”意思是,如果该节点的子节点发生了变化,NodeList对象就会自动更新。

Node.firstChild

返回该节点的第一个子节点,如果该节点没有子节点则返回null。

Node.lastChild

返回该节点的最后一个子节点,如果该节点没有子节点则返回null。
此处省略若干Node接口属性,更多属性查看这里

方法

--------------------重点分割线-------------------
重点:从其父类EventTarget继承了addEventListener、removeEventListener、dispatchEvent等方法。

Node.appendChild()

将一个节点添加到指定父节点的子节点列表末尾。

Node.contains()

返回的是一个布尔值,来表示传入的节点是否为该节点的后代节点。

Node.cloneNode()

返回调用该方法的节点的一个副本。
此处省略若干Node接口方法,更多方法查看这里

Element

说明

Element是非常通用的基类,所有 Document对象下的对象都继承它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。 这些继承自Element并且增加了一些额外功能的接口描述了具体的行为。
PS:HTMLElement 接口是所有HTML元素的基础接口, 而 SVGElement 接口是所有SVG元素的基本接口。
在web以外的语言,像 XUL 可以通过 XULElement 的API,也能实现它。

属性

所有属性继承至它的祖先接口 Node, 和它所扩展的接口 EventTarget, 并且从以下部分继承了属性ParentNode, ChildNode, NonDocumentTypeChildNode, 和Animatable.

Element.assignedSlot

返回元素对应的 HTMLSlotElement 接口

Element.attributes

返回一个与该元素相关的所有属性集合NamedNodeMap

Element.classList

返回该元素包含的class属性是一个DOMTokenList.

Element.className

它是一个 DOMString 表示这个元素的class.
此处省略若干Element接口属性,更多方法查看这里

方法

--------------------重点分割线-------------------
从它的父类(Node)和它父类的父类(EventTarget)继承方法,并实现parentNode、ChildNode、NonDocumentTypeChildNode、Animatable。
此处省略若干Element接口方法,更多方法查看这里

Element.closest()

方法用来获取匹配特定选择器且离当前元素最近的祖先元素(也可以是当前元素本身)。如果匹配不到,则返回 null。

Element.getAttribute()

返回元素上一个指定的属性值。如果指定的属性不存在,则返回 null 或 "" (空字符串)。

Element.getElementsByClassName()

参数中给出类的列表,返回一个动态的 HTMLCollection ,这里面包含了所有持有这些类的后代元素。
此处省略若干Element接口方法,更多方法查看这里

HTMLElement

作用

HTMLElement 接口表示所有的 HTML 元素。一些HTML元素直接实现了HTMLElement接口,其它的间接实现HTMLElement接口。

属性

--------------------重点分割线-------------------
继承自父接口Element和 GlobalEventHandlers的属性。
HTMLElement.accessKey DOMString 获取/设置元素访问的快捷键
HTMLElement.accessKeyLabel DOMString 返回一个包含元素访问的快捷键的字符串(只读)
HTMLElement.contentEditable DOMString 获取/设置元素的可编辑状态
HTMLElement.isContentEditable Boolean 表明元素的内容是否可编辑(只读)
此处省略若干HTMLElement接口属性,更多方法查看这里

Event handlers

HTMLElement.onTouchStart
HTMLElement.onTouchEnd
HTMLElement.onTouchMove
HTMLElement.onTouchEnter
HTMLElement.onTouchLeave
HTMLElement.onTouchCancel

方法

HTMLElement.blur() void 元素失去焦点
HTMLElement.click() void 触发元素的点击事件
HTMLElement.focus() void 元素获得焦点
HTMLElement.forceSpellCheck() void

GlobalEventHandlers

定义

GlobalEventHandlers接口描述了事件处理程序像HTMLElement常见的几个接口,文件,窗口,或WorkerGlobalScope Web Workers。这些接口可以实现更多的事件处理程序。

属性

GlobalEventHandlers.onabort

中断事件。

GlobalEventHandlers.onblur

失去焦点事件。

GlobalEventHandlers.onfocus

获取焦点事件。
此处省略若干GlobalEventHandlers接口属性,更多方法查看这里

元素接口

该接口用于创建对应的元素。
如:
HTMLDivElement 接口提供了一些特殊属性(它也继承了通常的 HTMLElement 接口)来操作div元素。
HTMLFormElement接口可以创建或者修改<form>对象;它继承了HTMLElement接口的方法和属性。
HTMLAnchorElement 接口表示超链接元素,并提供一些特别的属性和方法(除了那些继承自普通 HTMLElement对象接口的之外)以用于操作这些元素的布局和显示。
......

回答前面问题

通过上面的知识,我们了解到:
HTMLDivElement(其他元素接口) 继承 HTMLElement 和 GlobalEventHandlers 接口。
HTMLElement 继承 Element 接口。
Element 继承 Node 接口。
Node 继承 EventTarget 接口。

为什么div元素甚至是所有的html元素都可以使用addEventListener来添加事件呢?
回答:从 EventTarget 接口中继承而来。
为什么每个DOM节点都有parentNode、firstChild、nodeType等属性呢?
回答:从 Node 接口中继承而来。
为什么每个DOM元素都有className、classList、innerHTML等属性呢?
回答:从 Element 接口中继承而来。
为什么有些DOM元素有accessKey、contentEditable、isContentEditable等属性呢?
回答:从 HTMLElement 接口中继承而来。
为什么每个DOM元素都有onclick、ondblclick、ondrag等属性?
回答:从 GlobalEventHandlers 接口中继承而来。
--------------------重点分割线-------------------

只有通过上面的继承关系,我们得到的 DOM 元素才是一个完整的 HTML 对象,我们才能为它设置/获取属性、绑定事件、添加样式类等操作。

参考文档:

EventTarget
Node
Element
HTMLElement
GlobalEventHandlers

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hbhaj2c2kcb

如何形成一个完整的HTML对象的更多相关文章

  1. 《Java从入门到失业》第四章:类和对象(4.3):一个完整的例子带你深入类和对象

    4.3一个完整的例子带你深入类和对象 到此为止,我们基本掌握了类和对象的基础知识,并且还学会了String类的基本使用,下面我想用一个实际的小例子,逐步来讨论类和对象的一些其他知识点. 4.3.1需求 ...

  2. 如何一步一步用DDD设计一个电商网站(十)—— 一个完整的购物车

     阅读目录 前言 回顾 梳理 实现 结语 一.前言 之前的文章中已经涉及到了购买商品加入购物车,购物车内购物项的金额计算等功能.本篇准备把剩下的购物车的基本概念一次处理完. 二.回顾 在动手之前我对之 ...

  3. 【如何快速的开发一个完整的iOS直播app】(美颜篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,美颜功能是很重 ...

  4. 【如何快速的开发一个完整的iOS直播app】(采集篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,首先需要采集主 ...

  5. 【如何快速的开发一个完整的iOS直播app】(原理篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的 ...

  6. 手把手教你实现一个完整的 Promise

    用过 Promise,但是总是有点似懂非懂的感觉,也看过很多文章,还是搞不懂 Promise的 实现原理,后面自己边看文章,边调试代码,终于慢慢的有感觉了,下面就按自己的理解来实现一个 Promise ...

  7. Django1.8教程——从零开始搭建一个完整django博客(一)

    第一个Django项目将是一个完整的博客网站.它和我们博客园使用的博客别无二致,一样有分类.标签.归档.查询等功能.如果你对Django感兴趣的话,这是一个绝好的机会.该教程将和你一起,从零开始,搭建 ...

  8. 第三十六课:如何书写一个完整的ajax模块

    本课主要教大家如何书写一个完整的ajax模块,讲解的代码主要跟ajax有关,而jQuery的ajax模块添加了Deferred异步编程的机制,因此对ajax的理解难度增大,还是忽略掉.但是我要讲解的代 ...

  9. 【如何快速的开发一个完整的 iOS 直播 app】(美颜篇)

    来源:袁峥Seemygo 链接:http://www.jianshu.com/p/4646894245ba 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播 ...

随机推荐

  1. 前端工程化:使用 shelljs 生成 yapi 接口文件

    之前的文章介绍了使用 yapi-to-typescript (下文简称 ytt)生成接口类型定义文件,方便我们直接使用接口的请求和响应类型,能减少很多写接口类型的时间. 使用 yapi-to-type ...

  2. 专业3 Cookie 和Session的使用及原理

    Cookie的使用及原理 什么是cookie cookie是一种用来跟踪和识别用户上网信息的会话控制技术,它将跟踪后的信息存储在客户端的浏览器上 cookie如何使用 第一步:设置cookie即可(告 ...

  3. C#序列化和反序列化(json)

    一,什么是Json? json是存储和交换文本信息的方法,类似xml.但是json比xml更小,更快,j更易于解析.并且json采用完全独立于语言的文本格式(即不依赖于各种编程语言),这些特性使jso ...

  4. JavaWeb之Servlet、拦截器、监听器及编程思想

    本文包含的内容有: Servlet的理解 自定义Servlet.监听器和过滤器 三者的一点点编程设计思想 后续的学习 JavaWeb是Web开发的重要基础,对Servlet.监听器和过滤器等知识的掌握 ...

  5. Flask 之 蓝图

    蓝图,听起来就是一个很宏伟的东西 在Flask中的蓝图 blueprint 也是非常宏伟的 它的作用就是将 功能 与 主服务 分开怎么理解呢? 比如说,你有一个客户管理系统,最开始的时候,只有一个查看 ...

  6. Fiddler——抓取https接口配置(web,安卓,ios)

    作为一名合格的测试怎么能不会抓包呢.   抓包适用场景:   测试某个功能时,出现了bug,这时我们便需要抓包看一下这个bug到底是前端的还是服务端的: bug的精准指向,能加速bug得以解决.   ...

  7. 常用正则表达式与python中的re模块

    正则表达式是一种通用的字符串匹配技术,不会因为编程语言不一样而发生变化. 部分常用正则表达式规则介绍: . 匹配任意的一个字符串,除了\n * 匹配任意字符串0次或者任意次 \w 匹配字母.数字.下划 ...

  8. tensorflow2.4与目标检测API在3060显卡上的配置安装

    目前,由于3060显卡驱动版本默认>11.0,因此,其不能使用tensorflow1版本的任何接口,所以学习在tf2版本下的目标检测驱动是很有必要的,此配置过程同样适用于任何30系显卡配置tf2 ...

  9. 10ISE14.7和modelsim10.5关联编译库

    今天准备在ISE14.7中调用PLL的IP核,搞一下时钟的分频和倍频.可在我做好pll的IP核后,我直接用ise生成了一个仿真文件,只需要修改下例化模块名和加一个时钟就行勒. 问题:但怎么在ISE14 ...

  10. 网络爬虫笔记之http协议

    http协议和https协议: HTTP协议:HyperText Transfer Protocol,超文本传输协议,是一种发布和接收HTML页面的方法.服务器端口号是80. HTTPS协议:是HTT ...