Add -no-wrapify

_js/wrapify/__tests__/__snapshots__/index.test.js.snap

@@ -204,6 +204,50 @@ exports[`multiple h2s 1`] = `
 </div>
 `;
 
+exports[`no-wrapify mode 1`] = `
+<div>
+  
+    
+  <div
+    class="h2-section -versus -no-wrapify"
+  >
+    <h2
+      class="-versus -no-wrapify"
+    >
+      versus
+    </h2>
+    <div
+      class="body -versus -no-wrapify"
+    >
+      
+
+    
+      <h3>
+        install
+      </h3>
+      
+    
+      <p>
+        (install)
+      </p>
+      
+
+    
+      <h3>
+        usage
+      </h3>
+      
+    
+      <p>
+        (usage)
+      </p>
+      
+  
+    </div>
+  </div>
+</div>
+`;
+
 exports[`simple usage 1`] = `
 <div>
   
@@ -260,47 +304,3 @@ exports[`simple usage 1`] = `
   </div>
 </div>
 `;
-
-exports[`versus mode 1`] = `
-<div>
-  
-    
-  <div
-    class="h2-section -versus"
-  >
-    <h2
-      class="-versus"
-    >
-      versus
-    </h2>
-    <div
-      class="body -versus"
-    >
-      
-
-    
-      <h3>
-        install
-      </h3>
-      
-    
-      <p>
-        (install)
-      </p>
-      
-
-    
-      <h3>
-        usage
-      </h3>
-      
-    
-      <p>
-        (usage)
-      </p>
-      
-  
-    </div>
-  </div>
-</div>
-`;

_js/wrapify/__tests__/index.test.js

@@ -51,9 +51,9 @@ it('h2 + pre', run(`
   </div>
 `))
 
-it('versus mode', run(`
+it('no-wrapify mode', run(`
   <div>
-    <h2 class='-versus'>versus</h2>
+    <h2 class='-versus -no-wrapify'>versus</h2>
 
     <h3>install</h3>
     <p>(install)</p>
@@ -62,7 +62,7 @@ it('versus mode', run(`
     <p>(usage)</p>
   </div>
 `, $div => {
-  expect($div.find('h2 + div.body.-versus').length).toEqual(1)
+  expect($div.find('h2 + div.body.-versus.-no-wrapify').length).toEqual(1)
 }))
 
 /*

_js/wrapify/index.js

@@ -57,7 +57,7 @@ function wrapifyH2 (root) {
  */
 
 function isExcempted (h2) {
-  return h2.classList.contains('-versus')
+  return h2.classList.contains('-no-wrapify')
 }
 
 /**

_sass/2017/components/h3-section-list.scss

@@ -50,6 +50,7 @@
  * One column
  */
 
+.h3-section-list.-versus,
 .h3-section-list.-one-column {
   & > .h3-section {
     width: 100%;

dom.md

@@ -1,11 +1,11 @@
 ---
-title: DOM without jQuery
+title: DOM vs. jQuery
 category: JavaScript libraries
 layout: 2017/sheet
 ---
 
 ## Selectors
-{: .-one-column}
+{: .-versus.-no-hide}
 
 ### Selectors
 
@@ -35,7 +35,7 @@ Array.from(elements).forEach(el => {
 ```
 
 ## Classes
-{: .-one-column}
+{: .-versus}
 
 ### Add class
 
@@ -91,7 +91,7 @@ el.classList.replace('collapsed', 'expanded')
 ```
 
 ## Events
-{: .-one-column}
+{: .-versus}
 
 ### Document ready
 
@@ -116,7 +116,7 @@ ready(() => {
 ```
 
 ## Attributes
-{: .-one-column}
+{: .-versus}
 
 ### Get attribute
 
@@ -149,7 +149,7 @@ el.removeAttribute('hidden')
 ```
 
 ## Properties
-{: .-one-column}
+{: .-versus}
 
 ### Get checked
 
@@ -192,7 +192,7 @@ el.disabled = true
 ```
 
 ## Traversing
-{: .-one-column}
+{: .-versus}
 
 ### Children
 
@@ -214,6 +214,26 @@ $(el).parent()
 el.parentNode
 ```
 
+### Closest match
+
+```js
+$(el).closest('div')
+```
+
+```js
+el.closest('div')
+```
+
+### Match check
+
+```js
+$(el).is(':checked')
+```
+
+```js
+el.matches(':checked')
+```
+
 ### Finding
 
 ```js
@@ -226,7 +246,7 @@ el.querySelectorAll('button')
 ```
 
 ## Inputs
-{: .-one-column}
+{: .-versus}
 
 ### Blur
 
@@ -249,7 +269,7 @@ el.focus()
 ```
 
 ## DOM operations
-{: .-one-column}
+{: .-versus}
 
 ### Remove
 
@@ -261,6 +281,16 @@ $(el).remove()
 el.parentNode.removeChild(el)
 ```
 
+### Append
+
+```js
+$(el).append(newEl)
+```
+
+```js
+el.appendChild(newEl)
+```
+
 ### Before
 
 ```js
@@ -316,7 +346,7 @@ el.textContent
 <!-- needs polyfill for IE8 below -->
 
 ## Events
-{: .-one-column}
+{: .-versus}
 
 ### Attach event
 
@@ -349,19 +379,19 @@ el.dispatchEvent(ev)
 
 
 <style>
-.h3-section .body {
+.-versus .body {
 display: flex;
 }
-.h3-section .body > pre {
+.-versus .body > pre {
 flex: 0 0 50%;
 }
-.h3-section .body > pre + pre {
+.-versus .body > pre + pre {
 background: #faf7ff;
 }
-.h3-section .body > pre ~ p {
+.-versus .body > pre ~ p {
 display: none;
 }
-.h3-section h3 {
+.-versus h3 {
 display: none;
 }
 </style>