DOM

Question 1

What is dom?

Answer 1

The Document Object Model ( DOM) is an application programming interface (API) for both HTML and XML applications. This defines the logical document structure, and how to access and modify a document.

Programmers can build documents using the Document Object Model, navigate their structure, and add, alter, or remove elements and content. Using the Document Object Model, something contained in an HTML or XML document may be read, modified, removed, or added.

The HTML DOM defines all HTML elements’ objects and properties, and the methods (interface) to access them.

The Document Object Model (DOM) is the data representation of the structure and content of the HTML document. As the browser parses HTML, it creates a JavaScript object for every element and section of text encountered. These objects are called nodes—element nodes and text nodes, respectively.

Question 2

What are some of the properties and methods on HTML dom

Answer 2

Properties and methods help us to define the HTML DOM programming interface.

Properties of HTML DOM. Let e be a node object or an HTML element.

• e.innerHTML : returns the inner text value of e.
• e.nodeName : returns the name of e.
• e.nodeValue : returns the value of e.
• e.parentNode: returns the parent node of e.
• e.childNodes: returns the child node of e.
• e.attributes: returns the attribute nodes of e.

Methods that we use in the HTML DOM.

• e.getElementById(id) : gets the element with a specified id in an HTML document.
• e.getElementsByTagName(name) : gets all elements with a specified tag name in an HTML document.
• e.appendChild(node): inserts a child node to e or increases the number of child nodes of e.
• e.removeChild(node) : removes a child node from e in an HTML DOM.

Question 3

Functions to access dom elements

Answer 3

getElementById
getElementsByName
getElementsByTagName
getElementsByTagNameNS
getElementsByClassName
querySelector
querySelectorAll

Question 4

Dom addition functions

Answer 4

var ul = document.createElement('ul');
var li1 = document.createElement('li');
li1.innerHTML = "list element 1";

var content = document.querySelector('body');
content.appendChild(ul);
var content1 = document.querySelector('ul');
content1.appendChild(li1);

content1.setAttribute(attribute, value)