Introduction to HTML DOM_PowerNode Java Academy
|
What is DOM? With JavaScript, you can reconstruct the entire HTML document. You can add, remove, change, or rearrange items on the page. To change something on the page, JavaScript needs access to all elements in the HTML document. This access, along with methods and properties for adding, moving, changing, or removing HTML elements, is obtained through the Document Object Model (DOM). In 1998, the W3C published the first level of the DOM specification. This specification allows access to and manipulation of every individual element in an HTML page. All browsers implement this standard, so DOM compatibility issues are almost non-existent. The DOM can be used by JavaScript to read and change HTML, XHTML, and XML documents. The DOM is divided into different parts (Core, XML, and HTML) and levels (DOM Level 1/2/3): Core DOM Defines a standard set of objects for any structured document XML DOM Defines a set of standard objects for XML documents HTML DOM Defines a standard set of objects for HTML documents. node According to DOM, each component in an HTML document is a node. The DOM specifies:
Node Hierarchy Nodes have a hierarchical relationship with each other. All nodes in an HTML document form a document tree (or node tree). Each element, attribute, text, etc. in an HTML document represents a node in the tree. The tree starts at the document node and continues to branch out from there until it reaches all the text nodes at the lowest level of the tree. The following picture shows a document tree (node tree):
Document tree (number of nodes) Consider the following HTML document:
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson One</h1>
<p>Hello world!</p>
</body>
</html>All of the above nodes have relationships with each other. Every node except the document node has a parent node. For example, the parent node of <head> and <body> is the <html> node, and the parent node of the text node "Hello world!" is the <p> node. Most element nodes have child nodes. For example, the <head> node has one child: the <title> node. The <title> node also has one child: the text node "DOM Tutorial". When nodes share the same parent node, they are siblings (sibling nodes). For example, <h1> and <p> are siblings because their parent node is the <body> node. Nodes can also have descendants, which are all the child nodes of a node, or the children of those child nodes, and so on. For example, all text nodes are descendants of the <html> node, and the first text node is a descendant of the <head> node. Nodes can also have ancestors. An ancestor is a node's parent, or its parent's parent, and so on. For example, all text nodes can have the <html> node as an ancestor. |
<<: Solve the problem of docker container exiting immediately after starting
>>: Record a pitfall of MySQL update statement update
Recommend
A set of code based on Vue-cli supports multiple projects
Table of contents Application Scenario Ideas Proj...
Implementing parameter jump function in Vue project
Page Description: Main page: name —> shisheng...
A quick solution to the automatic line break problem of table header in responsive framework
I've been using Bootstrap to develop a websit...
How to solve the mysql ERROR 1045 (28000)-- Access denied for user problem
Problem description (the following discussion is ...
Details on using order by in MySQL
Table of contents 1. Introduction 2. Main text 2....
Example code for implementing 3D Rubik's Cube with CSS
Let's make a simple 3D Rubik's Cube today...
Mysql5.7.17 winx64.zip decompression version installation and configuration graphic tutorial
1. Download mysql-5.7.17-winx64.zip; Link: https:...
How to deploy the crownblog project to Alibaba Cloud using docker
Front-end project packaging Find .env.production ...
How to hide and remove scroll bars in HTML
1. HTML tags with attributes XML/HTML CodeCopy co...
Introduction to install method in Vue
Table of contents 1. Globally registered componen...
Mysql 5.6.37 winx64 installation dual version mysql notes
If MySQL version 5.0 already exists on the machin...
Detailed explanation of the principles and usage of MySQL master-slave replication and read-write separation
This article uses examples to illustrate the prin...
Summary of 10 must-see JavaScript interview questions (recommended)
1.This points to 1. Who calls whom? example: func...
About Tomcat combined with Atomikos to implement JTA
Recently, the project switched the environment an...
Small paging design
Let our users choose whether to move forward or ba...