最新公告
  • 欢迎您光临立业阁,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 一个完整的HTML对象是什么样的,如何生成?_html教程


    对html对象,首先要先提到Node节点,Node是一个接口,许多DOM类型从这个接口继承,并允许类似地处理(或测试)这些各种类型。有那些接口重Node继承其方法和属性?先看看本文章吧。apache php mysql

    为何写这篇文章?

    你可能做Web开发已经有一段时间,你是否有想过下列问题呢?
    为什么p元素甚至是所有的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接口属性,更多方法查看这里。

    元素接口

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

    回答前面问题

    通过上面的知识,我们了解到:
    HTMLpElement(其他元素接口) 继承 HTMLElement 和 GlobalEventHandlers 接口。
    HTMLElement 继承 Element 接口。
    Element 继承 Node 接口。
    Node 继承 EventTarget 接口。
    搜狗截图18年07月30日1717_17.png为什么p元素甚至是所有的html元素都可以使用addEventListener来添加事件呢?
    回答:从 EventTarget 接口中继承而来。
    为什么每个DOM节点都有parentNode、firstChild、nodeType等属性呢?
    回答:从 Node 接口中继承而来。
    为什么每个DOM元素都有className、classList、innerHTML等属性呢?
    回答:从 Element 接口中继承而来。
    为什么有些DOM元素有accessKey、contentEditable、isContentEditable等属性呢?
    回答:从 HTMLElement 接口中继承而来。
    为什么每个DOM元素都有onclick、ondblclick、ondrag等属性?
    回答:从 GlobalEventHandlers 接口中继承而来。
    那么重点来了!

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

    相关文章:

    如何判断出一个js对象是否一个dom对象

    数据库完整性是什么概念?

    相关视频:

    HTML5 完整版手册

    以上就是一个完整的HTML对象是什么样的,如何生成?的详细内容,

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    • 1186会员总数(位)
    • 111860资源总数(个)
    • 4本周发布(个)
    • 0 今日发布(个)
    • 248稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    冀ICP备19022365号-1 百度地图

    侵权联系邮箱[email protected]

    立业阁(www.liyege.cn)免费提供wordpress主题模板、dedecms模板、帝国cms模板、小说网站源码、电影网站源码以及网络技术分享,建站源码,小说模板,电影模板,网赚教程,VPS推荐