YouTipDom Nodes Access
* * *
With DOM, you can access every node in an XML document.
* * *
]( located in an external JavaScript file, is used to load the XML file.
(
This example uses the getElementsByTagName() method to retrieve the third `` element in "books.xml".
(
This example uses the length property to traverse all `<title>` elements in "books.xml".
(
This example uses the nodeType property to obtain the node type of the root element in "books.xml".
(
This example uses the nodeType property to process element nodes in "books.xml".
(
This example uses the nodeType property and the nextSibling property to process element nodes in "books.xml".
* * *
## Accessing Nodes
You can access nodes in three ways:
1. By using the getElementsByTagName() method.
2. By looping (traversing) the node tree.
3. By navigating the node tree using node relationships.
* * *
## The getElementsByTagName() Method
getElementsByTagName() returns all elements with the specified tag name.
### Syntax
_node_.getElementsByTagName(_"tagname"_);
### Example
The following example returns all `<title>` elements under the x element:
x.getElementsByTagName("title");
Note that the above example returns only `<title>` elements under the x node. To return all `<title>` elements in the XML document, use:
xmlDoc.getElementsByTagName("title");
Here, xmlDoc is the document itself (the document node).
* * *
## DOM Node List
The getElementsByTagName() method returns a node list. A node list is an array of nodes.
The following code uses [loadXMLDoc()]( to load "[books.xml](" into xmlDoc, then stores a list of `<title>` nodes in variable x:
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title");
You can access `<title>` elements in x using index numbers. To access the third `<title>`, you can write:
y=x;
**Note:** Indexing starts from 0.
In later chapters of this tutorial, you will learn more about node lists.
* * *
## DOM Node List Length
The length property defines the length (i.e., number of nodes) of a node list.
You can traverse a node list using the length property:
## Example
xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title"); for(i=0;i<x.length;i++){document.write(x.childNodes.nodeValue); document.write(""); }
[Try it yourself »](
Example explanation:
1. Load "[books.xml]( into xmlDoc using [loadXMLDoc()](
2. Retrieve all `<title>` element nodes
3. Output the value of the text node of each `<title>` element
* * *
## Node Types
The **documentElement** property of an XML document is the root node.
The **nodeName** property of a node is the name of the node.
The **nodeType** property of a node is the type of the node.
You will learn more about node properties in the next chapter of this tutorial.
(
* * *
## Traversing Nodes
The following code traverses the child nodes of the root node, which are also element nodes:
## Example
xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.documentElement.childNodes; for(i=0;i<x.length;i++){if(x.nodeType==1){document.write(x.nodeName); document.write(""); }}
[Try it yourself »](
Example explanation:
1. Load "[books.xml]( into xmlDoc using [loadXMLDoc()](
2. Retrieve the child nodes of the root element
3. Check the node type of each child node. If the node type is "1", it is an element node
4. If it is an element node, output the node name
* * *
## Navigating Node Relationships
The following code navigates the node tree using node relationships:
## Example
xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book").childNodes; y=xmlDoc.getElementsByTagName("book").firstChild; for(i=0;i<x.length;i++){if(y.nodeType==1){document.write(y.nodeName + ""); }y=y.nextSibling; }
[Try it yourself »](
1. Load "[books.xml]( into xmlDoc using [loadXMLDoc()](
2. Retrieve the child nodes of the first book element
3. Set the variable "y" to the first child node of the first book element
4. For each child node (starting from "y"), check the node type; if the node type is "1", it is an element node
5. If it is an element node, output the node name
6. Set the variable "y" to the next sibling node and run the loop again</div><div class="post-nav"><a href="/post/dom-nodes-info.html">← Dom Nodes Info</a><a href="/post/dom-methods.html">Dom Methods →</a></div></div>
<div class="sidebar"><div class="sidebar-widget"><h3>📂 Categories</h3><ul><li><a href="/category/18.html">⚡ JavaScript</a> <span style="color:#999;font-size:12px">(1589)</span></li><li><a href="/category/23.html">🐘 PHP</a> <span style="color:#999;font-size:12px">(872)</span></li><li><a href="/category/27.html">🐍 Python3</a> <span style="color:#999;font-size:12px">(810)</span></li><li><a href="/category/15.html">🌐 HTML</a> <span style="color:#999;font-size:12px">(691)</span></li><li><a href="/category/31.html">⚙️ C#</a> <span style="color:#999;font-size:12px">(650)</span></li><li><a href="/category/26.html">🐍 Python</a> <span style="color:#999;font-size:12px">(594)</span></li><li><a href="/category/28.html">☕ Java</a> <span style="color:#999;font-size:12px">(552)</span></li><li><a href="/category/72.html">⚙️ PyTorch</a> <span style="color:#999;font-size:12px">(534)</span></li><li><a href="/category/75.html">🐧 Linux</a> <span style="color:#999;font-size:12px">(472)</span></li><li><a href="/category/29.html">⚙️ C</a> <span style="color:#999;font-size:12px">(432)</span></li><li><a href="/category/20.html">📦 jQuery</a> <span style="color:#999;font-size:12px">(406)</span></li><li><a href="/category/16.html">🎨 CSS</a> <span style="color:#999;font-size:12px">(377)</span></li><li><a href="/category/64.html">📄 XML</a> <span style="color:#999;font-size:12px">(259)</span></li><li><a href="/category/59.html">📦 jQuery UI</a> <span style="color:#999;font-size:12px">(231)</span></li><li><a href="/category/60.html">🎯 Bootstrap</a> <span style="color:#999;font-size:12px">(220)</span></li><li><a href="/category/30.html">⚙️ C++</a> <span style="color:#999;font-size:12px">(215)</span></li><li><a href="/category/58.html">🅰️ Angular</a> <span style="color:#999;font-size:12px">(205)</span></li><li><a href="/category/19.html">🌐 HTML DOM</a> <span style="color:#999;font-size:12px">(201)</span></li><li><a href="/category/50.html">🔴 Redis</a> <span style="color:#999;font-size:12px">(188)</span></li><li><a href="/category/90.html">📖 Web Building</a> <span style="color:#999;font-size:12px">(142)</span></li><li><a href="/category/57.html">💚 Vue.js</a> <span style="color:#999;font-size:12px">(141)</span></li><li><a href="/category/43.html">📈 R</a> <span style="color:#999;font-size:12px">(131)</span></li><li><a href="/category/69.html">🐼 Pandas</a> <span style="color:#999;font-size:12px">(124)</span></li><li><a href="/category/24.html">🗄️ SQL</a> <span style="color:#999;font-size:12px">(105)</span></li><li><a href="/category/76.html">⚙️ Docker</a> <span style="color:#999;font-size:12px">(86)</span></li><li><a href="/category/36.html">⚙️ TypeScript</a> <span style="color:#999;font-size:12px">(73)</span></li><li><a href="/category/85.html">⚙️ Highcharts</a> <span style="color:#999;font-size:12px">(70)</span></li><li><a href="/category/95.html">📖 AI Agent</a> <span style="color:#999;font-size:12px">(70)</span></li><li><a href="/category/56.html">⚙️ React</a> <span style="color:#999;font-size:12px">(68)</span></li><li><a href="/category/35.html">📖 Node.js</a> <span style="color:#999;font-size:12px">(65)</span></li><li><a href="/category/94.html">⚙️ Machine Learning</a> <span style="color:#999;font-size:12px">(60)</span></li><li><a href="/category/77.html">📁 Git</a> <span style="color:#999;font-size:12px">(59)</span></li><li><a href="/category/32.html">🔵 Go</a> <span style="color:#999;font-size:12px">(58)</span></li><li><a href="/category/83.html">📈 Markdown</a> <span style="color:#999;font-size:12px">(58)</span></li><li><a href="/category/68.html">🔢 NumPy</a> <span style="color:#999;font-size:12px">(55)</span></li><li><a href="/category/66.html">🧪 Flask</a> <span style="color:#999;font-size:12px">(54)</span></li><li><a href="/category/41.html">⚙️ Scala</a> <span style="color:#999;font-size:12px">(53)</span></li><li><a href="/category/48.html">🗄️ SQLite</a> <span style="color:#999;font-size:12px">(52)</span></li><li><a href="/category/116.html">📖 JSTL</a> <span style="color:#999;font-size:12px">(52)</span></li><li><a href="/category/106.html">⚙️ VS Code</a> <span style="color:#999;font-size:12px">(51)</span></li><li><a href="/category/49.html">🍃 MongoDB</a> <span style="color:#999;font-size:12px">(49)</span></li><li><a href="/category/42.html">📈 Perl</a> <span style="color:#999;font-size:12px">(48)</span></li><li><a href="/category/34.html">📈 Ruby</a> <span style="color:#999;font-size:12px">(47)</span></li><li><a href="/category/70.html">📊 Matplotlib</a> <span style="color:#999;font-size:12px">(47)</span></li><li><a href="/category/1.html">⚙️ Uncategorized</a> <span style="color:#999;font-size:12px">(46)</span></li><li><a href="/category/37.html">🍎 Swift</a> <span style="color:#999;font-size:12px">(46)</span></li><li><a href="/category/51.html">🗄️ PostgreSQL</a> <span style="color:#999;font-size:12px">(46)</span></li><li><a href="/category/88.html">⚙️ Data Structures</a> <span style="color:#999;font-size:12px">(46)</span></li><li><a href="/category/100.html">📈 Playwright</a> <span style="color:#999;font-size:12px">(46)</span></li><li><a href="/category/54.html">📖 iOS</a> <span style="color:#999;font-size:12px">(45)</span></li><li><a href="/category/25.html">🗄️ MySQL</a> <span style="color:#999;font-size:12px">(44)</span></li><li><a href="/category/108.html">⚙️ LangChain</a> <span style="color:#999;font-size:12px">(43)</span></li><li><a href="/category/67.html">📖 FastAPI</a> <span style="color:#999;font-size:12px">(40)</span></li><li><a href="/category/112.html">⚙️ Ionic</a> <span style="color:#999;font-size:12px">(38)</span></li><li><a href="/category/87.html">📈 Design Patterns</a> <span style="color:#999;font-size:12px">(37)</span></li><li><a href="/category/114.html">⚙️ Eclipse</a> <span style="color:#999;font-size:12px">(37)</span></li><li><a href="/category/17.html">🎨 CSS3</a> <span style="color:#999;font-size:12px">(34)</span></li><li><a href="/category/40.html">🌙 Lua</a> <span style="color:#999;font-size:12px">(34)</span></li><li><a href="/category/127.html">⚙️ Codex</a> <span style="color:#999;font-size:12px">(34)</span></li><li><a href="/category/65.html">🎸 Django</a> <span style="color:#999;font-size:12px">(32)</span></li><li><a href="/category/102.html">⚙️ OpenCV</a> <span style="color:#999;font-size:12px">(32)</span></li><li><a href="/category/33.html">📈 Rust</a> <span style="color:#999;font-size:12px">(31)</span></li><li><a href="/category/117.html">📖 JSP</a> <span style="color:#999;font-size:12px">(31)</span></li><li><a href="/category/126.html">⚙️ Claude Code</a> <span style="color:#999;font-size:12px">(31)</span></li><li><a href="/category/101.html">📖 Pillow</a> <span style="color:#999;font-size:12px">(30)</span></li><li><a href="/category/130.html">⚙️ OpenCode</a> <span style="color:#999;font-size:12px">(28)</span></li><li><a href="/category/131.html">📖 AI Skills</a> <span style="color:#999;font-size:12px">(27)</span></li><li><a href="/category/55.html">📈 Flutter</a> <span style="color:#999;font-size:12px">(26)</span></li><li><a href="/category/80.html">📖 Maven</a> <span style="color:#999;font-size:12px">(26)</span></li><li><a href="/category/61.html">🎨 Tailwind CSS</a> <span style="color:#999;font-size:12px">(25)</span></li><li><a href="/category/73.html">🧠 TensorFlow</a> <span style="color:#999;font-size:12px">(25)</span></li><li><a href="/category/118.html">📈 Servlet</a> <span style="color:#999;font-size:12px">(24)</span></li><li><a href="/category/39.html">📈 Dart</a> <span style="color:#999;font-size:12px">(23)</span></li><li><a href="/category/46.html">📖 Assembly</a> <span style="color:#999;font-size:12px">(23)</span></li><li><a href="/category/52.html">⚙️ Memcached</a> <span style="color:#999;font-size:12px">(22)</span></li><li><a href="/category/63.html">✏️ SVG</a> <span style="color:#999;font-size:12px">(22)</span></li><li><a href="/category/98.html">⚙️ Electron</a> <span style="color:#999;font-size:12px">(22)</span></li><li><a href="/category/103.html">📖 NLP</a> <span style="color:#999;font-size:12px">(22)</span></li><li><a href="/category/82.html">🔍 Regex</a> <span style="color:#999;font-size:12px">(21)</span></li><li><a href="/category/53.html">📈 Android</a> <span style="color:#999;font-size:12px">(20)</span></li><li><a href="/category/38.html">🟣 Kotlin</a> <span style="color:#999;font-size:12px">(19)</span></li><li><a href="/category/44.html">📖 Julia</a> <span style="color:#999;font-size:12px">(19)</span></li><li><a href="/category/92.html">📖 SOAP</a> <span style="color:#999;font-size:12px">(17)</span></li><li><a href="/category/99.html">📖 Selenium</a> <span style="color:#999;font-size:12px">(17)</span></li><li><a href="/category/104.html">📈 PowerShell</a> <span style="color:#999;font-size:12px">(17)</span></li><li><a href="/category/62.html">💅 Sass</a> <span style="color:#999;font-size:12px">(16)</span></li><li><a href="/category/89.html">📖 HTTP</a> <span style="color:#999;font-size:12px">(16)</span></li><li><a href="/category/45.html">📖 Zig</a> <span style="color:#999;font-size:12px">(15)</span></li><li><a href="/category/113.html">📖 AI</a> <span style="color:#999;font-size:12px">(15)</span></li><li><a href="/category/21.html">🔄 AJAX</a> <span style="color:#999;font-size:12px">(14)</span></li><li><a href="/category/110.html">📈 Swagger</a> <span style="color:#999;font-size:12px">(14)</span></li><li><a href="/category/74.html">⚙️ Scikit-learn</a> <span style="color:#999;font-size:12px">(13)</span></li><li><a href="/category/84.html">⚙️ ECharts</a> <span style="color:#999;font-size:12px">(13)</span></li><li><a href="/category/86.html">⚙️ Chart.js</a> <span style="color:#999;font-size:12px">(13)</span></li><li><a href="/category/128.html">⚙️ Cursor</a> <span style="color:#999;font-size:12px">(13)</span></li><li><a href="/category/71.html">⚙️ SciPy</a> <span style="color:#999;font-size:12px">(12)</span></li><li><a href="/category/91.html">📈 RDF</a> <span style="color:#999;font-size:12px">(12)</span></li><li><a href="/category/96.html">📖 Ollama</a> <span style="color:#999;font-size:12px">(12)</span></li><li><a href="/category/97.html">📖 Next.js</a> <span style="color:#999;font-size:12px">(12)</span></li><li><a href="/category/129.html">📖 Plotly Dash</a> <span style="color:#999;font-size:12px">(12)</span></li><li><a href="/category/22.html">📋 JSON</a> <span style="color:#999;font-size:12px">(11)</span></li><li><a href="/category/109.html">📈 RESTful API</a> <span style="color:#999;font-size:12px">(11)</span></li><li><a href="/category/93.html">📖 WSDL</a> <span style="color:#999;font-size:12px">(9)</span></li><li><a href="/category/81.html">⚙️ CMake</a> <span style="color:#999;font-size:12px">(8)</span></li><li><a href="/category/115.html">📈 Firebug</a> <span style="color:#999;font-size:12px">(7)</span></li><li><a href="/category/78.html">📖 Nginx</a> <span style="color:#999;font-size:12px">(6)</span></li><li><a href="/category/79.html">☸️ Kubernetes</a> <span style="color:#999;font-size:12px">(6)</span></li><li><a href="/category/107.html">📈 Jupyter</a> <span style="color:#999;font-size:12px">(6)</span></li><li><a href="/category/105.html">📖 LaTeX</a> <span style="color:#999;font-size:12px">(4)</span></li><li><a href="/category/111.html">📖 UniApp</a> <span style="color:#999;font-size:12px">(4)</span></li><li><a href="/category/47.html">🗄️ SQL Server</a> <span style="color:#999;font-size:12px">(1)</span></li></ul></div></div>
</div>
</div>
<footer>
<div class="container">
<p>YouTip © 2024-2026 | <a href="/">Home</a> | Learn Technology, Build Dreams!</p>
<p>All content is for educational and learning purposes only.</p>
</div>
</footer>
<!-- Global Analytics Tracker -->
<script>
// Placeholder for Google Analytics
</script>
</body>
</html>