Update dom cheatsheet
This commit is contained in:
Rico Sta. Cruz
parent
95314a8512
commit
37e83b13c7
|
|
@ -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<e.length;n++)t[n]=e[n];return t}return Array.from(e)}function i(e){u(e).forEach(function(e){(0,p.findChildren)(e,"[data-js-h3-section-list]").forEach(function(e){a(e)})})}function u(e){return c(e,{tag:"h2",wrapperFn:function(){return(0,p.createDiv)({class:"h2-section"})},bodyFn:function(){return(0,p.createDiv)({class:"body h3-section-list","data-js-h3-section-list":""})}})}function a(e){return c(e,{tag:"h3",wrapperFn:function(){return(0,p.createDiv)({class:"h3-section"})},bodyFn:function(){return(0,p.createDiv)({class:"body"})}})}function c(e,n){function t(e,n,t){var r=i(),o=e.className;o&&(0,d.default)(r,o),(0,p.before)(e,r);var a=u();return o&&(0,d.default)(a,o),(0,p.appendMany)(a,t),n&&r.appendChild(n),r.appendChild(a),r}var r=n.tag,i=n.wrapperFn,u=n.bodyFn,a=e.children[0],c=[];if(a&&!(0,l.default)(a,r)){var f=(0,p.nextUntil)(a,r);c.push(t(a,null,[a].concat(o(f))))}return(0,p.findChildren)(e,r).forEach(function(e){var n=(0,p.nextUntil)(e,r);c.push(t(e,e,n))}),c}Object.defineProperty(n,"__esModule",{value:!0}),n.default=i,n.groupify=c;var f=t(0),l=r(f),s=t(1),d=r(s),p=t(5)},function(e,n){function t(e,n){var t,r,o=e.length;if("number"==typeof o)for(t=0;t<o;t++)n(e[t],t);else{r=0;for(t in e)e.hasOwnProperty(t)&&n(e[t],t,r++)}return e}e.exports=t},function(e,n,t){"use strict";function r(e){if(Array.isArray(e)){for(var n=0,t=Array(e.length);n<e.length;n++)t[n]=e[n];return t}return Array.from(e)}function o(e,n){n.forEach(function(n){e.appendChild(n)})}function i(e,n){return u(e.nextSibling,n,[])}function u(e,n,t){return e?(0,s.default)(e,n)?t:u(e.nextSibling,n,[].concat(r(t),[e])):t}function a(e,n){e.parentNode.insertBefore(n,e)}function c(e,n){return[].slice.call(e.children).filter(function(e){return(0,s.default)(e,n)})}function f(e){var n=document.createElement("div");return Object.keys(e).forEach(function(t){n.setAttribute(t,e[t])}),n}Object.defineProperty(n,"__esModule",{value:!0}),n.appendMany=o,n.nextUntil=i,n.before=a,n.findChildren=c,n.createDiv=f;var l=t(0),s=function(e){return e&&e.__esModule?e:{default:e}}(l)},function(e,n){function t(e,n,t){e.addEventListener?e.addEventListener(n,t):e.attachEvent("on"+n,function(){t.call(e)})}e.exports=t}]);
|
||||
!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),a=r(i),u=t(1),c=r(u),f=t(6),l=r(f),s=document.querySelector("[data-js-main-body]");s&&((0,a.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<e.length;n++)t[n]=e[n];return t}return Array.from(e)}function i(e){a(e).forEach(function(e){(0,h.findChildren)(e,"[data-js-h3-section-list]").forEach(function(e){c(e)})})}function a(e){return f(e,{tag:"h2",wrapperFn:function(){return(0,h.createDiv)({class:"h2-section"})},bodyFn:function(e){return u(e)?(0,h.createDiv)({class:"body"}):(0,h.createDiv)({class:"body h3-section-list","data-js-h3-section-list":""})}})}function u(e){return e.classList.contains("-no-wrapify")}function c(e){return f(e,{tag:"h3",wrapperFn:function(){return(0,h.createDiv)({class:"h3-section"})},bodyFn:function(){return(0,h.createDiv)({class:"body"})}})}function f(e,n){function t(e,n,t){var r=i(),o=e.className;o&&(0,p.default)(r,o),(0,h.before)(e,r);var u=a(e);return o&&(0,p.default)(u,o),(0,h.appendMany)(u,t),n&&r.appendChild(n),r.appendChild(u),r}var r=n.tag,i=n.wrapperFn,a=n.bodyFn,u=e.children[0],c=[];if(u&&!(0,s.default)(u,r)){var f=(0,h.nextUntil)(u,r);c.push(t(u,null,[u].concat(o(f))))}return(0,h.findChildren)(e,r).forEach(function(e){var n=(0,h.nextUntil)(e,r);c.push(t(e,e,n))}),c}Object.defineProperty(n,"__esModule",{value:!0}),n.default=i,n.groupify=f;var l=t(0),s=r(l),d=t(1),p=r(d),h=t(5)},function(e,n){function t(e,n){var t,r,o=e.length;if("number"==typeof o)for(t=0;t<o;t++)n(e[t],t);else{r=0;for(t in e)e.hasOwnProperty(t)&&n(e[t],t,r++)}return e}e.exports=t},function(e,n,t){"use strict";function r(e){if(Array.isArray(e)){for(var n=0,t=Array(e.length);n<e.length;n++)t[n]=e[n];return t}return Array.from(e)}function o(e,n){n.forEach(function(n){e.appendChild(n)})}function i(e,n){return a(e.nextSibling,n,[])}function a(e,n,t){return e?(0,s.default)(e,n)?t:a(e.nextSibling,n,[].concat(r(t),[e])):t}function u(e,n){e.parentNode.insertBefore(n,e)}function c(e,n){return[].slice.call(e.children).filter(function(e){return(0,s.default)(e,n)})}function f(e){var n=document.createElement("div");return Object.keys(e).forEach(function(t){n.setAttribute(t,e[t])}),n}Object.defineProperty(n,"__esModule",{value:!0}),n.appendMany=o,n.nextUntil=i,n.before=u,n.findChildren=c,n.createDiv=f;var l=t(0),s=function(e){return e&&e.__esModule?e:{default:e}}(l)},function(e,n){function t(e,n,t){e.addEventListener?e.addEventListener(n,t):e.attachEvent("on"+n,function(){t.call(e)})}e.exports=t}]);
|
||||
|
|
@ -100,3 +100,47 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.h3-section-list.-versus {
|
||||
& > .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;
|
||||
}
|
||||
|
|
|
|||
139
dom.md
139
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', '<span></span>')
|
|||
el.insertAdjacentHTML('afterend', '<span></span>')
|
||||
```
|
||||
|
||||
### Set text
|
||||
|
||||
```js
|
||||
$(el).text('hello')
|
||||
```
|
||||
|
||||
```js
|
||||
el.textContent = 'hello'
|
||||
```
|
||||
|
||||
### Get text
|
||||
|
||||
```js
|
||||
$(el).text()
|
||||
```
|
||||
|
||||
```js
|
||||
el.textContent
|
||||
```
|
||||
|
||||
<!-- needs polyfill for IE8 below -->
|
||||
|
||||
## Events
|
||||
{: .-versus}
|
||||
|
||||
|
|
@ -358,10 +356,11 @@ $(el).on('click', (event) => {
|
|||
|
||||
```js
|
||||
el.addEventListener('click', (event) => {
|
||||
···
|
||||
})
|
||||
```
|
||||
|
||||
<!-- needs polyfill for IE8 below -->
|
||||
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) -->
|
||||
See: [document.createEvent](https://developer.mozilla.org/en-US/docs/Web/API/Document/createEvent) _(developer.mozilla.org)_
|
||||
|
||||
## HTML
|
||||
{: .-versus}
|
||||
|
||||
<style>
|
||||
.-versus .body {
|
||||
display: flex;
|
||||
}
|
||||
.-versus .body > pre {
|
||||
flex: 0 0 50%;
|
||||
}
|
||||
.-versus .body > pre + pre {
|
||||
background: #faf7ff;
|
||||
}
|
||||
.-versus .body > pre ~ p {
|
||||
display: none;
|
||||
}
|
||||
.-versus h3 {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
### Getting HTML
|
||||
|
||||
```js
|
||||
$(el).html()
|
||||
// → "<div>hello</div>"
|
||||
```
|
||||
|
||||
```js
|
||||
el.innerHTML
|
||||
// → "<div>hello</div>"
|
||||
```
|
||||
|
||||
### Setting HTML
|
||||
|
||||
```js
|
||||
$(el).html('<span>ok</span>')
|
||||
```
|
||||
|
||||
```js
|
||||
el.innerHTML = '<span>ok</span>'
|
||||
```
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
<!-- needs polyfill for IE8 below -->
|
||||
|
||||
### Setting text
|
||||
|
||||
```js
|
||||
$(el).text('hello')
|
||||
```
|
||||
|
||||
```js
|
||||
el.textContent = 'hello'
|
||||
```
|
||||
|
||||
## Creating elements
|
||||
{: .-versus}
|
||||
|
||||
### Create element
|
||||
|
||||
```js
|
||||
div = $('<div>')
|
||||
div = $.parseHTML('<div>')
|
||||
```
|
||||
|
||||
```js
|
||||
div = document.createElement('div')
|
||||
```
|
||||
|
||||
### With class name
|
||||
|
||||
```js
|
||||
div = $('<div class="hello">')
|
||||
div = $.parseHTML('<div class="hello">')
|
||||
```
|
||||
|
||||
```js
|
||||
div = document.createElement('div')
|
||||
div.className = 'hello'
|
||||
```
|
||||
|
|
|
|||
Loading…
Reference in New Issue