Slide 1

Slide 1 text

The Giving Tree @markwunsch

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

The Ash Yggdrasil Friedrich Wilhelm Heine, 1886

Slide 4

Slide 4 text

Document Object Model

Slide 5

Slide 5 text

Document Object Model (DOM) Level 1 Specification http://www.w3.org/TR/REC-DOM-Level-1/ In the DOM, documents have a logical structure which is very much like a tree; to be more precise, it is like a “forest” or “grove”, which can contain more than one tree. However, the DOM does not specify that documents must be implemented as a tree or a grove, nor does it specify how the relationships among objects be implemented.

Slide 6

Slide 6 text

What the Document Object Model is not • “…it does not implement all of ‘Dynamic HTML’.” • “The Document Object Model is not a binary specification.” • “The Document Object Model is not a way of persisting objects to XML or HTML.” • “The Document Object Model is not a set of data structures, it is an object model that specifies interfaces.” • “The Document Object Model does not define ‘the true inner semantics’ of XML or HTML.” • “The Document Object Model…is not a competitor to the Component Object Model (COM).”

Slide 7

Slide 7 text

$

Slide 8

Slide 8 text

Closer to the METAL

Slide 9

Slide 9 text

window.document

Slide 10

Slide 10 text

TreeWalker

Slide 11

Slide 11 text

document.createTreeWalker()

Slide 12

Slide 12 text

createTreeWalker(root, whatToShow, filter) root, whatToShow, filter

Slide 13

Slide 13 text

Document Object Model (DOM) Level 2 Traversal and Range Specification http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ TreeWalker objects are used to navigate a document tree or subtree using the view of the document defined by their whatToShow flags and filter (if any).

Slide 14

Slide 14 text

depth first pre-order

Slide 15

Slide 15 text

HEADER HGROUP H2 H1 SECTION FOOTER DIV BODY 1 2 3 4 5 6 7 8

Slide 16

Slide 16 text

var walker = document.createTreeWalker( document.body, NodeFilter.SHOW_ELEMENT, function (n) { return NodeFilter.FILTER_ACCEPT; }); do { doSomething(walker.currentNode); } while (walker.nextNode());

Slide 17

Slide 17 text

function getLegitTextNodes(el, f) { var blacklist = [‘SCRIPT’,‘OPTION’,‘TEXTAREA’], filter = function (node) { var parentName = node.parentElement.nodeName.toUpperCase(); if (blacklist.indexOf(parentName) >= 0) { return NodeFilter.FILTER_REJECT; } if (!node.NodeValue.trim().length) { return NodeFilter.FILTER_SKIP; } return NodeFilter.FILTER_ACCEPT; }, walker = document.createTreeWalker( el, NodeFilter.SHOW_TEXT, filter); while(walker.nextNode()) f(walker.currentNode); } https://gist.github.com/mwunsch/4710561

Slide 18

Slide 18 text

console.log("digraph El {"); do { var parentEl = walker.currentNode.parentElement; if (parentEl) { console.log(“\t\""+ vizLabel(parentEl)+”\"->\""+ vizLabel(walker.currentNode)+ "\";"); } else { console.log(“\t\""+ vizLabel(walker.currentNode)+ "\";"); } } while (walker.nextNode()); console.log("}"); https://gist.github.com/mwunsch/6b538a0352cae834457a

Slide 19

Slide 19 text

$ phantomjs viz.js http://2015.empirejs.org/ | dot -Tpng empire.png https://gist.github.com/mwunsch/6b538a0352cae834457a

Slide 20

Slide 20 text

https://gist.github.com/mwunsch/6b538a0352cae834457a

Slide 21

Slide 21 text

DocumentFragment

Slide 22

Slide 22 text

document.createDocumentFragment()

Slide 23

Slide 23 text

DocumentFragment is a “lightweight” or “minimal” Document object. It is very common to want to be able to extract a portion of a document’s tree or to create a new fragment of a document. Document Object Model (DOM) Level 1 Specification http://www.w3.org/TR/REC-DOM-Level-1/

Slide 24

Slide 24 text

When a DocumentFragment is inserted into a Document…the children of the DocumentFragment and not the DocumentFragment itself are inserted into the Node. Document Object Model (DOM) Level 1 Specification http://www.w3.org/TR/REC-DOM-Level-1/

Slide 25

Slide 25 text

https://gist.github.com/mwunsch/29bca83eaf7649873900

Slide 26

Slide 26 text

var el = document.getElementById("grid-thumb-viv9"), frag = document.createDocumentFragment(), walker = walkerFactory(document.body), fragWalker = walkerFactory(frag), diffs = [], diff; https://gist.github.com/mwunsch/29bca83eaf7649873900 frag.appendChild(el.cloneNode(true)); frag.querySelector(".thumb-price").textContent = "$285 rental"; while (walker.nextNode() && fragWalker.nextNode()) { if (!walker.currentNode.isEqualNode(fragWalker.currentNode)) { diffs.push([walker.currentNode, fragWalker.currentNode]); } }

Slide 27

Slide 27 text

do { diff = diffs.pop(); if (diff[0].isEqualNode(diff[1])) break; if (diff[0].parentNode) { diff[0].parentNode.replaceChild( diff[1].cloneNode(true), diff[0]); } } while (diffs.length) https://gist.github.com/mwunsch/29bca83eaf7649873900

Slide 28

Slide 28 text

do { diff = diffs.pop() if (diff[0].isEqualNode(diff[1])) break if (diff[0].parentNode) { diff[0].parentNode.replaceChild( diff[1].cloneNode(true) diff[0]) } } while (diffs.length) https://gist.github.com/mwunsch/29bca83eaf7649873900 CO NSIDERED HARM FUL

Slide 29

Slide 29 text

FUNCTIONAL PEARL GÉRARD HUET INRIA Rocquencourt, France The Zipper

Slide 30

Slide 30 text

HEADER HGROUP H2 H1 SECTION FOOTER DIV BODY

Slide 31

Slide 31 text

HEADER HGROUP H1 SECTION FOOTER DIV BODY H2

Slide 32

Slide 32 text

HEADER HGROUP H1 SECTION FOOTER DIV BODY H2

Slide 33

Slide 33 text

var el = document.getElementById("grid-thumb-viv9"), loc = new Zipper(el); var designer = location .goDown() .goDown() .goRight() .goDown(); https://gist.github.com/mwunsch/d46a4ebde8567e2e5102 >> Zipper { tree: div.thumb-designer, crumb: Breadcrumb }

Slide 34

Slide 34 text

$

Slide 35

Slide 35 text

Further Reading • DOM Living Standard: https://dom.spec.whatwg.org/ • Range: https://developer.mozilla.org/en-US/docs/Web/API/Range • HTMLBars: https://github.com/tildeio/htmlbars • [WIP] Implement Glimmer Engine: https://github.com/emberjs/ ember.js/pull/10501 • React Reconciliation: https://facebook.github.io/react/docs/ reconciliation.html • Lee Byron, Immutable Data and React: https://youtu.be/I7IdS-PbEgI

Slide 36

Slide 36 text

Dante and Virgil Penetrating the Forest William Blake, 1824–27

Slide 37

Slide 37 text

^D