How to determine an element's language with Javascript?

Question

According to the spec, language is inherited from the nearest ancestor element which has lang set. So how do I get the language of one of these descendents?

I'm setting the language with the lang attribute:

<div id="outer" lang="es">
    <div id="inner">¿Por qué?</div>
</div>

And trying to access it with the lang property:

alert(document.getElementById('outer').lang);
alert(document.getElementById('inner').lang);

I pretty quickly noticed that the lang property of the inner div isn't the inherited language (or it's not inheriting; no idea). This fiddle demonstrates the behavior I'm seeing.

How can I determine an element's language with Javascript? I'm really looking to take advantage of the inheritance of the lang attribute, as I also need this to work with screen-readers.

Just because a DOM element inherits behavior from an ancestor, does not mean it has the property set on itself. — Mike Brant
– Mike Brant, Commented Feb 11, 2015 at 19:53

Community · Accepted Answer · 2017-05-23 12:16:01Z

3

From the very spec you linked to:

To determine the language of a node, user agents must look at the nearest ancestor element (including the element itself if the node is an element) that has a lang attribute in the XML namespace set or is an HTML element and has a lang in no namespace attribute set. That attribute specifies the language of the node (regardless of its value).

Inheriting from another element doesn't mean the attribute is set for the element itself. Therefore, your code must, as well, find the nearest parent with the lang attribute (if any exist). See this question if that sounds problematic.

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Feb 11, 2015 at 19:52

Etheryte

25.4k12 gold badges77 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RobG Over a year ago

The OP needs to use hasAttribute to determine if an element has the lang attribute. I guess if (typeof element.getAttribute('lang') == 'string') might do the job also.

Andrew Vermie Over a year ago

I was really hoping that that actual user agent (the browser) would be able to do this for me.

maerics · Accepted Answer · 2015-02-12 01:26:17Z

1

Here is a function that will return the value of the "lang" attribute of the nearest ancestor of any element, or undefined if none is found:

function elementLang(el) {
  while (el) {
    if (el.hasAttribute('lang')) {
      return el.getAttribute('lang');
    }
    el = el.parentElement;
  }
}

// From your example jsFiddle...
elementLang(document.getElementById('inner')); // => "es"
elementLang(document.getElementById('outer')); // => "es"
elementLang(document.getElementById('output')); // => undefined

edited Feb 12, 2015 at 1:26

answered Feb 11, 2015 at 19:55

maerics

157k47 gold badges277 silver badges299 bronze badges

8 Comments

Etheryte Over a year ago

This would be a better solution if you made it iterative instead of recursive. Recursion is generally slow and there's no need to use it here.

maerics Over a year ago

So iteration is better than recursion?

Etheryte Over a year ago

Simple iteration is generally certainly faster, you simply can't always use it to achieve what you want in a reasonable manner.

maerics Over a year ago

What about tail recursion on tail-call-optimizing interpreters or compilers?

Etheryte Over a year ago

See the second half of my comment.

|

Collectives™ on Stack Overflow

How to determine an element's language with Javascript?

2 Answers 2

2 Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related