Document Object Model (DOM) constitutes an integral web interaction tool that creates a virtual map of the web page that loads in the browser. It may also be labeled as a programming interface for both HTML and XML documents. Web programs manipulate the structure of the document, the style and its content due to the DOM, which has nodes and objects that form a document. Without this model, programming languages wouldn't work on a browser page. Usually, a browser contains the DOM, while JavaScript acts as the client-scripting language that completes the essential connection. JavaScript manipulates the DOM in nearly all website operations such as slideshows, providing an error report on submitting an incomplete form or even toggling navigation menus.
In simple terms, any web page that you encounter is a document. Viewing the document as an HTML source or in a browser window is just an approach of presenting one thing in different ways. The document object model (DOM) represents a webpage as objects to enable its manipulation. With the document-oriented model, a scripting language such as JavaScript may modify it by targeting the objects.
It is noteworthy that browsers have different standards and the most common are the W3C DOM and WHATWG DOM standards. This necessitates a compatibility check across standards.
For instance, the standard DOM implementation requires the getElementsByTagName
method to show in the below yields <p>
elements that are persistent in the document.
Assessing DOM Structure,you can refer to Document Object Model (DOM) Tutorial Series: Part 1.
This post is written as a guide to some of the concepts and terms related to the DOM tree and nodes.
You will often find the DOM (Document Object Model) being referred to as the DOM tree because of its nodes, which are trees of objects. In our short introduction to DOM, we looked at the concept behind the DOM. We were also able to differentiate the DOM from HTML source code and define instances where they are similar and dissimilar.
The aim of this post is to review some of the basic HTML terminology and also learn a bit more about DOM nodes. Understanding these concepts will help you when it comes to working on both DOM and JavaScript as well as in identifying common types of nodes. In a later tutorial we will also explore how to use JavaScript to make modifications to the DOM.
We have seen what constitutes an HTML document. In DOM terminology, all elements of an HTML document are nodes, including the entire document and all the HTML tags contained within it. To explain this, text constitutes text nodes, comments make up the comment nodes, while HTML attributes make up the attribute nodes.
Let's create a simple HTML document to explore these concepts further.
<html>
<head>
<title>DOM Series: Understanding the DOM </title>
</head>
<body>
<h1> DOM Tree and Nodes </h1>
<p>Hello DOM!</p>
</body>
</html>
In the HTML document above, <html>
is a root node within which all other nodes are contained. In other words, <html>
is both the opening and closing of the document, which means in turn that the <head>
and <body>
are the children nodes of the <html>
root node. Further down, then, the <head>
node is the parent of the <title>
node. The <h1>
and <p>
nodes are the children of the
In JavaScript, all HTML elements are handled as JavaScript objects, which are then arranged as a tree. Such an arrangement is possible since each node has specific properties or characteristics such as having a parent node, having sibling nodes, or having child nodes. A tree arises from a node's family of nodes.
When a node is saved in JavaScript, the family information in the tree is part of its node properties. We can have a property and children, which will have all its child nodes, and that is the logic that enables arranging the child nodes under the node in reference.
In this blog post, you will learn how you can add, change, replace and remove nodes in the DOM.
In previous blog posts, we have already explored how you can access DOM elements and handle the DOM, so from what we have learned so far, we can proceed to use classes, tags, ids, and selectors to look for nodes in the DOM. We can also further use the properties of parents, children, and siblings to find relative nodes in the DOM.
In this part of my tutorial series, you will learn how you can add, change, replace, and remove nodes in the DOM. We will be creating simple JavaScript projects where we can create, modify, and remove elements in the DOM. Our simple programs will be tailored towards the type of changes that are executed on the DOM.
If you work as a front-end developer, then you'll know that the DOM manipulation is routine business. While HTML is the default method, using JavaScript provides a greater level of flexibility and a larger number of features.
In this tutorial, we will be looking at the methods outlined in the table below:
jcreateElement()
appendChild()
removeChild()
replaceChild()
addEventListner()
removeEventListner()
cloneNode()
insertBefore()
setAttribute()
getAttribute()
removeAttribute()
This tutorial outlines how you can access DOM elements through ID, class, tag, and query selectors.
Previously, we looked at how the DOM is structured into trees and nodes, discussed some of the basics of getting elements in the DOM, and learned about three types of nodes, specifically text, comment, and element nodes. DOM content can be accessed through the element node.
Now, in this tutorial, we will be exploring the methods of accessing DOM elements through ID, class, tag, and query selectors. To follow this tutorial, you'll need to have working understanding of the HTML elements, CSS selectors, and the related syntax.
Simple Application Server is a new generation computing service for stand-alone application scenarios. It provides one-click application deployment and supports all-in-one services such as domain name resolution, website publishing, security, O&M, and application management.
Deploy ECS instances with just a few clicks from the easy-to-use console and scale capacity up or down based on real-time demands.
playAuth: the unique credential for video playback. Each playback credential is bound to a user ID. Playback credentials cannot be exchanged among different users. Otherwise, videos cannot be played normally. By default, a playback credential has a limited validity period of 100 seconds. For more information, see Obtain the playAuth.
RAM and STS: permission management systems provided by Alibaba Cloud.
Resource Access Management (RAM) is used to control account permissions. RAM enables you to create RAM users within the permissions of your Alibaba Cloud account. Different RAM users can be granted different permissions.
Security Token Service (STS) is a security token management system that grants temporary access permissions. STS can be used to grant access permissions to temporary accounts. For more information, see STS.
Alibaba Cloud SDK for NodeJS is a unified entry for NodeJS developers to use various Alibaba Cloud services. This SDK is developed and maintained by the Alibaba Cloud UED team. Currently, this SDK integrates three Alibaba Cloud services: ApsaraDB for Memcache, OSS, and RDS (MySQL). Code address: https://github.com/aliyun-UED/aliyun-sdk-js.
By using ApsaraDB for Memcache SDK for NodeJS, you can easily access ApsaraDB for Memcache. After obtaining Alibaba Cloud instances through a trial or purchase, you can obtain the corresponding ocsKey and ocsSecret.
For hosts running in a network environment, they are constantly facing attacks and damage from malicious code. These malicious codes are transmitted in a variety of ways, and the level of harm is not the same. Through this course, you can not only understand the common ways of malicious code classifying and spreading, but also have a deeper understanding of the attack principles of remote control, ransomware, and webshell.
As one of the most popular programming languages, Java's usage in cloud application development is also very high. This certification exam is based on Alibaba's Java Coding Guidelines.
2,599 posts | 758 followers
FollowAlex - January 22, 2020
Alibaba Clouder - May 20, 2020
Alibaba Clouder - May 20, 2020
Alex - January 22, 2020
SunLuyong - August 15, 2023
Alibaba Clouder - November 16, 2020
2,599 posts | 758 followers
FollowAuto Scaling automatically adjusts computing resources based on your business cycle
Learn MoreSimplify the Operations and Management (O&M) of your computing resources
Learn MoreMore Posts by Alibaba Clouder