{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/javascript-dom-manipulation/", "result": {"data":{"markdownRemark":{"html":"
\n\n
\n

Node types

\n

\n \n \n \n \n

\n

getElementById()

\n
<ul id="list">\n  <li>About</li>\n  <li>Blog</li>\n</ul>
\n
const list = document.getElementById("list")
\n\n

textContent

\n
<ul id="list">\n  <li>About</li>\n  <li>Blog</li>\n</ul>
\n
const list = document.getElementById("list")\n\nconsole.log(list.textContent)
\n
list.textContent = "We are the list items."
\n\n

innerHTML

\n\n
list.innerHTML = "<h2>We are the list items.</h2>"
\n

querySelector

\n\n

querySelector(‘tagname’)

\n
<ul id="list">\n  <li>About</li>\n  <li>Blog</li>\n</ul>
\n
const list = document.querySelector('ul');
\n

querySelector('#id')

\n
const list = document.querySelector("#list")
\n

querySelector( ‘.class’);

\n
<ul class="list">\n  <li>About</li>\n  <li>Blog</li>\n</ul>
\n
const list = document.querySelector(".list")
\n

We can use querySelector not only with document but also with other elements.

\n

querySelectorAll()

\n
<ul class="list">\n  <li class="list-item">About</li>\n  <li class="list-item">Blog</li>\n</ul>
\n
const list = document.querySelectorAll(".list-item")
\n\n

We can select multiple elements with multiple selectors separated by commas.

\n
const list = document.querySelectorAll("ul, li")
\n

getElementsByClassName(‘class’)

\n
<ul class="list">\n  <li class="list-item">About</li>\n  <li class="list-item">Blog</li>\n</ul>
\n
const list = document.getElementsByClassName("list-item")
\n\n

getElementsByTagName(“tag”)

\n
<ul class="list">\n  <li class="list-item">About</li>\n  <li class="list-item">Blog</li>\n</ul>
\n
const list = document.getElementsByTagName("li")
\n\n

className

\n
<ul class="list">\n  <li class="list-item">About</li>\n  <li class="list-item">Blog</li>\n</ul>
\n
const name = document.querySelector("ul").className\nconsole.log(typeof name) // string
\n\n

classList

\n
<ul class="list">\n  <li class="list-item">About</li>\n  <li class="list-item">Blog</li>\n</ul>
\n
const name = document.querySelector("ul").classList
\n\n

setAttribute(‘attr’, “value”)

\n
<ul class="list">\n  <li class="list-item">About</li>\n  <li class="list-item">Blog</li>\n</ul>
\n
const name = document.querySelector("ul")\nname.setAttribute("id", "main-list")
\n\n
const name = document.querySelector("ul")\nname.setAttribute("class", "main-list")\n\nconsole.log(name.className) // main-list
\n

getAttribute()

\n
<ul class="list">\n  <li class="list-item">About</li>\n  <li class="list-item">Blog</li>\n</ul>
\n
const name = document.querySelector("ul")\nname.setAttribute("id", "main-list")\n\nconsole.log(name.getAttribute("id")) // main-list
\n\n

removeAttribute()

\n
<ul class="list">\n  <li class="list-item">About</li>\n  <li class="list-item">Blog</li>\n</ul>
\n
const name = document.querySelector("ul")\nname.setAttribute("id", "main-list")\n\nconsole.log(name.hasAttribute("id")) // true
\n\n

childNodes/children

\n

childNodes returns a collection of a node's child nodes as a NodeList object. It considers whitespace inside elements and comments as nodes.

\n
<ul class="list">\n  <li class="list-item">About</li>\n  <li class="list-item">Blog</li>\n</ul>
\n
const nodes = document.querySelector("ul").childNodes\n\nconsole.log(nodes)
\n\n
const nodes = document.querySelector("ul").children\n\nconsole.log(nodes)
\n

firstChild/firstElementChild

\n

firstChild returns the first child node of the specified node as a node object. It recognises white spaces as text nodes.

\n
<ul class="list">\n  <li class="list-item">About</li>\n  <li class="list-item">Blog</li>\n</ul>
\n
const node = document.querySelector("ul").firstChild\n\nconsole.log(node)
\n\n
const node = document.querySelector("ul").firstElementChild\n\nconsole.log(node)
\n

lastChild/lastElementChild

\n

The lastChild property returns the last child node of the specified node, as a Node object.

\n
<ul class="list">\n  <li class="list-item">About</li>\n  <li class="list-item">Blog</li>\n</ul>
\n
const last = document.querySelector("ul").lastChild\n\nconsole.log(last)
\n\n
const last = document.querySelector("ul").lastElementChild\n\nconsole.log(last)
\n

parentNode/parentElement

\n

parentNode returns the parent node of the specified node, as a Node object.

\n
<ul class="list">\n  <li class="list-item">About</li>\n  <li class="list-item">Blog</li>\n</ul>
\n
const name = document.querySelector("li")\n\nconsole.log(name.parentNode)
\n\n
console.log(name.parentElement)
\n

previousSibling/previousElementSibling

\n
<ul class="list">\n  <button>Submit</button>\n  <li class="list-item">About</li>\n  <li class="list-item">Blog</li>\n  <p>Hello World!</p>\n</ul>
\n\n
const listItem = document.querySelectorAll(".list-item")[0]\n\nconsole.log(listItem.previousSibling)
\n\n
const listItem = document.querySelectorAll(".list-item")[0]\n\nconsole.log(listItem.previousElementSibling)
\n

nextSibling/nextElementSibling

\n
<ul class="list">\n  <button>Submit</button>\n  <li class="list-item">About</li>\n  <li class="list-item">Blog</li>\n  <p>Hello World!</p>\n</ul>
\n\n
const listItem = document.querySelectorAll("li")[1]\n\nconsole.log(listItem.nextSibling)
\n\n
const listItem = document.querySelectorAll("li")[1]\n\nconsole.log(listItem.nextElementSibling)
\n

createElement() & appendChild()

\n\n
<ul class="list">\n  <button>Submit</button>\n  <li class="list-item">About</li>\n  <li class="list-item">Blog</li>\n  <p>Hello World!</p>\n</ul>
\n
const button = document.createElement("button")\nbutton.textContent = "click"\n\nconst ul = document.querySelector("ul")\n\nul.appendChild(button)
\n

insertBefore()

\n\n
<ul class="list">\n  <button>Submit</button>\n  <li class="list-item">About</li>\n  <li class="list-item">Blog</li>\n  <p>Hello World!</p>\n</ul>
\n
const button = document.createElement("button")\nbutton.textContent = "click"\n\nconst ul = document.querySelector("ul")\n\nconst lastListItem = document.querySelectorAll("li")[1]\n\nul.insertBefore(button, lastListItem)
\n

removeChild()

\n\n
<ul class="list">\n  <button>Submit</button>\n  <li class="list-item">About</li>\n  <li class="list-item">Blog</li>\n  <p>Hello World!</p>\n</ul>
\n
const par = document.querySelector("p")\n\nconst parParent = par.parentNode\n\nparParent.removeChild(par)
\n","frontmatter":{"title":"JavaScript DOM Manipulation","date":"2021-05-26"}}},"pageContext":{"slug":"/javascript-dom-manipulation/","prev":{"fields":{"slug":"/javascript-logical-operators/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/objects-vs-primitives-in-javascript/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}