zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    浙大数据结构课后习题 练习二 7-2 Reversing Linked List (25 分)
    浙大数据结构课后习题 练习二 7-2 一元多项式的乘法与加法运算 (20 分)
    浙大数据结构课后习题 练习一 7-1 Maximum Subsequence Sum (25 分)
    浙大数据结构课后习题 练习一 7-1 最大子列和问题 (20 分)
    PAT Basic 1019 数字黑洞 (20 分)
    PAT Basic 1017 A除以B (20 分)
    PAT Basic 1013 数素数 (20 分)
    PAT Basic 1007 素数对猜想 (20 分)
    PAT Basic 1003 我要通过! (20 分)
    自动化运维——HelloWorld(一)
  • 原文地址:https://www.cnblogs.com/liuyingde/p/7868948.html
Copyright © 2011-2022 走看看