DokuWiki jsedom

jsedom:changing_html_attributes

Anonymous (anonymous@undisclosed.example.com) — 2016-03-09T11:47:11+00:00

<- Targeting node elementsWorking with restricted attributes -> dot notation * Fourni un accès facile aux propriétés de l'objet node * accès lecture/écriture * possibilité d'ajouter des attributs qui n'existent pas encore * faire attention aux mots réservés (ex: class devient className car class est réservé en js, idem pour for

jsedom:choosing_elements_by_html_tag

Anonymous (anonymous@undisclosed.example.com) — 2016-03-07T23:14:40+00:00

<- Selecting elements with getElementByIdIsolating elements by class name -> getElementsByTagName * retourne un Array * peut être combiné avec getElementsById()

jsedom:cloning_and_removing_nodes

Anonymous (anonymous@undisclosed.example.com) — 2016-03-14T23:11:37+00:00

<- Controlling node insertions with insertBeforeReplacing existing nodes -> * cloneNode() : copie d'un node * .removeChild() : supprime un node

jsedom:communicating_with_the_console_through_javascript

Anonymous (anonymous@undisclosed.example.com) — 2016-03-06T23:45:33+00:00

<- Testing JavaScript commands with the consoleSelecting elements with getElementById -> * console.log() * console.dir() format “directory” - console.info() - console.warn() - console.error() === groupes de messages === - console.group(“titre du groupe”) - console.log() - console.groupeEnd(); - console.groupCollapsed(

jsedom:controlling_classes_with_the_html5_classlist

Anonymous (anonymous@undisclosed.example.com) — 2016-03-14T11:20:33+00:00

<- Detecting data attributesTargeting the attributes property -> L'attribut Class pouvant comporter plusieurs classes, la dot notation n'est pas pratique. -> ClassList (mais >= IE10) * ClassList.add() * ClassList.remove() * ClassList.toggle() * ClassList.length() *

jsedom:controlling_node_insertions_with_insertbefore

Anonymous (anonymous@undisclosed.example.com) — 2016-03-14T23:05:26+00:00

<- Creating and appending nodesCloning and removing nodes -> En plus d'appendChild() : insertBefore()

jsedom:creating_and_appending_nodes

Anonymous (anonymous@undisclosed.example.com) — 2016-03-14T22:57:47+00:00

<- Modifying elements as textControlling node insertions with insertBefore -> document.createElement(“”) : créer un nouvel élément en mémoire, prêt à être ajouté au DOM document.appendChild(element) : ajouter l'élément dans un node

jsedom:detecting_data_attributes

Anonymous (anonymous@undisclosed.example.com) — 2016-03-14T11:13:46+00:00

<- Working with restricted attributesControlling classes with the HTML5 classList -> "data-" attribute prefix Définir un attribut : data- Y accéder : node.dataset. Le modifier : node.dataset. = “quelque chose” Support : caniuse.com/dataset setAttribute + getAttribute sont plus sûrs car plus supportés.

jsedom:isolating_elements_by_class_name

Anonymous (anonymous@undisclosed.example.com) — 2016-03-07T23:20:23+00:00

<- Choosing elements by HTML tagQuerying CSS to select elements -> getElementsByClassName() * un des sélecteurs les plus récents * pas forcément compatible avec les anciens navigateurs. * voir caniuse.com/getelementsbyclassname * voir aussi quircksmode.org.dom/w3c_core.html * polyfills, voir ejohn.org/blog/getelementsbyclassname-speed-comparison

jsedom:modifying_elements_as_text

Anonymous (anonymous@undisclosed.example.com) — 2016-03-14T22:50:38+00:00

<- Using text content modifiersCreating and appending nodes -> * node.innerText : juste le texte d'un node : partout sauf FF * node.textContent : presque pareil, standard, partout sauf IE Conseillé : “stay away from these”.

jsedom:navigating_the_dom_with_developer_tools

Anonymous (anonymous@undisclosed.example.com) — 2016-03-06T22:58:52+00:00

<- What is the Document Object Model (DOM)Testing JavaScript commands with the console -> “Montrer la source” montre uniquement la source originale, et non la version actuelle.

jsedom:querying_css_to_select_elements

Anonymous (anonymous@undisclosed.example.com) — 2016-03-07T23:32:03+00:00

<- Isolating elements by class nameWorking with named form elements -> querySelector() & querySelectorAll() * permettent la sélection grâce à des sélecteurs CSS * compatibilité réduite avec les vieux navigateurs mais pas si mauvaise (>=IE8 !) querySelector() * retourne le premier élément qui matche

jsedom:replacing_existing_nodes

Anonymous (anonymous@undisclosed.example.com) — 2016-03-14T23:16:29+00:00

<- Cloning and removing nodesWhat we'll build -> * .replaceChild(,

jsedom:selecting_elements_with_getelementbyid

Anonymous (anonymous@undisclosed.example.com) — 2016-03-07T23:06:28+00:00

<- Communicating with the console through JavaScriptChoosing elements by HTML tag -> Méthode de sélection la plus commune : getElementById() Astuce : utilise console.dir pour explorer le Node, ses méthodes et propriétés.

jsedom:targeting_node_elements

Anonymous (anonymous@undisclosed.example.com) — 2016-03-08T23:49:24+00:00

<- Traversing up and down DOM nodesChanging HTML attributes -> (problème des éléments textes style retour chariot qui apparaissent dans la liste des nodes vu qu'ils en sont). * node.firstElementChild / node.lastelementChild : renvoie le premier/dernier enfant uniquement si c'est un élément. * node.children : renvoie uniquement les children qui sont des éléments

jsedom:targeting_the_attributes_property

Anonymous (anonymous@undisclosed.example.com) — 2016-03-14T22:35:10+00:00

<- Controlling classes with the HTML5 classListUsing text content modifiers -> node.attributes retourne une liste de node accessibles de différentes manières : * par index numérique : node.attributes[n] * par index nominatif : node.attributes[“nom”] * avec la dot notation : node.attributes.nom Attention : read-only !

jsedom:testing_javascript_commands_with_the_console

Anonymous (anonymous@undisclosed.example.com) — 2016-03-06T23:32:45+00:00

<- Navigating the DOM with developer toolsCommunicating with the console through JavaScript -> * Entrer “document” dans la commande sélectionne le node document (le DOM). * Entrer 'document.“ lance la suggestion de méthodes, propriétés , nodes enfants disponibles. * inspect() * monitorEvents(,) ie “

jsedom:traversing_up_and_down_dom_nodes

Anonymous (anonymous@undisclosed.example.com) — 2016-03-08T23:42:49+00:00

<- Understanding nodeType, nodeName, and nodeValueTargeting node elements -> * node.parentNode : référence à l'élément parent * node.childNodes : Array des éléments enfants * node.firstChild / node.lastChild * node.previousSibbling / node.nextSibbling : références aux éléments frères suivants et précédents

jsedom:understanding_nodetype_nodename_and_nodevalue

Anonymous (anonymous@undisclosed.example.com) — 2016-03-08T23:34:02+00:00

<- Working with named form elementsTraversing up and down DOM nodes -> * node.nodeType : renvoie la valeur numérique d'un node (ex: “1”) * node.nodeName : renvoie le nom du node (ex: “A”) * node.attributes : array des attributs du node * node.nodeValue : élément dans le node Voir pour la ref des nodeType

jsedom:using_text_content_modifiers

Anonymous (anonymous@undisclosed.example.com) — 2016-03-14T22:41:31+00:00

<- Targeting the attributes propertyModifying elements as text -> Using text content modifiers * node.innerHTML : modifier le contenu entre les balises (le plus supporté) * node.outerHTML : modifier le contenu ET les balises * node.insertAdjacentHTML(InsertPoint, htmlText) * InsertPoint : 'beforebegin', 'afterbegin', 'afterend', 'beforeend'

jsedom:what_is_the_document_object_model_dom

Anonymous (anonymous@undisclosed.example.com) — 2016-03-06T22:58:12+00:00

<- Using the exercise filesNavigating the DOM with developer tools -> * Document Object Model * Décris les relatons au sein du HTML (siblings, parents, children) * Le navigateur interprête et organise le HTML comme DOM

jsedom:working_with_named_form_elements

Anonymous (anonymous@undisclosed.example.com) — 2016-03-08T10:27:56+00:00

<- Querying CSS to select elementsUnderstanding nodeType, nodeName, and nodeValue -> avec l'attribut name

jsedom:working_with_restricted_attributes

Anonymous (anonymous@undisclosed.example.com) — 2016-03-09T11:59:26+00:00

<- Changing HTML attributesDetecting data attributes -> La dot notation n'est pas toujours facile en raison des mots réservés par js (ex class for etc.) Autres solutions : * node.getAttribute() * node.setAttribute(,) * node.hasAttribute() * node.removeAttribute()