Dom programming (html and xml)

Relationship between html dom and xml dom:

What is DOM?

DOM is the W3C standard.

DOM defines the criteria for accessing HTML and XML documents:

"The W3C Document Object Model (DOM) is a platform-neutral and language-neutral interface that allows programs and scripts to dynamically access and update document content, structures, and styles ."

W3C DOM standards are divided into three different parts:

Core DOM-Standard Model for any structured document

Xml dom-Standard Model for XML documents

Html dom-Standard Model for HTML documents

DOM is the abbreviation of Document Object Model.

What is xml dom?

The xml dom defines the objects and attributes of all XML elements and their access methods.

What is html dom?

Html dom is:

Standard HTML Object Model

Standard HTML programming interface

W3C Standard

Html dom defines the objects and attributes of all HTML elements and the methods to access them.

In other words, html dom is a standard for getting, modifying, adding, or deleting HTML elements.

Html dom node tree

Html dom treats HTML documents as a tree structure. This structure is called a node tree:

With html dom, all nodes in the tree can be accessed through JavaScript. All HTML elements (nodes) can be modified or created or deleted.

DOM Node

According to W3C html dom standards, all content in HTML documents is node:

The entire document is a document Node

Each HTML element is an element node.

The text in the HTML element is a text node.

Each HTML attribute is an attribute node.

Annotation is a comment node.

Node parent, child, and compatriot

Nodes in the node tree have hierarchical relationships with each other.

Terms such as parent, child, and sibling are used to describe these relationships. The parent node has a subnode. Sub-nodes of the same level are called siblings ).

In the node tree, the top node is called root)

Each node has a parent node, except the root node (it does not have a parent node)

A node can have any number of sub-accounts

A compatriot is a node with the same parent node

The following figure shows a part of the node tree and the relationship between nodes:

Html dom method

