JS||DOM文档对象模型

JS||DOM文档对象模型

文档

Table of Contents

1. Goals
2. 1 Infrastructure
   1. 1.1 Trees
   2. 1.2 Ordered sets
   3. 1.3 Selectors
   4. 1.4 Namespaces
3. 2 Events
   1. 2.1 Introduction to “DOM Events”
   2. 2.2 Interface Event
   3. 2.3 Legacy extensions to the Window interface
   4. 2.4 Interface CustomEvent
   5. 2.5 Constructing events
   6. 2.6 Defining event interfaces
   7. 2.7 Interface EventTarget
   8. 2.8 Observing event listeners
   9. 2.9 Dispatching events
   10. 2.10 Firing events
   11. 2.11 Action versus occurrence
4. 3 Aborting ongoing activities
   1. 3.1 Interface AbortController
   2. 3.2 Interface AbortSignal
   3. 3.3 Using AbortController and AbortSignal objects in APIs
5. 4 Nodes
   1. 4.1 Introduction to “The DOM”
   2. 4.2 Node tree
      1. 4.2.1 Document tree
      2. 4.2.2 Shadow tree
         1. 4.2.2.1 Slots
         2. 4.2.2.2 Slottables
         3. 4.2.2.3 Finding slots and slottables
         4. 4.2.2.4 Assigning slottables and slots
         5. 4.2.2.5 Signaling slot change
      3. 4.2.3 Mutation algorithms
      4. 4.2.4 Mixin NonElementParentNode
      5. 4.2.5 Mixin DocumentOrShadowRoot
      6. 4.2.6 Mixin ParentNode
      7. 4.2.7 Mixin NonDocumentTypeChildNode
      8. 4.2.8 Mixin ChildNode
      9. 4.2.9 Mixin Slottable
      10. 4.2.10 Old-style collections: NodeList and HTMLCollection
          1. 4.2.10.1 Interface NodeList
          2. 4.2.10.2 Interface HTMLCollection
   3. 4.3 Mutation observers
      1. 4.3.1 Interface MutationObserver
      2. 4.3.2 Queuing a mutation record
      3. 4.3.3 Interface MutationRecord
      4. 4.3.4 Garbage collection
   4. 4.4 Interface Node
   5. 4.5 Interface Document
      1. 4.5.1 Interface DOMImplementation
   6. 4.6 Interface DocumentType
   7. 4.7 Interface DocumentFragment
   8. 4.8 Interface ShadowRoot
   9. 4.9 Interface Element
      1. 4.9.1 Interface NamedNodeMap
      2. 4.9.2 Interface Attr
   10. 4.10 Interface CharacterData
   11. 4.11 Interface Text
   12. 4.12 Interface CDATASection
   13. 4.13 Interface ProcessingInstruction
   14. 4.14 Interface Comment
6. 5 Ranges
   1. 5.1 Introduction to “DOM Ranges”
   2. 5.2 Boundary points
   3. 5.3 Interface AbstractRange
   4. 5.4 Interface StaticRange
   5. 5.5 Interface Range
7. 6 Traversal
   1. 6.1 Interface NodeIterator
   2. 6.2 Interface TreeWalker
   3. 6.3 Interface NodeFilter
8. 7 Sets
   1. 7.1 Interface DOMTokenList
9. 8 XPath
   1. 8.1 Interface XPathResult
   2. 8.2 Interface XPathExpression
   3. 8.3 Mixin XPathEvaluatorBase
   4. 8.4 Interface XPathEvaluator
10. 9 Historical
    1. 9.1 DOM Events
    2. 9.2 DOM Core
    3. 9.3 DOM Ranges
    4. 9.4 DOM Traversal
11. Acknowledgments
12. Intellectual property rights
13. Index
    1. Terms defined by this specification
    2. Terms defined by reference
14. References
    1. Normative References
    2. Informative References
15. IDL Index

其实就三部分，NODE EVENT RANGES

其中ranges不常用

主要关注event和node

1 event

1.1 查找节点

document.querySelector()        //查找命中选择器的第一个节点		返回node   
document.querySelectorAll()     //查找命中选择器的所有节点		返回node list

document.getElementsByClassName()       //根据class查找		返回node list
document.getElementsByTagName()     //根据标签名查找		返回node list
document.getElementById()       //根据id查找		返回node
//node list是个伪数组

1.2 获取属性和设置属性

• 属性
  • 显示：src class……
  • 隐式：相对高度，滚动条高度……
• api看文档

1.3 绑定事件

1. on+事件绑定

   div.obclick = function() {
   }
   

   怎么取消绑定？

   div.onclick = NULL
   

   这样有什么问题呢？

   一个事件只能绑定一个函数，如果大项目，一个事件可能绑定多个函数，这样就错了

   虽然函数是一个对象，里面也能套函数，这样也可以实现很多功能，但是场景是这样的：给你一个别人的项目，也根本不知道他前面写了啥，也懒得看，现在要增加一个新的功能，绑定事件，直接obclick = function,可能就把别人的代码给覆盖了

2. addEventListener

   可以绑定多个事件，绑定多个函数

   取消绑定的方法: removeEventListener

1.4 事件捕获和事件冒泡

• 事件冒泡是从从被点击的元素中找是不是有注册事件的函数
  • 通过event.stopPropagation()阻止
  • 冒泡是一种机制，有些场景需要关闭冒泡
• 事件捕获是从 html body这些标签开始找被注册事件的函数
  • 默认关闭，如果开启addEventListener的第三个参数设置成true就好了

1.5 事件对象

绑定函数的第一个参数

onClick = function(event) {
}

有些事件仅仅触发是不够的，我们还需要知道他的信息，通过event就能获取到事件触发对象的坐标等基本信息