Javascript Html Manipulation | 𝟐𝟎𝟐𝟎 | 𝐍𝐞𝐰𝐛𝐲𝐂𝐨𝐝𝐞𝐫.𝐜𝐨𝐦

Javascript

Javascript Introduction Javascript Strings Javascript Conditions Javascript Functions Javascript Arrays Javascript Objects Javascript Loops Javascript Html Manipulation Javascript Ajax

manipulation of a document structure is usually done by using Document Object Model (DOM), a set of APIs for controlling HTML and styling information that makes use of Document object

Javascript objects exposing browser Apis

Some parts of Web browsers aren't exposed to be controlled or manipulated by a web developer using JavaScript

Despite limitations, Web APIs still give access to functionalities that enable to do stuff with web pages

JavaScript window object represents a browser tab where a web page is loaded
It enables to do stuff like
- provides attributes to get a window's size window.innerWidth and window.innerHeight
- manipulate document loaded into that window
- attach an event handler to current window etc
window.navigator can be used to retrieve things like user's preferred language, a media stream from the user's webcam, flash content support etc.
Document (represented by the DOM in browsers) is actual page loaded into window, and is represented in JavaScript by document object

Document object model

document currently loaded in browser is represented by a document object model

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Basic example of DOM</title>
  </head>
  <body>
      <section>
        <img src="desert_eagle.png" alt="Desert Eagle is a semi-automatic pistol recognized for chambering the largest centerfire cartridge of any magazine-fed, self-loading pistol">
        <p>Link to <a href="https://newbycoder.com/">NewbyCoder.com</a></p>
      </section>
  </body>
</html>

Each element and text string in document has its own entry in tree and each entry is called a node

Various terms are used to describe type of node, and their position in tree in relation to one another:

Element node: An element, as it exists in DOM
Root node: top node in a tree, which in case of html is always html node
Child node: A node directly inside another node
For example, img is a child of section in above example
Descendant node: A node anywhere inside another node
For example, img is a child of section in above example, and it is also a descendant;
img is not a child of body, as it is two levels below it in tree, but it is a descendant of body
Parent node: A node which has another node inside it, For example, body is parent node of section in above example
Sibling nodes: Nodes that sit on same level in DOM tree, For example, img and p are siblings in above example
Text node: A node containing a text string

Basic DOM manipulation

Selecting an element

To manipulate an element inside DOM, it can be selected by using an available selection method and a reference to it is stored inside a variable

var link = document.querySelector('a');

There are multiple ways to select an element

Document.getElementById(), selects an element with a given id attribute value
Document.getElementsByTagName(), which returns an array containing all elements on page of a given type
For example var h2Array = document.getElementsByTagName('h2')

Document.querySelector() is convenient because it allows to select elements using CSS selectors

The above querySelector() call matches first <a> element that appears in document

To get multiple elements, Document.querySelectorAll() can be used which returns an array-like object called a NodeList

Changing attributes of an element

Now element can be manipulated using properties and methods available to its reference
Text inside an element can by updated by changing value of Node.textContent property
```
link.textContent = 'Mozilla Developer Network';
```
To point a link to a Url its href attribute is changed, so that it redirects to appropriate url when clicked
```
link.href = 'https://developer.mozilla.org';
```

Inserting new elements

document.createElement() is used to create new elements

document.createElement('p') creates a <p> element
Similarly, document.createElement('div') creates a <div> element
document.createElement('p') doesn't insert element to DOM so it doesn't appear in webpage yet
To insert text to a created element, its textContent property is used, which replaces any previous text
```
var para = document.createElement('p');
para.textContent = 'Some text to be displayed';
```
New paragraph can now be added at end of body using appendChild() of body element
```
var body = document.querySelector('body');
para.appendChild(para);
```
To add additional text to paragraph use Document.createTextNode() to create a node containing text
```
var text = document.createTextNode(' — the premier source for web development knowledge.');
```
Append new text to para element
```
para.appendChild(text);
```

Adding element

to move paragraph to bottom of body element:

sect.appendChild(para);

Remove element

A node can be removed when a reference to the node to be removed and its parent is available

body.removeChild(para);

An element can also be removed when only its reference is available, by accessing its parent node from its reference

linkPara.parentNode.removeChild(linkPara);

Manipulating styles

A list of all the stylesheets attached to a document can be retrieved using Document.stylesheets, which returns an array of CSSStyleSheet objects

One way is to add inline styles directly onto elements to be dynamically styled

This is done with HTMLElement.style property, which contains inline styling information for each element in document

Setting properties of this object directly updates element styles

para.style.color = 'white';
para.style.backgroundColor = 'black';
para.style.padding = '10px';
para.style.width = '250px';
para.style.textAlign = 'center';

JavaScript property versions of CSS styles are written in lower camel case whereas the CSS versions are hyphenated (e.g. backgroundColor versus background-color)

Another common way to dynamically manipulate styles on document is to manipulate value of class attribute