{"id":28165,"date":"2016-10-10T21:01:03","date_gmt":"2016-10-10T13:01:03","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28165"},"modified":"2023-04-06T19:20:39","modified_gmt":"2023-04-06T11:20:39","slug":"dom-manipulation-javascript-methods","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/dom-manipulation-javascript-methods\/","title":{"rendered":"Master DOM Manipulation with 15 Essential JavaScript Methods"},"content":{"rendered":"

As a web developer, you frequently need to manipulate the DOM<\/abbr>, the object model that is used by browsers to specify the logical structure<\/strong> of web pages, and based on this structure to render HTML elements on the screen<\/strong>.<\/p>\n

HTML defines the default DOM structure<\/strong>. However in many cases you may want to manipulate this with JavaScript, usually in order to add extra functionalities<\/strong> to a site.<\/p>\n

\"DOM
IMAGE: Google Developers<\/a><\/figcaption><\/figure>\n

In this post, you will find a list of 15 basic JavaScript methods<\/strong> that aid DOM manipulation<\/strong>. You\u2019d likely use these methods frequently in your code, and you will also bump into them in our JavaScript tutorials.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t4 Useful JavaScript Statements You Should Know<\/a>\n\t\t\t\t<\/p>\n

1. querySelector()<\/code><\/a><\/h2>\n

The querySelector()<\/code> method returns the first element that matches one or more CSS selectors<\/strong>. If no match is found, it returns null<\/code>.<\/p>\n

Before querySelector()<\/code> was introduced, developers widely used the getElementById()<\/code><\/a> method which fetches an element with a specified id<\/code> value<\/strong>.<\/p>\n

Although getElementById()<\/code> is still a useful method, but with the newer querySelector()<\/code> and querySelectorAll()<\/code> methods we are free to target elements based on any CSS selector<\/a><\/strong>, thus we have more flexibility.<\/p>\n

Syntax<\/h3>\n
var ele = document.querySelector(selector);<\/pre>\n
    \n
  • ele<\/code> \u2013 First matching element or null<\/code> (if no element matches the selectors)<\/li>\n
  • selector<\/code> \u2013 one or more CSS selectors, such as \"#fooId\"<\/code>, \".fooClassName\"<\/code>, \".class1.class2\"<\/code>, or \".class1, .class2\"<\/code><\/li>\n<\/ul>\n
    Code Example<\/h3>\n
    In this example, the first <div><\/code> gets selected with the querySelector()<\/code> method and its color is changed to red.<\/p>\n
    \r\n<p>paragraph one<\/p>\r\n<p>paragraph two<\/p>\r\n<div>div one<\/div>\r\n<p>paragraph three<\/p>\r\n<div>div two<\/div>\r\n<\/pre>\n
    \r\nvar firstDiv = document.querySelector('div');\r\nfirstDiv.style.color = 'red';\r\n<\/pre>\n
    Interactive Demo<\/h3>\n
    Test the querySelector()<\/code> method in the following interactive demo. Just type a selector matching the ones you can find inside the blue boxes (e.g. #three<\/code>), and click the Select<\/span> button. Note that if you type .block<\/code>, only its first instance<\/strong> will be selected.<\/p>\n