Herramientas de usuario
wiki2:js_dom
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
wiki2:js_dom [2019/02/18 09:37] alfred [Selectores] |
wiki2:js_dom [2020/05/09 09:25] (actual) |
||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| ====== Lets avoid jQuery ====== | ====== Lets avoid jQuery ====== | ||
| + | * https://htmldom.dev/ | ||
| * http://youmightnotneedjquery.com/ | * http://youmightnotneedjquery.com/ | ||
| + | * https://github.com/nefe/You-Dont-Need-jQuery | {{:wiki2:js:you-dont-need-jquery-master.zip|}} | ||
| + | * https://news.ycombinator.com/item?id=19534060 | ||
| + | ===== Vanilla ===== | ||
| + | |||
| + | Foreach: | ||
| + | <code> | ||
| + | the_array.forEach(function(element) { | ||
| + | console.log(element); | ||
| + | }); | ||
| + | </code> | ||
| + | |||
| + | ===== Typical jQuery ===== | ||
| + | OnDocumentLoad: | ||
| + | <code> | ||
| + | (function() { | ||
| + | // your page initialization code here | ||
| + | // the DOM will be available here | ||
| + | })(); | ||
| + | </code> | ||
| + | If supported, it tries the standard: | ||
| + | <code>document.addEventListener('DOMContentLoaded', fn, false);</code> | ||
| + | with a fallback to: | ||
| + | <code> | ||
| + | window.addEventListener('load', fn, false ) | ||
| + | </code> | ||
| + | or for older versions of IE, it uses: | ||
| + | <code> | ||
| + | document.attachEvent("onreadystatechange", fn); | ||
| + | </code> | ||
| + | with a fallback to: | ||
| + | <code> | ||
| + | window.attachEvent("onload", fn); | ||
| + | </code> | ||
| ===== Selectores ===== | ===== Selectores ===== | ||
| Línea 14: | Línea 48: | ||
| document.getElementById(resultId) | document.getElementById(resultId) | ||
| + | document.getElementsByTagName('span')[0]; | ||
| + | |||
| + | var i = btn.getElementsByTagName('i'); | ||
| ===== Elementos en el DOM ===== | ===== Elementos en el DOM ===== | ||
| Línea 19: | Línea 56: | ||
| Acceder al padre: ''e.parentNode'' | Acceder al padre: ''e.parentNode'' | ||
| + | |||
| + | |||
| + | ===== Clases y CSS ===== | ||
| + | document.getElementById("MyElement").classList.add('MyClass'); | ||
| + | |||
| + | document.getElementById("MyElement").classList.remove('MyClass'); | ||
| + | |||
| + | if ( document.getElementById("MyElement").classList.contains('MyClass') ) document.getElementById("MyElement").classList.toggle('MyClass'); | ||
| + | |||
| + | To replace all existing classes with one or more new classes, set the className attribute: ''document.getElementById("MyElement").className = "MyClass";'' | ||
| + | |||
| + | To add an additional class to an element: ''document.getElementById("MyElement").className += " MyClass";'' | ||
| + | |||
| + | |||
| + | ===== Eventos ===== | ||
| + | Add event: '' document.getElementById('the_id').setAttribute('onchange', 'javascript:loadElements(this, event);');'' | ||
| + | |||
| + | ==== Bloquear ==== | ||
| + | <code javascript> | ||
| + | function filterKeys(ctrl, event) { | ||
| + | if (event.key === ',') event.preventDefault(); | ||
| + | } | ||
| + | <input type="text" value="tralara" width="100px" onkeydown="filterKeys(this, event)" /> | ||
| + | </code> | ||
| + | |||
| + | Also: ''event.stopPropagation()'' | ||
| ===== Propiedades ===== | ===== Propiedades ===== | ||
| Línea 38: | Línea 101: | ||
| event.stopPropagation(); | event.stopPropagation(); | ||
| } | } | ||
| + | </code> | ||
| + | |||
| + | ===== Requests ===== | ||
| + | <code> | ||
| + | var request = new XMLHttpRequest(); | ||
| + | request.open('GET', url, true); | ||
| + | request.onload = function() { | ||
| + | if (request.status >= 200 && request.status < 400) { | ||
| + | var resp = request.responseText; | ||
| + | modalDiv.innerHTML = resp; | ||
| + | $(modalDivId).modal('show'); | ||
| + | } else { | ||
| + | } | ||
| + | }; | ||
| + | request.send(); | ||
| </code> | </code> | ||
wiki2/js_dom.1550482653.txt.gz · Última modificación: 2020/05/09 09:24 (editor externo)
Herramientas de la página
Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: CC Attribution-Noncommercial-Share Alike 4.0 International
