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

1 event

1.1 查找节点

1.2 获取属性和设置属性

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

• api看文档

1.3 绑定事件

1. on+事件绑定
怎么取消绑定？
这样有什么问题呢？
一个事件只能绑定一个函数，如果大项目，一个事件可能绑定多个函数，这样就错了

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

2. addEventListener
可以绑定多个事件，绑定多个函数
取消绑定的方法: removeEventListener

1.4 事件捕获和事件冒泡

• 事件冒泡是从从被点击的元素中找是不是有注册事件的函数
• 通过event.stopPropagation()阻止
• 冒泡是一种机制，有些场景需要关闭冒泡

• 事件捕获是从 html body这些标签开始找被注册事件的函数
• 默认关闭，如果开启addEventListener的第三个参数设置成true就好了

1.5 事件对象