```html
XML DOM – Node Lists and Named Node Maps
* * *
Node lists are returned by the getElementsByTagName() method and the childNodes property.
* * *
![Image 1: Example]()
Try it Yourself - Example
The following example uses the XML file books.xml.
The function loadXMLDoc(), located in an external JavaScript, is used to load the XML file.
Get text from the first element</a></p>
<p>This example uses the getElementsByTagName() method to get text from the first <title> element in "books.xml".</p>
<p><a href="#">Traverse nodes using the length property</a></p>
<p>This example uses a node list and the length property to traverse all <title> elements in "books.xml".</p>
<p><a href="#">Get element attributes</a></p>
<p>This example uses an attribute list to get attributes from the first element in "books.xml".</p>
<p>* * *</p>
<h2>DOM Node List</h2>
<p>When using properties or methods like childNodes or getElementsByTagName(), a node list object is returned.</p>
<p>A node list object represents a list of nodes, in the order they appear in the XML.</p>
<p>The nodes in a node list can be accessed by an index number, starting at 0.</p>
<p>The image below shows a node list of the <title> elements in "<a href="#">books.xml</a>":</p>
<p><img alt="Image 2: DOM node list"></p>
<p>The code snippet below loads "<a href="#">books.xml</a>" into xmlDoc using <a href="#">loadXMLDoc()</a>, and returns a node list of title elements in "books.xml":</p>
<pre><code>xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title");
</code></pre>
<p>After the statements above are executed, x is a node list object.</p>
<p>The code snippet below returns the text from the first <title> element in the node list (x):</p>
<h3>Example</h3>
<pre><code>txt=x.childNodes.nodeValue;
</code></pre>
<p><a href="#">Try it yourself »</a></p>
<p>After the statement above is executed, txt = "Everyday Italian".</p>
<p>* * *</p>
<h2>Node List Length</h2>
<p>A node list object maintains itself automatically. If elements are deleted or added, the list updates itself.</p>
<p>The length property of a node list is the number of nodes in the list.</p>
<p>The code snippet below loads "<a href="#">books.xml</a>" into xmlDoc using <a href="#">loadXMLDoc()</a>, and returns the number of <title> elements in "books.xml":</p>
<pre><code>xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName('title').length;
</code></pre>
<p>After the statements above are executed, x = 4.</p>
<p>The length of a node list can be used to traverse all elements in the list.</p>
<p>The code snippet below uses the length property to traverse the list of <title> elements:</p>
<h3>Example</h3>
<pre><code>xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName('title'); for(i=0;i<x.length;i++){document.write(x.childNodes.nodeValue); document.write("<br>"); }
</code></pre>
<p>Output:</p>
<p>Everyday Italian<br> Harry Potter<br> XQuery Kick Start<br> Learning XML</p>
<p><a href="#">Try it yourself »</a></p>
<p>Explanation of the example:</p>
<ol>
<li>Load "<a href="#">books.xml</a>" into xmlDoc using <a href="#">loadXMLDoc()</a></li>
<li>Set the x variable to hold a list of all title elements</li>
<li>Output the value of the text node from all <title> elements</li>
</ol>
<p>* * *</p>
<h2>DOM Named Node Map (Attribute List)</h2>
<p>The attributes property of an element node returns a list of attribute nodes.</p>
<p>This is called a named node map (Named Node Map), which is similar to a node list, except for some differences in methods and properties.</p>
<p>An attribute list maintains itself automatically. If attributes are deleted or added, the list updates itself.</p>
<p>The code snippet below loads "<a href="#">books.xml</a>" into xmlDoc using <a href="#">loadXMLDoc()</a>, and returns a list of attribute nodes for the first element in "books.xml":</p>
<pre><code>xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName('book').attributes;
</code></pre>
<p>After the code above is executed, x.length equals the number of attributes, and x.getNamedItem() can return an attribute node.</p>
<p>The code snippet below displays the value of the "category" attribute of a book, as well as the number of attributes:</p>
<h3>Example</h3>
<pre><code>xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book").attributes; document.write(x.getNamedItem("category").nodeValue); document.write("<br>" + x.length);
</code></pre>
<p>Output:</p>
<p>cooking<br> 1</p>
<p><a href="#">Try it yourself »</a></p>
<p>Explanation of the example:</p>
<ol>
<li>Load "<a href="#">books.xml</a>" into xmlDoc using <a href="#">loadXMLDoc()</a></li>
<li>Set the x variable to hold a list of all attributes of the first element</li>
<li>Output the value of the "category" attribute</li>
<li>Output the length of the attribute list</li>
</ol>
```</div><div class="post-nav"><a href="/post/dom-nodes-traverse.html">← Dom Nodes Traverse</a><a href="/post/dom-nodes-info.html">Dom Nodes Info →</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>
YouTip