• DOM 核心


    EventTarget (继承事件)  --> Node 对象    -->  Document

    [addEventListener]      [baseURI]        DocumentFragment

    [removeEventListener]     [isConnected]      Characterdata

    [dispatchEvent]            [textContent]            Text

                    [nodeName]           Attr

                  [nodeType]            CDATASection

                    [nodeValue]                     Comment

                  ......                     Notification

                              Element        -->  HTMLElement  -->  HTMLInputElement

                               [classlist]         SVGElement     HTMLImageElement

                               [attributes]                   创建对象 API document.createElement(element.tagName)

                                 [className]                    ......

                                 [innerHTML]

                                 [outerHTML]

                               [scrollTop]

                               [shadowRoot]

                               ......

                               e_onfullscreenchange

                               e_getBoundingClientRect

                               ......

    上述呈现的是 DOM继承关系, 可以看出:

      HTMLELement 对象 ->  Element 对象 -> Node对象 -> EventTarget 对象;

      

    举例来说, 一个 HTMLInputElement 输入框

    除开本身拥有的 setRangeText(), accept/disabled ... 等一些私有的属性/方法之外,

      继承了 HTMLElement对象的方法, 比如: click(),  offsetLeft/style ... 等等

        而 HTMLElement对象又继承了 Element对象, 因此可以使用 scrollTo(), tagName/scrollTop/classlist ... 这些属性或方法

          Element对象又继承了 Node对象, 因此可以使用 appendChild(), nodeType/nodeValue/textContent ... 这些属性或方法

            Node对象继承了 EventTarget, 因此可以接受事件, 或创建事件侦听

    DOM (Document Object Model)——文档对象模型, 是用来呈现以及与任意 HTML 或 XML文档交互的API。

    它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容. 

    DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合

    DOM由开始和JavaScript交织在一起的,演变成了与特定编程语言相独立的API。

    参考: https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget

        https://developer.mozilla.org/zh-CN/docs/Web/API/Node

        https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLInputElement

        https://developer.mozilla.org/zh-CN/docs/Glossary/DOM

        https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model

        https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction

  • 相关阅读:
    DNS解析过程和DNS挟持
    TCP的流量控制和拥塞控制
    tcp连接的建立与释放
    DRBD分布式块设备复制
    rsync+inotify实现数据的实时备份
    nginx+tomcat网页动静分离配置
    基于mysql数据库集群的360度水平切割
    基于主从复制的Mysql双机热备+amoeba实现读写分离、均衡负载
    hexo安装
    centos7-minimal升级内核
  • 原文地址:https://www.cnblogs.com/liuyingde/p/7868948.html
Copyright © 2020-2023  润新知