we can change the attributes of elements. For example, we can change the src attribute of an image. JS

var el = document.getElementById("myimg");
el.src = "https://www.sololearn.com/Images/home-new/1073.png";

HTML

<img id="myimg" src="https://www.sololearn.com/Images/home-new/1068.png" alt="" />

Note: Practically all

attributes

of an element can be changed using

JavaScript

element.

childNodes

returns an array of an element's child nodes. JS

function setText() {
    let a = document.getElementById("demo");
     let arr = a.childNodes;
     for(let x=0;x<arr.length;x++) {
       arr[x].innerHTML = "new text";
     }
}

//calling the function with setTimeout to make sure the HTML is loaded
setTimeout(setText, 500);

HTML of the example

<div id ="demo">
  <p>some text</p>
  <p>some other text</p>
</div>

Note: The code above changes the text of both paragraphs to

new text

element.

childNodes

returns an array of an element's child nodes. element.

firstChild

returns the first child node of an element. element.

lastChild

returns the last child node of an element. element.

hasChildNodes

returns true if an element has any child nodes, otherwise false. element.

nextSibling

returns the next node at the same tree level. element.

previousSibling

returns the previous node at the same tree level. element.

parentNode

returns the parent node of an element.

getElementsByTagName

method returns all of the elements of the specified tag name as an array. The following example gets all paragraph elements of the page and changes their content. JS

let arr = document.getElementsByTagName("p");
for (let x = 0; x < arr.length; x++) {
  arr[x].innerHTML = "Hi there";
}

HTML of the example

<p>Hi</p>
<p>Hey</p>
<p>Hello</p>
<div>Hello there</div>

Note: We used the

length

property of the

array

to loop through all the selected elements in the above example

The

getElementsByClassName()

method returns a collection of all elements (as an array) in the document with the specified class name. JS

var arr =  document.getElementsByClassName("demo");
//accessing the second element
arr[1].innerHTML = "Hi";

HTML

<div class="demo">1</div>
<div class="demo">2</div>

getElementById

method is used to select the element with

id="demo"

and change its content

let elem = document.getElementById("demo");
elem.innerHTML = "Hello World!";

The

document

object has methods that allow us to select the desired HTML element. These three methods are the most commonly used for selecting HTML elements

//finds element by id
document.getElementById(id) 

//finds elements by class name
document.getElementsByClassName(name) 

//finds elements by tag name
document.getElementsByTagName(name)

In the example below, the getElementById method is used to select the element with id="demo" and change its content

var elem = document.getElementById("demo");
elem.innerHTML = "Hello World!";

Note: The example above assumes that the HTML contains an element with

id="demo"

, for example

<div id="demo"></div>

The drag and drop feature lets you

grab

an object and drag it to a different location. To make an element draggable, we set the

draggable

attribute to true. JS

function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

HTML

<div id="box" ondrop="drop(event)" ondragover="allowDrop(event)" style="border:1px solid black; width:200px; height:200px"></div>

<img id="image" src="https://image.shutterstock.com/image-photo/large-beautiful-drops-transparent-rain-260nw-668593321.jpg" draggable="true" ondragstart="drag(event)" width="150" height="50" alt="" />

In HTML5, the Geolocation API is used to obtain the user's geographical location. Since this can compromise user privacy, the option is not available unless the user approves it. Note:

Geolocation is much more accurate for devices with GPS, like smartphones

Storing a Value

localStorage.setItem("key1", "value1");

Getting a Value

//this will print the value
alert(localStorage.getItem("key1"));

Removing a Value

localStorage.removeItem("key1");

Removing All Values

localStorage.clear();

Note:

The same syntax applies to the session storage, with one difference: Instead of localStorage, sessionStorage is used