Home > Developer > JavaScript
First, we must correctly understand what a child element is. for example, we have written a span tag on a webpage. in addition, the text content is written into the span: "Welcome to the home of scripts". The text content is a child element of the span. if span is included by a div. then span is the child element of the div. see the following code:
<Html> <pead> <title> correct understanding of child elements </title> </pead> <body> welcome to the home of scripts </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
From the code above, we can see that "welcome to the feet home" and span are included in a div. however, you cannot directly reference the text "welcome to your feet" in the div. what I want to tell you is that cross-level acquisition of child elements is not allowed. child elements can only be referenced by direct parent elements! Similarly, this div is a child element in the body tag. however, you cannot directly obtain the span tag in the body. you must get the div in the body and then take span. see the following example:
<Html> <pead> <title> correct acquisition of sub-elements </title> </pead> <body> welcome to step home <input type = "button" value = "Get div" onclick = "get_div () "/> <input type =" button "value =" Get span "onclick =" get_span () "/> <input type =" button "value =" get text "onclick =" get_text () "/> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
I will list several methods for getting sub-elements in the Dom:
To obtain the first child element of the current element, use firstChild.
The method to obtain the last child element of the current element is: lastChild
The method to obtain all the child elements of the current element is childNodes.
Tip: when processing child elements. there will be space issues. because the code above is between the body and the div. there is no line break between div and span, so this problem can be avoided. but you cannot keep a line break when writing code. A space element is formed between the row and row in the FF and other browsers. these spaces are also treated as valid elements. For details, see space filtering in Dom techniques.
Understand the child element. let's talk about what a sibling element is. you should be able to understand it literally. the so-called sibling element is actually a sibling element that has the same parent element. see the following code:
<Html> <pead> <title> understanding sibling elements </title> </pead> <body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The code above demonstrates that a div tag contains elements such as div, span, and a. The contained div, span, and a can be called sibling elements, because they are all included by the same parent element!
Next we will demonstrate how to obtain elements between siblings:
<Html> <pead> <title> understanding sibling elements </title> </pead> <body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
In the code above, we set an id attribute for the span element. you may not know yet. If you want to quickly obtain an element, you should set an id attribute for the element. use the getElementById method to obtain the value of the id attribute.
After obtaining the span element, we use the following Dom methods to obtain the div of the previous sibling element of span and the next sibling Element.
You can use the previussibling method in the Dom to obtain the previous sibling element of the current element.
Use the nextSibling method in the Dom to obtain the next sibling element of the current element.
A space issue occurs when getting sibling elements during FF browsing. see: Space filtering in Dom techniques. you should be able to correctly understand or operate sub-elements and sibling elements. if you want to reprint the data, make sure to keep the following information:
Copyright: Web circle first address: http://www.web666.net/dom/dom_6.html
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
