DOM启示录
因为个人学习缘故而翻译，所以一些不是很重要的内容我一概略过不翻译直接扔掉了，专业翻译人士请折叠我。
前言
我是开发网站的，有些我也会自娱自乐的搞搞音乐，许多年前，我注意到一个有趣的现象，搞音乐的人好多搞音乐的人自以为是自己是自我创作型的人才，他们不屑于学习任何音乐理论，他们觉得学习理论会限制他们的发挥，我不这么看，我觉得学习某个知识领域的理论知识只会对人有帮助。
Douglas Crockford的蝴蝶书让我们彻底理解了JavaScript不只是一门玩具语言，现在Cody Lindley让我们同样的可以对DOM做到这一点。
只要你学完了这本书，在书的结束的时候我们会看一个用这本书的知识构建起来的一个DOM库。
Chapter 1 - DOM节点一览
1.1 DOM是树型结构
1.2 节点对象类型
1.3 继承自节点的子节点
1.4 节点的属性和方法
1.5 节点的type和name
1.6 节点的value
1.7 用js方法来创建元素节点和文本节点
1.8 使用字符串创建和增加元素节点和文本节点
1.9 抽取部分DOM树片段
1.10 appendChild和insertBefore
1.11 removeChild和replaceChild
1.12 cloneNode
1.13 NodeList和HTMLCollection
1.14 获取一组子节点
1.15 转换NodeList或HTMLCollection成Array
1.16 遍历DOM
1.17 使用contains和compareDocumentPosition来验证节点的位置
1.18 判断二个节点是否相等
Chapter 2 - Document Nodes
2.1 document node overview
2.2 HTMLDocument properties and methods (including inherited)
2.3 Getting general HTML document information (title, url, referrer, lastModified, compatMode)
2.4 document child nodes
2.5 document provides shortcuts to <!DOCTYPE>, <html lang="en">, <head>, and <body>
2.6 Detecting DOM specifications/features using document.implementation.hasFeature()
2.7 Get a reference to the focus/active node in the document
2.8 Determing if the document or any node inside of the document has focus
2.9 document.defaultview is a shortcut to the head/global object
2.9 Getting a reference to the Document from an element using ownerDocument
Chapter 3 - Element Nodes
3.1 HTML*Element object overview
3.2 HTML*Element object properties and methods (including inherited)
3.3 Creating Elements
3.4 Get the tag name of an element
3.5 Getting a list/collection of element attributes and values
3.6 Getting, Setting, & Removing an element's attribute value
3.7 Verifying an element has a specific attribute
3.8 Getting a list of class attribute values
3.9 Adding & removing sub-values to a class attribute
3.10 Toggling a class attribute value
3.11 Determining if a class attribute value contains a specific value
3.12 Getting & Setting data-* attributes
Chapter 4 - Element Node Selecting
4.1 Selecting a specific element node
4.2 Selecting/creating a list (aka NodeList) of element nodes
4.3 Selecting all immediate child element nodes
4.4 Contextual element selecting
4.5 Pre-configured selections/lists of element nodes
4.6 Verify an element will be selected using matchesSelector()
Chapter 5 - Element Node Geometry & Scrolling Geometry
5.1 Element node size, offsets, and scrolling overview
5.2 Getting an elements offsetTop and offsetLeft values relative to the offsetParent
5.3 Getting an elements top, right, bottom and left border edge offset relative to the viewport using getBoundingClientRect()
5.4 Getting an elements size (border + padding + content) in the viewport
5.5 Getting an elements size (padding + content) in the viewport excluding borders
5.6 Getting topmost element in viewport at a specific point using elementFromPoint()
5.7 Getting the size of the element being scrolled using scrollHeight and scrollWidth
5.8 Getting & Setting pixels scrolled from the top and left using scrollTop and scrollLeft
5.9 Scrolling an element into view using scrollIntoView()
Chapter 6 - Element Node Inline Styles
6.1 Style Attribute (aka element inline CSS properties) Overview
6.2 Getting, setting, & removing individual inline CSS properties
6.3 Getting, setting, & removing all inline CSS properties
6.4 Getting an elements computed styles (i.e. actual styles including any from the cascade) using getComputedStyle()
6.5 Apply & remove css properties on an element using class & id attributes
Chapter 7 - Text Nodes
7.1 Text object overview
7.2 Text object & properties
7.3 White space creates Text nodes
7.4 Creating & Injecting Text Nodes
7.5 Getting a Text node value with .data or nodeValue
7.6 Maniputlating Text nodes with appendData(), deleteData(), insertData(), replaceData(), subStringData()
7.7 When mulitple sibling Text nodes occur
7.8 Remove markup and return all child Text nodes using textContent
7.9 The difference between textContent & innerText
7.10 Combine sibling Text nodes into one text node using normalize()
7.11 Splitting a text node using splitText()
Chapter 8 - DocumentFragment Nodes
8.1 DocumentFragment object overview
8.2 Creating DocumentFragment's using createDocumentFragment()
8.3 Adding a DocumentFragment to the live DOM
8.4 Using innerHTML on a documentFragment
8.5 Leaving a fragments containing nodes in memory by cloning
Chapter 9 - CSS Style Sheets & CSS rules
9.1 CSS Style sheet overview
9.2 Accessing all style sheets (i.e. CSSStylesheet objects) in the DOM
9.3 CSSStyleSheet properties and methods
9.4 CSSStyleRule overview
9.5 CSSStyleRule properties and methods
9.6 Getting a list of CSS Rules in a style sheet using CSSRules
9.7 Inserting & deleting CSS rules in a style sheet using .insertRule() and .deleteRule()
9.8 Editing the value of a CSSStyleRule using the .style property
9.9 Creating a new inline CSS style sheets
9.10 Programatically adding external style sheets to an HTML document
9.11 Disabling/Enabling style sheets using disabled property
Chapter 10 - JavaScript in the DOM
10.1 Inserting & executing JavaScript overview
10.2 JavaScript is parsed synchronously by default
10.3 Defering the downloading & exectuion of external JavaScript using defer
10.4 Asynchronously downloading & executing external JavaScript files using async
10.5 Forcing asynchronous downloading & parsing of external JavaScript using dynamic <script>
10.6 Using the onload call back for asynchronous <script>'s so we know when its loaded
10.7 Be mindful of <script> 's placement in HTML for DOM manipulation
10.8 Getting a list of <script>'s in the DOM
Chapter 11 - DOM Events
11.1 DOM events overview
11.2 DOM event types
11.3 The event flow
11.4 Adding event listeners to Element nodes, window object, and Document object
11.5 Removing event listeners
11.6 Getting event properties from the event object
11.7 The value of this when using addEventListener()
11.8 Referencing the target of an event and not the node or object the event is invoked on
11.9 Cancelling default browser events using preventDefault()
11.10 Stoping the event flow using stopPropagation()
11.11 Stoping the event flow as well as other like events on the same target using stopImmediatePropagation()
11.12 Custom events
11.13 Simulating/Triggering mouse events
11.14 Event delegation
Chapter 12 - Creating dom.js - a wishful jQuery inspired DOM Library for modern browers
12.1 dom.js overview
12.2 Create a unique scope
12.3 Create the dom() and GetOrMakeDom() functions exposing dom() and GetOrMakeDom.prototype to the global scope
12.4 Create optional context paramater passed to dom()
12.5 Populate object with DOM node references based on params and return object
12.6 Create each() method and make it a chainable method
12.7 Create html(), append(), & text() methods
12.8 Taking dom.js for a spin
12.9 Summary & continuing on with dom.js
扫一扫
1616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
