Javascript with DOM
What is DOM
The Document Object Model (DOM) is a way to represent a programming interface for HTML and XML documents. With the help of DOM, we can gain and manipulate tags, classes using commands of Documents object. It gives an opportunity to connect programming languages to the page.
DOM Document
The web page is a document, which we can display in the browser window or as the HTML source. In both cases, the Document Object Model shows the same document, which can be manipulated. DOM is a representation of the web page, which we can modify with some scripting language like JavaScript.
DOM Document has an important part on your webpage, as it is an owner of all other objects. So when you want to access any object on your webpage you should start with the document. Except that it contains a lot of major properties and methods that enable us to access and fix our website. With the help of DOM, we can create new elements and change the existing ones, even remove old elements and attributes. JavaScript can react to existing events and create new ones on the page as well.
The standard
JavaScript usually doesn’t use cryptic numeric codes for representing node types. Many other parts of the DOM interface also feel complicated and alien. The reason is that the DOM wasn’t designed only for JavaScript. Quite, it tries to be a language-neutral interface, which can be used in other systems as well—not just for HTML but also for XML - a generic data format with an HTML-like syntax.
Trees
Each node has an ability to refer to other nodes, children, they also can have their own children. This model is typical of nested structures where elements can contain subelements that are similar to themselves.
We call that kind of data structure a tree with a branching structure, which has just one, well-defined root and doesn’t have any cycle. In the case of the DOM, document.documentElement serves as the root.
There are a lot of trees in computer science. Except representing periodic structures such as HTML documents or programs, they are often used to support sorted sets of data. The reason is in the elements, which can usually be found or inserted more completely in a tree than in a flat array.
A typical tree has a lot of nodes. The syntax tree had identifiers, values, and also application nodes. The last one may have children, whereas identifiers and values are leaves or nodes without children.
The same is for the DOM. Here nodes are for elements, which represent HTML tags and determine the structure of the document. They can have child nodes, the example for this kind of node is document.body. Some of these children can also be leaf nodes: pieces of text or comment nodes.
Each DOM node object has a nodeType property. It contains a code that identifies the type of node.
Let’s imagine that the HTML document is just a nested set of boxes. Tags like <body> and </body> insert another tags, which contain other tags or text. Here is the example of the document:
<!DOCTYPE html>
<html>
<head>
<title>W3Docs page</title>
</head>
<body>
<h1>W3Docs Page</h1>
<h2>Welcome to W3Docs page</h2>
<p>
<a href="https://www.web.com/">Link to w3docs</a>
</p>
</body>
</html>
0 Comments
CAN FEEDBACK
Emoji