The method is the action that can be executed on the node (HTML element.

Programming Interface

Html dom can be accessed through JavaScript (and other programming languages.

All HTML elements are defined as objects, while programming interfaces are object methods and object attributes.

Actions that you can perform (such as adding or modifying elements ).

Attribute is the value that you can obtain or set (such as the name or content of a node ).

Html dom object-methods and attributes

DOM attributes

InnerHTML attributes

The easiest way to get element content is to use the innerHTML attribute.

The innerHTML attribute is useful for retrieving or replacing HTML elements.

NodeName attribute

The name of the node specified by the nodeName attribute.

NodeName is read-only

The nodeName of the element node is the same as the label name.

The nodeName of the attribute node is the same as the attribute name.

The nodeName of the text node is always # text

The nodeName of the document node is always # document

Note: nodeName always contains the uppercase letter Tag Name of the HTML element.

NodeValue attributes

The nodeValue attribute specifies the value of a node.

The nodeValue of an element node is undefined or null.

The nodeValue of a text node is the text itself.

The nodeValue of the attribute node is the property value.

NodeType attributes

The nodeType attribute returns the node type. NodeType is read-only.

Important node types include:

Element type	NodeType
Element	1
Attribute	2
Text	3
Note	8
Document	9

Html dom access

GetElementById () method

The getElementById () method returns the element with the specified ID:

node.getElementById("id");

GetElementsByTagName () method

GetElementsByTagName () returns all elements with the specified tag name.

node.getElementsByTagName("tagname");

GetElementsByClassName () method

If you want to find all HTML elements with the same class name, use this method:

document.getElementsByClassName("intro");

The preceding example returns a list of all elements containing class = "intro:

Note: getElementsByClassName () is invalid in Internet Explorer 5, 6, 7, and 8.

Example of HTML events:

When a user clicks the mouse

When a webpage is loaded

When the image is loaded

When you move the cursor over an element

When the input field is changed

When an HTML form is submitted

When a user triggers a button

Onload and onunload events

When a user enters or leaves the page, the onload and onunload events are triggered.

The onload event can be used to check the browser type and version of a visitor so that different versions of web pages can be loaded based on the information.

Onload and onunload events can be used to process cookies.

Onchange event

Onchange events are often used for verification of input fields.

The following example shows how to use onchange. When you change the content of the input field, the upperCase () function is called.

Onmouseover and onmouseout events

Onmouseover and onmouseout events can be used to trigger a function when the mouse pointer moves to or leaves an element.

Onmousedown, onmouseup, and onclick events

Onmousedown, onmouseup, and onclick events are all the processes of Mouse clicking. When a mouse button is clicked

Onmousedown event. When the mouse button is released, the onmouseup event is triggered.

Onclick event.

Used to process DOM element attributes of XML documents

Attribute name	Description
ChildNodes	Returns an array of all child elements of the current element.
FirstChild	Returns the first subelement of the current element.
LastChild	Returns the last child element of the current element.
NextSibling	Returns the elements that follow the current element.
NoedValue	Specifies the read/write attribute of the element value.
ParentNode	Returns the parent node of an element.
Previussibling	Returns the element adjacent to the current element.

DOM element method used to traverse XML documents

Attribute name	Description
GetElementById (id) (document)	Obtain the elements in the document with the specified unique ID property value
GetElementsByTagName (name)	Returns the array of child elements specified by the calibration name in the current element.
HasChildNodes ()	Returns a Boolean value indicating whether the element has a child element.
GetAttribute (name)	Returns the attribute value of an element. The attribute is specified by name.

W3C DOM attributes and methods used for dynamic content creation

Attribute/Method	Description
Document. createElement (tagName)	The createElement method on the document object can create elements specified by tagName. If the string div is used as the method parameter, a div element is generated.
Document. createTextNode (text)	The createTextNode method of the Document Object creates a node that contains static text.
. AppendChild (childNode)	The appendChild method adds the specified node to the subnode list of the current element (as a new subnode ). For example, you can add an option element as a subnode of the select element.
. Getattrure (name)	These methods obtain and set the value of the name attribute in the element respectively.
.. Setattrube (name, value)
. InsertBefore (newNode, targetNode)	This method inserts the node newNode as the child node of the current element in front of the targetNode element.
. RemoveAttribute (name)	This method deletes the attribute name from the element.
. RemoveChild (childNode)	This method deletes the child element childNode from the element.
. ReplaceChild (newNode, oldNode)	This method replaces the node oldNode with the node newNode.
. HasChildnodes ()	This method returns a Boolean value that specifies whether the element has child elements.

For the attributes and methods of all objects in dom, see w3cschool.

Browser Object Reference Manual

Click the following link to obtain more information about the following objects, including their collections, attributes, methods, and events. It contains a large number of instances!

Object	Description
Window	The top-level object in the JavaScript level, indicating the browser window.
Navigator	Contains information about the client browser.
Screen	Contains information about the client display.
History	Contains the URL accessed by the browser window.
Location	Contains information about the current URL.

Html dom object reference manual

Click the following link to learn more about objects, their collections, attributes, methods, and events. It contains a large number of instances!

Object	Description
Document	Represents the entire HTML document and can be used to access all elements on the page.
Anchor	Element
Area	Elements in image ing
Base	RepresentativeElement
Body	RepresentativeElement
Button	RepresentativeElement
Event	Indicates the status of an event.
Form	Representative Element
Frame	Represents the <frame> element
Frameset	Represents the <frameset> element
Iframe	Represents the <iframe> element
Image	Element
Input button	Represents a button in an HTML form.
Input checkbox	Indicates the check box in an HTML form.
Input file	Uploads files in HTML forms.
Input hidden	Represents a hidden field in an HTML form.
Input password	Indicates the password field in the HTML form.
Input radio	Indicates the radio button in the HTML form.
Input reset	Indicates the reset button in the HTML form.
Input submit	The confirmation button in the HTML form.
Input text	Indicates the text input field (text box) in an HTML form)
Link	Representative Element
Meta	Representative Element
Object	RepresentativeElement
Option	RepresentativeElement
Select	Indicates the selection list in the HTML form.
Style	Represents a separate style Declaration
Table	Representative Element Element TableData Representative Element TableRow Representative Textarea RepresentativeElement </td> </tr> </tbody> </table>