Code to operate child elements and sibling elements in Dom_DOM

First, we must correctly understand what a sub-element is. For example, we wrote a span tag in the web page. And write the text content in span: "Welcome to the Script House", then this text content is the child element of span. Same, if span is contained by a div. Then span is the child element of the div. Look at the following code:

<title>Correct understanding of sub-elements</title> <div><span>Welcome to Script House</span></div>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute ]

As you can see from the above code "Welcome to the Script House" and span are both contained in a div. But you cannot directly quote the text "Welcome to the Script House" in the div. What I want to tell you is: when obtaining child elements, cross-level acquisition is not allowed. Child elements can only be referenced by direct parent elements! In the same way, this div is also considered a child element in the body tag. But you can't get the span tag directly in the body. You have to get the div in the body and then the span. See the example below:

<title>Get child elements correctly</title> <div><span>Welcome to Script House</span></div> <input type="button" value="获取div" onclick="get_div()"> <input type="button" value="获取span" onclick="get_span()"> <input type="button" value="获取文字" onclick="get_text()">
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh it to execute

]

I will list what is obtained in Dom Several methods of child elements:

The method to get the first child element in the current element is: firstChild
The method to get the last child element in the current element is: lastChild
Get the child element in the current element The methods of all child elements are: childNodes
Tip: When processing child elements. You will encounter space problems. Because my code above is between body and div. There is no line break between div and span, so this problem can be avoided. But you can't always enter and write code without line breaks. In browsers such as FF, a space element will be formed between lines. They will treat these spaces as a valid element. Please refer to: Dom Techniques for Space Filtering
Understand sub-elements. Let’s talk about what brother elements are again. You should be able to understand it literally. The so-called brother elements actually mean that elements with the same parent element are called brother elements. Look at the code below:

<title></title>Understanding brother elements <div> <div></div> <span></span><a></a> </div>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

The above code demonstrates: If a div tag contains elements such as div, span, and a, then these included div, span, and a can be called brother elements of each other, because they are all included by the same parent element!
Let’s demonstrate how to get the elements between brothers:

<title></title>Understanding brother elements <div> <div></div> <span id="s"></span><a></a> </div>
[Ctrl A select all Note:

If you need to introduce external Js, you need to refresh to execute ]
In the above code we set an id attribute for the span element. Maybe you don't know yet, if you want to quickly get an element, you should set an id attribute for the element. Then use the getElementById method to obtain it based on the value of the id attribute.
After obtaining the span element, we used the following Dom methods to obtain the span's previous sibling element div, and the next sibling element a

Use the previousSibling method in the Dom to obtain the current element The previous sibling element
Use the nextSibling method in Dom to get the next sibling element of the current element
For FF browsing, there will also be a space problem when getting sibling elements. Please refer to: Dom skills of space filtering through this article. You should be able to correctly understand or operate child elements and sibling elements. If you need to reprint, please be sure to retain the following information:
Copyright of this article: Web Circle First address: http://www.web666.net/dom/dom_6.html