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

  • 相关阅读:
    PLSQL连接64位oracle,导入导出错误解决办法
    VS2008或者VS2010工具栏,标准里面的 在浏览器中浏览按钮不见了
    jquery radio取值,checkbox取值,select取值 及选中
    Waiting for HOME (‘android.process.acore’) to be launched…解决办法
    GetTickCount() 函数的作用和用法
    MFC ado连接access数据库
    VC切分窗口和多视图
    C++容器——插入与清除
    VC中在对话框上显示图片
    error LNK2005 已经在***.obj中定义
  • 原文地址:https://www.cnblogs.com/liuyingde/p/7868948.html
Copyright © 2011-2022 走看看