javascript - 如何在 Javascript 中获取 HTML 的非 DOM 属性

Question

说一个这样的 HTML 片段：

<div a_example = "x" b_example = "y" class = "z"></div>

在Javascript中获取a_example和b_example的相应属性的正确方法是什么？

xpath 可以完成这项工作吗？

Answer 1

使用getAttribute：

var elem = document.getElementsByClassName("z")[0],
    a = elem.getAttribute("a_example");

这是一个工作示例。

但是，正如已经提到的，您确实应该使用 HTML5data-*属性，否则您的标记是无效的。

Answer 2

一些浏览器会将所有属性添加为 DOM 元素的命名属性，而其他浏览器只会添加标准属性。在这两种情况下，您都可以使用 获取非标准属性getAttribute，但不建议使用这种方案。

通常使用标准属性和 DOM 属性，并且仅在必要时使用 getAttribute，因为它在不同浏览器中的实现不一致。

Answer 3

你应该看看 HTML5 数据属性，这里有一篇有用的文章：http ://html5doctor.com/html5-custom-data-attributes/

从标签中读取数据属性非常容易，并且可以为旧版浏览器提供回退。文章中的一个例子：

<div id="sunflower" data-leaves="47" data-plant-height="2.4m"></div>

<script>
// 'Getting' data-attributes using dataset 
var plant = document.getElementById('sunflower');
var leaves = plant.dataset.leaves; // leaves = 47;
</script>

Answer 4

如果您使用的是 jQuery，就这么简单：

HTML

<div id="testDiv" a_example = "x" b_example = "y" class = "z"></div>

Javascript：

var attr1 = $('#testDiv').attr('a_example');

Answer 5

element.getAttribute(attributename)

这应该适合你。

Answer 6

我同意您应该查看数据属性和添加非标准属性的更好方法，但这是您问题的“原始”答案，但我不会将其视为普遍支持（或建议）：

    alert(document.getElementsByTagName('div')[0].getAttribute('b_example'));