41:null 42:["$","title",null,{"children":"Manipulating the DOM with JavaScript | Steve Oney | Observable"}] 48:Tc51,md` ## Searching for DOM elements ### \`document.getElementBy*(...)\` There are several ways to search for a given element: - ...by ID: [\`getElementById(...)\`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) - Note that "Element" is singular; this function returns one element - ...by class: [\`getElementsByClassName(...)\`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) - Note that "Elements" is plural; this returns an [\`HTMLCollection\`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection), which is an array-like list of DOM nodes that updates as the DOM changes - ...by tag: [\`getElementsByTagName(...)\`](https://developer.mozilla.org/en-us/docs/Web/API/Document/getElementsByTagName) - Note that "Elements" is plural; this returns an [\`HTMLCollection\`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection), which is an array-like list of DOM nodes that updates as the DOM changes Example: Notice how complicated is was to select the elements by different functions name? We will introduce a new way to select the elements, and it can select classes, tags and ids in one line. ### \`document.querySelector(...)\` - [\`document.querySelector(...)\`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) allows us to write a CSS-style query and finds the **first** element that matches that query. - [\`document.querySelectorAll(...)\`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) allows us to write a CSS-style query and finds a **list** of elements that match that query - \`.querySelectorAll(...)\` returns [a NodeList object](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), which is an array-like object. However, it is subtly different from what \`document.getElementsBy*(...)\` returns, as this list does **not** update as the DOM changes. QuerySelector methods will return the first element that matches the CSS selectors in the HTML document. For example: - Selecting by ID: \`document.querySelector("#idName")\` - Selecting by class: \`document.querySelector(".className")\` - Selecting a tag: \`document.querySelector("p")\` Example: `49:T60b,md` ## Attributes Recall that attributes are the key-value pairs that we can set in HTML tags. For example, \`Michigan\` has an attribute with the name \`href\` and the value \`"umich.edu"\`. ### [\`element.getAttribute(name)\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute) This method is used to grab the current value of the attribute on the element. If the element doesn't have an attribute, it will return \`null\`. ### [\`element.setAttribute(name, value)\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute) This method is used to set an attribute on the element. If the attribute already exists, the value will be updated for the element, otherwise, a new attribute will be added with the name and value. ### [\`element.removeAttribute(name)\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute) This method is used to remove an attribute on the element. More references can be found [here](https://www.tutorialrepublic.com/javascript-tutorial/javascript-dom-get-set-attributes.php). `4a:T472,md` ## Modifying the DOM Tree ### [\`node.remove()\`](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove) The \`.remove()\` method removes the specified element from the DOM. ### [\`document.createElement(tagName)\`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) This method creates new element. ### [\`node.append(...)\`](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append) Adds a node as the last child of a given parent ### [\`node.insertBefore(node, beforeRefNode)\`](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore) Adds a node in a specific position Example: `4b:T418,# Class Lists We often want to manipulate DOM elements by modifying their classes (which then presumably causes some kind of display change). We can do this with `.setAttribute('class', ...)`: ```javascript elem.setAttribute('class', 'highlighted selected'); ``` However, using `setAttribute()` can get tedious. In the above example, if we wanted to **remove** the class `selected` (but keep the `highlighted` class), we would need to write extra code to try to get rid of *only* the `selected` class (`elem.setAttribute('class', '')` would remove all the classes, which we do not want). To do this, modern browsers support [a`classList` property](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) that represents all of the classes of a given element. The `classList` allows us to: - **add** a class: `elem.classList.add('highlighted')` - **remove** a class: `elem.classList.remove('selected')` - **toggle** a class: `elem.classList.toggle('visible')` - **replace** a class: `elem.classList.replace('oldClass', 'newClass')` 4c:[{"id":"02bebe22f43c41388ba32ed8442148bced732a0799f6eedc9c3a98ae1f03c95fc6ac6af2abe33d17dbded86703d7b67aeb2fccaad9ebe0cbf567532fd2a958ef","href":"https://static.observableusercontent.com/files/02bebe22f43c41388ba32ed8442148bced732a0799f6eedc9c3a98ae1f03c95fc6ac6af2abe33d17dbded86703d7b67aeb2fccaad9ebe0cbf567532fd2a958ef","name":"image@1.png","type":"image/png","lastModified":1611152917910.034,"size":108529},{"id":"4db024612d498b08de7420bb33ffca761ee2c53f9f425af0574f86a344e299fcc3dadcebdb9183092880406b35b29b745a7d5d35ca10b7b4ae8fd04bb3dad617","href":"https://static.observableusercontent.com/files/4db024612d498b08de7420bb33ffca761ee2c53f9f425af0574f86a344e299fcc3dadcebdb9183092880406b35b29b745a7d5d35ca10b7b4ae8fd04bb3dad617","name":"image.png","type":"image/png","lastModified":1611152917910.034,"size":58241}] 46:{"id":"94e226c38d31784e","slug":"manipulating-the-dom-with-javascript","title":"Manipulating the DOM with JavaScript","thumbnail":"58fdfae636c815ea013b9c8ffb4c16cd35f7c94d359610be4733876116d0880c","access_level":"public","create_time":"$D2020-12-30T20:09:21.766Z","update_time":"$D2023-10-02T17:43:37.302Z","view_time":null,"first_public_time":"$D2020-12-30T20:09:23.109Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024","bio":"","following":false},"version":73,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[{"id":"2c235c48c85d9da8","reply_to_id":null,"content":"Thanks for this function","create_time":"$D2024-03-10T02:40:54.057Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"fb773c8446c2bddf","login":"frederico-castro-nunes","name":"Frederico Castro Nunes","avatar_url":"https://avatars-next.observableusercontent.com/cf4b76fe238c9f51fa2ddc2dc185de43f58264fbae70dd428a6a3c6f5bab3bd2","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"titling":"auto","title":"Manipulating the DOM with JavaScript","cells":[{"id":0,"value":"md`# Manipulating the DOM with JavaScript`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"toc();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`\n## The \\`document\\` object.\n\nThe [\\`document\\`](https://developer.mozilla.org/en-US/docs/Web/API/Document) object is JavaScript's entry point into [the DOM tree](https://observablehq.com/@soney/si-579-the-dom). All of the functions for finding DOM elements will be found in the \\`document\\` element.\n\nFor example, [\\`document.body\\`](https://developer.mozilla.org/en-US/docs/Web/API/Document/body) gives us access to the \\`\\` element on our page.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`\n## \\`innerText\\` and \\`innerHTML\\`\n\nWe can set the text content of a node by changing its [\\`.textContent\\`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) property or [\\`.innerText\\`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText) property.\n\nWe can change its HTML content by changing its [\\`.innerHTML\\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`\n## About jQuery and why you might not need it\n[jQuery](https://jquery.com/) is a lightweight JavaScript library that found enormous popularity. It was originally released in 2006 and its original purpose was to make it easy to query the DOM to extract out specific elements (and to do things with those elements). Many (most) of its most useful features ended up getting official support in the ECMAScript standard (also, many of the compatibility issues that jQuery addressed have been solved in modern browsers). [You might not need jQuery](http://youmightnotneedjquery.com) lists ways to perform jQuery operations in standard JavaScript.\n\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 47:"$46:body"