如何使用Javascript确定元素的语言？

Question

根据规范，语言是从最近具有 lang 属性的祖先元素继承的。那么如何获取其中一个后代的语言呢？

我使用 lang 属性设置语言：

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

并尝试使用 lang 属性访问它：

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

我很快就注意到内部div的“lang”属性不是继承的语言（或者它没有继承；我不知道）。这个fiddle演示了我看到的行为。

如何使用Javascript确定元素的语言？我真的希望利用“lang”属性的继承，因为我还需要这个与屏幕阅读器一起使用。

- Andrew Vermie

---

你需要遍历DOM树来找到它。 - Brad

假设lang属性已经被设置。 - Brett

仅仅因为一个DOM元素从其祖先继承了行为，并不意味着它在自身上设置了该属性。 - Mike Brant

http://jsfiddle.net/sv96aLh1/3/ - Ananth

Answer 1

从你提供的规范中可以看到：

为了确定节点的语言，用户代理必须查找最近的祖先元素（包括元素本身，如果该节点是元素），该祖先元素具有在 XML 命名空间设置的 lang 属性或是一个 HTML 元素并且具有没有命名空间的 lang 属性。该属性指定了节点的语言（无论其值如何）。

继承自另一个元素并不意味着该属性已经被设置到该元素本身。因此，你的代码也必须找到最近的具有 lang 属性的父元素（如果存在的话）。如果这听起来有问题，请参见 this question。

- Etheryte

---

OP需要使用[hasAttribute]（http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-ElHasAttr）来确定元素是否具有*lang*属性。我想`if (typeof element.getAttribute('lang') == 'string')`也可以完成工作。 - RobG

我真的很希望那个“实际”的用户代理（浏览器）能够为我完成这个任务。 - Andrew Vermie

Answer 2

这里有一个函数，它将返回任何元素的最近祖先的“lang”属性的值，如果找不到则返回undefined：

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

- maerics

---

如果你用迭代而不是递归，这将是一个更好的解决方案。递归通常较慢，在这里没有必要使用它。 - Etheryte

迭代比递归更好吗？ - maerics

简单的迭代通常肯定更快，但你并不总是能以合理的方式使用它来实现你想要的结果。 - Etheryte

请查看我的评论的后半部分。 - Etheryte

@RobG：是的，说得好；我已经更新了我的代码。（虽然我不确定空字符串在传递语言信息方面是否比null更有用。） - maerics