First, we must correctly understand what is a child element. For example, we wrote a span tag on the Web page. and write the text in span: "Welcome to the cloud community", so this text content is a child of span. The same if span is contained by a Div. Then span is the child element of the Div. Look at the following code:
<ptml> <pead><title> Correct understanding of child elements </title></pead> <body> <div><span> Welcome to Yun-Habitat community </span></div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
As you can see from the code above, "Welcome to the cloud community" and span are included in a Div. But you can't quote the words "Welcome to the Cloud community" directly in the Div. What I want to tell you is that when you get a child element, you can't get it across levels. Child elements can only be referenced by a direct parent element! Similarly, this div is also considered a child element in the body tag. But you can't get the span tag directly from the body. You have to get the div in the body and then take the span. Look at the example below to demonstrate:
<textarea id="runcode10153"><ptml> <pead><title> getting child elements </title></pead> <body><div><span> Welcome to Yun-Habitat community </span></div> <input type= "button" value= "Get div" onclick= "get_div ()"/> <input type= " Button "value=" gets span "onclick=" get_span () "/> <input type=" button "value=" Get Text "onclick=" Get_text () "/> </ body> </ptml> <script type= "Text/javascript" > Function Get_div () {var body=document.body;//reference body Tag VA R div=body.firstchild;//Gets the first child element alert (div.tagname) in the body; //Get Span function Get_span () {var div=document.getelementsbytagname ("div");/get page All div tag var Span=div[0].firstchi ld;//gets the first child element alert (Span.tagname) in the first Div; //Get text content function Get_text () {var body=document.body;//get body var div=body.firstchild; var span=div.firstchild; var Text=span.firstchild.nodevalue; alert (text); } </script></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Let me enumerate several ways to get a child in the DOM:
Gets the first child element in the current element by: FirstChild
The method to get the last child element in the current element is: LastChild
The method to get all the child elements in the current element is: ChildNodes
Tip: When you are working with child elements. A space problem is encountered. Because the code above me is between the body and the div. There are no line breaks between the div and span, so this problem can be avoided. But you can't always write code without changing it. A space element is formed between the rows and rows in a browser such as FF. They will also treat these spaces as a valid element, see: Dom Tips for space filtering
Understand the child elements. Let's talk a little bit about sibling elements. Literally you should be able to understand almost as much. The so-called sibling element, in fact, is that the elements of the same parent element are called sibling elements. Look at the following code:
<ptml> <pead><title> Understanding brother elements </title></pead> <body> <div><div></ Div><span></span><a></div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The above code demonstrates that the DIV,SPAN,A elements are included in a DIV tag, and these included div,span,a can be called sibling elements because they are all contained by the same parent element!
Let's show you how to get the elements between brothers:
<ptml> <pead><title> Understanding brother elements </title></pead> <body> <div><div></ Div><span id= "s" ></span><a></div> <script type= "Text/javascript" > var span= document.getElementById ("s");//gets SPAN element alert ("The last sibling element of span is" +span.previoussibling.tagname); Alert ("The next sibling element of span is" +span.nextsibling.tagname); </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
In the above code we set an id attribute for the SPAN element. Perhaps you don't know that if you want to get an element quickly, you should set an id attribute for the element. The getElementById method is then used to obtain the value of the id attribute.
After acquiring the span element we used the following Dom method to get the last sibling div of span, and the next sibling element a
Use the PreviousSibling method in the DOM to get the previous sibling element of the current element
Use the NextSibling method in the DOM to get the next sibling element of the current element
There is also a space problem when acquiring sibling elements in FF browsing. See also: Dom tips for space filtering through this article. You should be able to correctly recognize or manipulate child elements with sibling elements. If you want to reprint, be sure to keep the following information:
This article Copyright: Web Circle Starting Address: http://www.web666.net/dom/dom_6.html
