How to get previous DOM element in Javascript?

Question

I'm using javascript to access previous element's attribute value.

My HTML :

  <form>
        <div>
            <label for="name">Name :</label>
            <input type="text" name="name">
        </div>
        <div>
            <label for="email">E-Mail :</label>
            <input type="email" name="email">
        </div>
   </form>

I use loop to read all input elements in my form.

But, i want to read the label's HTML.

ex.

  Input Element : 'email'

  Label         : 'E-Mail'

Also i want Javascript Solution ONLY !

//////// I'm not using jQuery ! ///////

"document.getElementsByName("email").previousElementSibling.innerHTML" — Shankar Thiyagaraajan, Dec 25 '16 at 15:36
'Previous' doesn't have too much sense, in this case, you need inputs and their labels, right? :) — sinisake, Dec 25 '16 at 15:36
@ShankarThiyagaraajan: `getElementsByName` returns a collection of elements. Which one in the collection do you want? If more than one, use a loop. If only one, then grab it by index `[0]`. The `.previousElementSibling` property is correct if used directly on an element. — , Dec 25 '16 at 15:37
Where and when you need to access `label`? `for` attributes should have unique values, why not to use that? Like `document.querySelector('label[for="email"]')`. — Teemu, Dec 25 '16 at 15:41
@Teemu Actually i implement simple validation library, so i need to send back the response to label. That's why i need label access. — Shankar Thiyagaraajan, Dec 25 '16 at 15:43
So, you need the label for the current input at hands in the loop? I'd still go with `querySelector`, since it's possible that there's element(s) between the label and input. You'd get a proper answer, if you could show an exact use case, currently we've to guess too much. — Teemu, Dec 25 '16 at 15:46
Its not duplicate. Just read it fully. I need previous "different DOM" element. Not same ... — Shankar Thiyagaraajan, Dec 25 '16 at 15:51
One more thing, `label`'s `for` attribute refers to `id` of the input element, not `name`. It is also possible to write a working label construction without `for` attribute, like so: `Email: `. Just some observes, since you're creating a library, and can't control the markup in the form to validate. — Teemu, Dec 25 '16 at 16:04
Why do you need the label text? What are you planning to do with it? Is your problem to get the previous element, or to get the associated label wherever it is? — , Dec 25 '16 at 16:07
I strongly recommend you to use [`labels`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) property of an input to get the correct label elements of a specific input element. — Teemu, Dec 25 '16 at 16:19

Zenel Rrushi · Accepted Answer · 2016-12-25T15:57:27.770

2

You can use .previousElementSibling property to get the label element.

var el = document.getElementsByTagName('input');

for(var i =0; i< el.length;i++){
console.log(el[i]);
console.log(el[i].previousElementSibling);
if(el[i].getAttribute("name")==el[i].previousElementSibling.getAttribute("for")){
console.log("it is label");
}
}

Here is the jsfiddle example.

edited Dec 25 '16 at 15:57

answered Dec 25 '16 at 15:41

Zenel Rrushi

2,346
1
18
34

Simple i get access of label. But, is it will may distracted by some other elements right ?? Any Feasible solution for access only label ? – Shankar Thiyagaraajan Dec 25 '16 at 15:49
Considering the code is in a library, what guarantees the previous element being `label` here? – Teemu Dec 25 '16 at 15:55
Knowing that only label has the attribute `for` and this attribute is equal to name of the input you can use `if(el[i].getAttribute("name")==el[i].previousElementSibling.getAttribute("for")){//code here}`. – Zenel Rrushi Dec 25 '16 at 15:56

score 1 · Answer 2 · edited May 23 '17 at 10:30

1

Used the code here:Find html label associated with a given input

//associate all labels to inputs:
var labels = document.getElementsByTagName('LABEL'); for (var i = 0; i < labels.length; i++) { if (labels[i].htmlFor != '') { var elem = document.getElementsByName(labels[i].htmlFor)[0]; if (elem) elem.label = labels[i]; } }

 //get email for example
 email=document.getElementsByName("email")[0];
EmailLabelvalue=email.label.innerHTML;

It connects every label with its Input, than you can easily get it using input.label. To get its containing value use .innerHTML ...

edited May 23 '17 at 10:30

Community

1
1

answered Dec 25 '16 at 15:37

Jonas Wilms

132,000
20
149
151

`document.getElementsByName("email")` this will not pick .. label. – Atul Sharma Dec 25 '16 at 15:40
It will get the email element, just an example how to use... – Jonas Wilms Dec 25 '16 at 15:41
Generate : "Cannot read property 'innerHTML' " – Shankar Thiyagaraajan Dec 25 '16 at 15:41
I simply took the code from the other answer, didnt checked if it work. Edited... – Jonas Wilms Dec 25 '16 at 15:43

How to get previous DOM element in Javascript?

2 Answers2