I'm stuck using native DOM methods (I know, right?) and I have a structure like this:
<div>
<input>
<a>
</div>
I'm using an onClick on the <a>
tag, and want to retrieve the value from the input. On Chrome/OS X, something like
this.previousSibling.previousSibling.value
will work well. I double it though because the first .previousSibling
returns the <div>
's Textnode, and one more before that gets the input that I want.
My question is: does .previousSibling
always return the parent's text node if it exists?
Thanks!
My hacky solution was (cross browser) to ensure I get the right element looked like this:
var el = this;
while(el.nodeType == 3 || el.tagName && el.tagName !== 'INPUT') {
el = el.previousSibling
};
console.log(el.value);
Location specific, but works cross browser, and is light enough to toss into an onClick
for my needs. Thanks for the help in figuring out what was at issue here (line breaks between HTML in particular)
The previousSibling property returns the previous node on the same tree level. The previousSibling property returns a node object.
To get the previous sibling of a specific HTML Element, using JavaScript, get reference to this HTML element, and read the previousElementSibling property of this HTML Element. previousElementSibling property returns the element immediately prior to this HTML element.
You can use previousElementSibling to get the previous element node (skipping text nodes and any other non-element nodes). To navigate the opposite way through the child nodes list use Node. nextSibling.
The Element. previousElementSibling read-only property returns the Element immediately prior to the specified one in its parent's children list, or null if the specified element is the first one in the list.
It returns the previous sibling node, it might be text node
, it might be element node
, it might be null
You can retrieve previous element nodes with .previousElementSibling
which isn't supported in legacy browsers but you can use a function like:
function previousElementSibling( elem ) {
do {
elem = elem.previousSibling;
} while ( elem && elem.nodeType !== 1 );
return elem;
}
previousElementSibling(this)
will result in the input element.
Does .previousSibling always return the parent's text node if it exists?
No. It returns the immediately preceding sibling. In your case, there is a text node (a new line) immediately preceding the a
element, so it returns that.
If you remove the white space it should work as expected:
<div>
<input><a></a> <!-- input is immediately preceding anchor -->
</div>
However, that's not a particularly nice solution. See @Esailija's answer for a nicer one!
According to http://www.w3schools.com/dom/prop_element_previoussibling.asp
The previousSibling property returns the previous sibling node (the previous node in the same tree level) of the selected element
If there is no such node, this property returns null.
technically, what you're showing there is
<div><textnode><input><textnode><a><textnode></div>
...so if the browsers are following the rules, it should keep working properly. If you're asking whether or not there are browsers out there that fail to follow the rules on this, I can't help you, but I will note that IE has a habit of adding dom objects to pages (particularly as wrappers) which might prove hazardous regardless.
Edit: http://www.w3schools.com/dom/dom_nodes_navigate.asp has this to say on the topic.
Firefox, and some other browsers, will treat empty white-spaces or new lines as text nodes, Internet Explorer will not.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With