1

如何在不使用 jquery 的情况下选择 HTML 元素并获取其数据属性？

例如，我有这个带有一些数据属性的 html 标签，

<html xmlns="http://www.w3.org/1999/xhtml" class="no-js" data-directory='{"base_url":"http://localhost/mywebsite/","core_package":"base/","local_package":"base/"}'>

这是一种jquery方式，

var directories = $('html').data('directory');

javascript的原生方式呢？

另外，如何选择脚本标签并获取其属性数据？

例如，我有这个脚本标签，

> <script
> data-main="http://localhost/mywebsite/local/view/javascript/base/main"
> src="http://localhost/mywebsite/core/view/javascript/base/ext/require/require.js"></script>

一种jQuery方式，

var base_url = $('script[src$="require.js"]').attr('src').split(/\b(?:core|local)\b/)[0];

但我需要一种 javascript 原生方式。可能吗？

4

4 回答 4

3

使用getElementsByTagName

1. .getAttribute("数据目录")

var directories = document.getElementsByTagName("html")[0].getAttribute("data-directory");

2. .src 或 .getAttribute("src") 工作相同

var base_url=document.getElementsByTagName("script")[0].src.split(/\b(?:core|local)\b/)[0];

对于较新的浏览器， document.querySelector可以像 jQuery 选择器一样使用，如果页面上有多个脚本，这当然会更智能

var base_url=document.querySelector('script[src$="require.js"]').src.split(/\b(?:core|local)\b/)[0];
于 2014-01-26T08:49:01.367 回答
2

尝试

var base_url = document.querySelector('script[src$="require.js"]').getAttribute("src").split(/\b(?:core|local)\b/)[0];
于 2014-01-26T08:49:10.913 回答
1

使用.getAttribute

var selector=document.getElementsByTagName('html')[0];

//Using DOM's getAttribute() property
var dataAtributte=selector.getAttribute("data-directory");
//retuns  {"base_url":"http://localhost/mywebsite/","core_package":"base/","local_package":"base/"}
于 2014-01-26T08:51:15.790 回答
0

首先，为什么你想用原生 JavaScript 来做，而 jQuery 更容易，而且你知道怎么做？

$('html')选择器的类似物document.getElementsByTagname("html")将返回一个元素数组，因此您必须获取第一个标签的[0]索引。html然后对于您的属性，您应该.getAttribute("attr-name")在您的情况下执行类似 attr-name is data-directory 的操作。所以最后你得到一个像

document.getElementsByTagname("html")[0].getAttribute("data-directory");

对于您的第二个问题，只需执行相同的操作，但要更改Tagname价值和getAttribute价值。

document.getElementsByTagname("script")[0].getAttribute("data-main");

于 2014-01-26T08:53:22.497 回答