Question

如何在不使用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原生方式。有可能吗？

Answer 1

使用getElementsByTagName

1。 .getAttribute（“data-directories”）

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];

Answer 2

尝试

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

Answer 3

使用.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/"}

Answer 4

首先，为什么你想用原生JavaScript做这个，当jQuery更容易，你知道怎么做？

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

这样的行

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

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

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

使用原生javascript选择HTML＆amp; SCRIPT标签及其数据属性？

4 个答案: