diff --git a/_includes/2017/critical/critical.js b/_includes/2017/critical/critical.js index 9a95fcaa0..bd021414d 100644 --- a/_includes/2017/critical/critical.js +++ b/_includes/2017/critical/critical.js @@ -1 +1 @@ -!function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var t={};n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s=2)}([function(e,n){function t(e,n){var t=e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector;if(t)return t.call(e,n);if(e.parentNode){for(var r=e.parentNode.querySelectorAll(n),o=r.length;o--;0)if(r[o]===e)return!0;return!1}}e.exports=t},function(e,n,t){function r(e,n){if(n){if(Array.isArray(n))return void o(n,function(n){r(e,n)});if(e.classList){var t=n.split(" ").filter(Boolean);o(t,function(n){e.classList.add(n)})}else e.className+=" "+n}}var o=t(4);e.exports=r},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(){d||((0,c.default)(document.documentElement,"LoadDone"),d=!0)}var i=t(3),u=r(i),a=t(1),c=r(a),f=t(6),l=r(f),s=document.querySelector("[data-js-main-body]");s&&((0,u.default)(s),(0,c.default)(s,"-wrapified")),(0,l.default)(window,"load",o),setTimeout(o,5e3);var d=void 0},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){if(Array.isArray(e)){for(var n=0,t=Array(e.length);n .h3-section { + display: flex; + } + + & > .h3-section + .h3-section { + margin-top: 0; + } + + & > .h3-section > .body { + display: flex; + flex: 0 0 66.67%; + flex-wrap: wrap; + } + + & > .h3-section > .body > pre { + flex: 0 0 50%; + background: white; + } + + & > .h3-section > .body > pre + pre { + background: #faf7ff; + } + + & > .h3-section > .body > pre ~ p { + flex: 0 0 100%; + } + + & > .h3-section > h3 { + @include font-size(0); + flex: 0 0 16.667%; + padding-right: 16px; + text-align: right; + } + + & > .h3-section > h3::after { + display: none; + } +} + +h2.-versus { + text-align: center; +} diff --git a/dom.md b/dom.md index 74d8db4ae..724909bd3 100644 --- a/dom.md +++ b/dom.md @@ -34,6 +34,8 @@ Array.from(elements).forEach(el => { }) ``` +The result of some DOM operations return NodeLists (eg, `querySelectorAll`, `children`, and others). These can't be iterated via `.forEach()` until you convert them to arrays using `Array.from()`. + ## Classes {: .-versus} @@ -90,7 +92,7 @@ $(el).addClass('expanded') el.classList.replace('collapsed', 'expanded') ``` -## Events +## DOM ready {: .-versus} ### Document ready @@ -115,6 +117,8 @@ ready(() => { }) ``` +The [dom-loaded](https://www.npmjs.com/package/dom-loaded) npm package takes care of this for you. + ## Attributes {: .-versus} @@ -214,6 +218,18 @@ $(el).parent() el.parentNode ``` +### Siblings + +```js +$(el).next() +$(el).previous() +``` + +```js +el.nextSibling +el.previousSibling +``` + ### Closest match ```js @@ -311,6 +327,10 @@ $(refEl).after(newEl) refEl.parentNode.insertBefore(newEl, refEl.nextSibling) ``` +If `refEl` is at the end, `refEl.nextSibling` will be null. The behavior of `insertBefore(el, null)` is the same as `appendChild(el)`. + +See: [Node.insertBefore](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore) _(developer.mozilla.org)_ + ### Before/after (HTML) ```js @@ -323,28 +343,6 @@ el.insertAdjacentHTML('beforebegin', '') el.insertAdjacentHTML('afterend', '') ``` -### Set text - -```js -$(el).text('hello') -``` - -```js -el.textContent = 'hello' -``` - -### Get text - -```js -$(el).text() -``` - -```js -el.textContent -``` - - - ## Events {: .-versus} @@ -358,10 +356,11 @@ $(el).on('click', (event) => { ```js el.addEventListener('click', (event) => { + ··· }) ``` - +See: [EventTarget.addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) _(developer.mozilla.org)_ ### Trigger @@ -375,23 +374,79 @@ ev.initEvent('click', true, true) el.dispatchEvent(ev) ``` - +See: [document.createEvent](https://developer.mozilla.org/en-US/docs/Web/API/Document/createEvent) _(developer.mozilla.org)_ +## HTML +{: .-versus} - +### Getting HTML + +```js +$(el).html() +// → "
hello
" +``` + +```js +el.innerHTML +// → "
hello
" +``` + +### Setting HTML + +```js +$(el).html('ok') +``` + +```js +el.innerHTML = 'ok' +``` + +See: [Element.innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) _(developer.mozilla.org)_ + +### Getting text + +```js +$(el).text() +``` + +```js +el.textContent +``` + + + +### Setting text + +```js +$(el).text('hello') +``` + +```js +el.textContent = 'hello' +``` + +## Creating elements +{: .-versus} + +### Create element + +```js +div = $('
') +div = $.parseHTML('
') +``` + +```js +div = document.createElement('div') +``` + +### With class name + +```js +div = $('
') +div = $.parseHTML('
') +``` + +```js +div = document.createElement('div') +div.className = 'hello' +```