Home > Developer > JavaScript
The nextSibling and previoussibling in JavaScript and the next() and prev(), which act like jquery, are all getting the next/ The previous sibling element, the return value of this property is null if the next peer node does not exist. However, there are differences in the use of the specific, if the attention. It can cause errors.
Various spaces in the HTML structure, line breaks may treat text nodes as sibling elements. This can lead to errors.
For example, the following code
<! DOCTYPE html><body> <div id= "div" > <p id = "One" > I am p</p> <span id= "The other" > I am span</ Span> </div></body>In the above code, I acquired the element with ID "one" and acquired his next sibling element with NextSibling. Assigns a value to the variable Nexttype
| 1 | varnextType = document.getElementById(‘one‘).nextSibling; |
and use
alert (Nexttype.nodetype);
Pop his node type, if the common sense, element p next adjacent sibling element is a span, the number should be "1", but I again Firefox, Google, ie browser (on the Internet that only Firefox will put a newline, space as text node processing, but I test Google, IE browser effect is the same, which is a little puzzled) after opening, the number that pops up is 3,
That is, the text node. This is because the line break is treated as a text node and becomes the next sibling element of the P element.
If I want to get a text value that I am span, I need to write this
<! DOCTYPE html>P and span labels are separated by a text node and need to be used 2 times nextsibling to select the span tag to get the text value
firstchild,lastchild,nextsibling,previoussibling will use spaces or line breaks as nodes, but there are alternative attributes
So in order to accurately find the corresponding element, it will be used
Firstelementchild,
Lastelementchild,
Nextelementsibling,
Previouselementsibling
Compatible notation, which is the property of JavaScript itself.
But the bad news is that ie6,7,8 is incompatible with these properties. IE9 above and Firefox Google support.
So I wrote an interface to test the functions that can be run inside including IE6 (written by myself, I don't know if there is any other detail error, I can run it anyway and filter the text node to get the right next element node)
function Getnextelement (Element) { var e = element.nextsibling; if (E = = null) {//tests if the sibling node exists, otherwise returns null return null; } if (e.nodetype==3) {//If the sibling element is a text node var-n = getnextelement (e); if (Two.nodetype = = 1) return; } else{ if (e.nodetype = = 1) {//confirms that the node is an element node before returning return E; } else{ return false;}} }NextSibling and PreviousSibling usage considerations in JavaScript
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
