Let's take an example where an HTML contains a text and an unordered list.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta http-equiv= "Co Ntent-type "content=" text/html; Charset=utf-8 "/>
<title>JavaScript!</title>
<body>
<p id= "Intro" >my first paragraph...</p>
<ul>
< Li>list Item 1</li>
<li>list Item 1</li>
<li>list Item 1</ Li>
<li>list Item 1</li>
<li>list item 1</li>
&L T;/ul>
<script type= "Text/javascript" >
//<![ cdata[
//]]>
</script>
</body>
In the example above, we use the getElementById Dom method to access the P-paragraph and add the following code to the script:
var introparagraph = document.getElementById (' intro ');
Now that the DOM node is present, this DOM node is showing this paragraph of informationThe variable introparagraph is now referenced to the DOM node, and we can do a lot of things with that node, such as querying content and properties, or anything else, even deleting it, cloning it, or moving it to other nodes in the DOM tree.
Anything on the document, we can use JavaScript and DOM API to access, so similarly, we can also access the above unordered list, the only problem is that the element does not have an id attribute, if the ID of the words can be used the same way, or use the following getElementsByTagName method:
getElementsByTagNamevar allunorderedlists = document.getelementsbytagname (' ul ');
' getElementsByTagName ' returns a collection of nodes
-the array is a bit similarThe getElementsByTagName method returns a collection of nodes, and arrays similar to the length property, and one important feature is that he is live--if you add a new Li element to the element, the collection is automatically updated, between him and the array type, So it can be accessed in the same way as an array of accesses, so starting with 0:
Access unordered list: [0] Index
var unorderedlist = document.getelementsbytagname (' ul ') [0];
Get all the Li collections:
var alllistitems = unorderedlist.getelementsbytagname (' li ');
Looping through
for (var i = 0, length = alllistitems.length; i < length; i++) {
POPs the text content of the node
alert (alllistitems[i].firstchild.data);accessing DOM nodes
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
