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!

EDIT / Solution

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)

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!

EDIT / Solution

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)

• javascript
• dom

3 Answers 3

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./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./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.