Navigating Between DOM Nodes PDF

Navigating Between DOM Nodes DOM node provides several properties and methods that allow you to navigate or traverse through the tree structure of the DOM and make changes very easily. Dr. AISSAOUA HABIB University Setif -1- ...

Navigating Between DOM Nodes DOM node provides several properties and methods that allow you to navigate or traverse through the tree structure of the DOM and make changes very easily. Dr. AISSAOUA HABIB University Setif -1-  Navigating Between DOM Nodes Here’s a picture of links that allow for travel between DOM nodes: Dr. AISSAOUA HABIB University Setif -1-  Navigating Between DOM Nodes firstChild and lastChild give fast access to the first and last children. If the node doesn't have any child element, it returns null. The nodeName of the first-child node of the main DIV element returns #text instead of h1. Because, whitespace such as spaces, tabs, newlines, etc. form #text nodes and become a part of the DOM tree Dr. AISSAOUA HABIB University Setif -1-  Navigating Between DOM Nodes To avoid returning #text or #comment nodes, you could use the firstElementChild and lastElementChild properties to return only the first and last element node, respectively. Dr. AISSAOUA HABIB University Setif -1-  Navigating Between DOM Nodes Similarly, you can use the childNodes property to access all child nodes of a given element, where the first child node is assigned index 0. Dr. AISSAOUA HABIB University Setif -1-  Navigating Between DOM Nodes The childNodes returns all child nodes, including non- element nodes like text and comment nodes. To get a collection of only elements, use children property instead. Dr. AISSAOUA HABIB University Setif -1-  Navigating Between DOM Nodes parentNode property returns the parent of the specified node in the DOM tree. The parentNode will always return null for document node, since it doesn't have a parent Dr. AISSAOUA HABIB University Setif -1-  Navigating Between DOM Nodes The elements with a common parent are called siblings. the previousSibling and the nextSibling properties return the previous and next node in the DOM. We can use the previousElementSibling and nextElementSibling to get the sibling element skipping any text nodes. Dr. AISSAOUA HABIB University Setif -1-  Changing HTML Content The easiest way to modify the content of an HTML element is by using the innerHTML property. It is used to add HTML content into an HTML element as well as to get the HTML content present in an element: element.innerHTML = 'new content'; element.innerHTML; Dr. AISSAOUA HABIB University Setif -1- Changing HTML Content Dr. AISSAOUA HABIB University Setif -1-  Changing HTML Content The textContent provides access to the text inside the element: only text, minus all. For instance: Headline! Martians attack people! // Headline! Martians attack people! console.log(news.textContent); Dr. AISSAOUA HABIB University Setif -1-  Créer et insérer des éléments Avec le DOM, l'ajout d'un élément HTML se fait en trois étapes: 1. On crée l'élément ; 2. On lui affecte des attributs ; 3. On l'insère dans le document, et ce n'est qu'à ce moment-là qu'il sera « ajouté ». La création d'un élément se fait avec la méthode createElement(), un sous-objet de l'objet racine, c'est-à-dire document dans la majorité des cas. let newLink = document.createElement('a'); Cet élément est créé, mais n'est pas inséré dans le document, il n'est donc pas visible. Dr. AISSAOUA HABIB University Setif -1-  Créer et insérer des éléments On définit les attributs, soit avec setAttribute(), soit directement avec les propriétés adéquates. newLink.id= 'MyID'; newLink.setAttribute('href', 'http://www.w3schools.com/ '); On utilise la méthode appendChild() pour insérer l'élément Donc, pour ajouter notre élément dans l'élément portant l'ID myP, il suffit de récupérer cet élément, et d'ajouter notre élément via appendChild(): document.getElementById('myP').appendChild(newLink); Dr. AISSAOUA HABIB University Setif -1-  Créer et insérer des éléments appendChild() insére toujours l'élément en tant que dernier enfant. L'élément a été inséré, seulement il manque quelque chose : le contenu textuel ! La méthode createTextNode() sert à créer un nœud textuel let newLinkText = document.createTextNode("Mon site"); newLink.appendChild(newLinkText); Dr. AISSAOUA HABIB University Setif -1- Naviguer entre les nœuds Dr. AISSAOUA HABIB University Setif -1-