JavaScript basic tutorial

JavaScript objects

JavaScript functions

JS HTML DOM

JS browser BOM

AJAX basic tutorial

JavaScript reference manual

JS Window Browser Object Model JS DOM Change Element Attributes

JS DOM Navigation

HTML DOM allows JavaScript to navigate the node tree using node relationships.

DOM nodes

According to W3C HTML DOM standard, all content in an HTML document is a node:

The entire document is a document node
Each HTML element is an element node
The text within an HTML element is a text node
Each HTML attribute is an attribute node (not recommended for use)
All comments are comment nodes

Using HTML DOM, all nodes in the node tree can be accessed through JavaScript.

New nodes can be created, and all nodes can be modified or deleted.

Node relationships

Nodes in the node tree have a hierarchical relationship.

The terms 'parent', 'child', and 'sibling' are used to describe relationships.

In the node tree, the top node is called the root (or root node)
Each node has only one parent node, except for the root node (the root node has no parent node)
A node can have multiple child nodes
Siblings (siblings) are nodes with the same parent node

Example

<html>
　　<head>
<title>DOM　Tutorial</title>
　　</head>
　　
<h1>DOM　Nodes</h1>
<p>Hello,　World</p>
　　
</html>

You can read from the above HTML:
<html>is the root node and has no parent
<html>is the parent of<head>and<body>
<head>is the first child of<html>
<body>is the last child of<html>
and:
<head>has a child:<title>
<title>has a child (a text node): “DOM Tutorial”
<body>has two children:<h1>and<p>
<h1>has a child (a text node): “DOM Nodes”
<p>has a child (a text node): “Hello，world”
<h1>and<p>are siblings

Navigate between nodes

You can use the following node properties to navigate between nodes with JavaScript:

parentNode

childNodes[nodenumber]

Access child nodes

You can usefirstChilduse the properties of the DOM node to access the first direct child node of the node.

Example

<p　id="para">
　　<span>First　span</span>
　　<b>First　Bold</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.firstElementChild.nodeName);　//　returns　SPAN
</script>

Test to see ‹/›

Note:In the above example, the output will be#text,because text nodes are inserted to maintain spacing between tags. Any space will create a#textfrom a single space to multiple spaces, tabs, etc.

However, if the spaces are removed, nodes will not be inserted#textnode, and the span element will become the first child element of the paragraph:

Example

<p　id="para"><span>First　span</span>　<b>First　Bold</b></p>
<script>
var para = document.getElementById("para");
alert(para.firstChild.nodeName);　//　returns　SPAN
</script>

Test to see‹/›

Access the first child in this way:

Example

para.childNodes[0].nodeName;　//　returns　SPAN

Test to see‹/›

You can uselastChilduse the properties of the DOM node to access the last direct child node of the node.

Example

para.lastChild.nodeName;　//　returns　B

Test to see‹/›

To avoid appearing#textor#commentNodefirstChildandlastChildYou can choose to use the following options to return this issue:

firstElementChildThe attribute returns the first child element of the specified parent element.

Example

<p　id="para">
　　<span>First　span</span>
　　<b>First　Bold</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.firstElementChild.nodeName);　//　returns　SPAN
</script>

Test to see‹/›

lastElementChildThe attribute returns the last child element of the specified parent element.

Example

<p　id="para">
　　<span>First　span</span>
　　<b>First　Bold</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.lastElementChild.nodeName);　//　returns　B
</script>

Test to see‹/›

}Note:nodeNameis a read-only property that returns the name of the current node as a string.

Access parent node

You can useparentNodeproperty to access the parent level of the specified node in the DOM tree.

Example

<div>
　　　<p>This is first P inside DIV</p>
　　　<p id="para">This is second P inside DIV</p>
　　　<p>This is third P inside DIV</p>
</div>
<script>
var para = document.getElementById("para");
alert(para.parentNode.nodeName);　　//　returns DIV
</script>

Test to see‹/›

You can also useparentElementproperty returns the parent element of the specified element.

to access sibling nodes

You can usepreviousSiblingandnextSiblingproperty to access the previous and next nodes in the DOM tree.

Example

<div id="div-1">Here is div-1</div>
<div id="div-2">Here is div-2</div>
<div id="div-3">Here is div-3</div>
<script>
var x = document.querySelector("#div-2");
alert(x.previousSibling.nodeName);
alert(x.nextSibling.nodeName);
</script>

Test to see‹/›

Alternatively, you can usepreviousElementSiblingandnextElementSiblingto skip any whitespace text nodes and get the previous and next sibling elements.

Example

<div id="div-1">Here is div-1</div>
<div id="div-2">Here is div-2</div>
<div id="div-3">Here is div-3</div>
<script>
var x = document.querySelector("#div-2");
alert(x.previousElementSibling.textContent);
alert(x.nextElementSibling.textContent);
</script>

Test to see‹/›

textContentproperty represents the text content of the node.

DOM root node

The following two properties allow access to the entire document:

document.bodyproperty sets or returns the element of the document.

Example

<!DOCTYPE html>
<html>
<p>Hello, World!</p>
<div>
　　<p>DOM root node</p>
　　<p>The 'document.body' property sets or returns the body element of the document.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</html>

Test to see‹/›

document.documentElementproperty returns the<html>element.

Example

<!DOCTYPE html>
<html>
<p>Hello, World!</p>
<div>
　　<p>DOM root node</p>
　　<p>The 'document.documentElement' property returns the root element of the document.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</html>

Test to see‹/›

nodeType attribute

nodeTypeThe property returns the node type of the specified node in numeric form.

Example

var x = document.getElementById("myPara").nodeType;

Test to see‹/›

The DOM tree is composed of different types of nodes, such as elements, text, comments, and so on.

Each node has anodeTypeProperties, which can be used to find the node types to be processed.

The following table lists the most important node types:

Node	Type	Example
ELEMENT_NODE	1个	<p class="heading">Hello, World<//p>
ATTRIBUTE_NODE	2	class ="heading" (not recommended for use)
TEXT_NODE	3	Hello, World
COMMENT_NODE	8	<!--This is a comment-->
DOCUMENT_NODE	9	The HTML document itself (the parent of <html>)
DOCUMENT_TYPE_NODE	10	<!doctype html>

JS Window Browser Object Model JS DOM Change Element Attributes