将获取.data的jquery代码修改为javascript代码

我现在正在使用jquery获取id的值，如下面的代码所示：

<ul class="trf noborder" data-id="6581">
</ul> 

var ID = $("ul.trf").data('id');

变量ID=$（“ul.trf”）.data（'ID'）；

如何使用纯javascript实现这一点？我需要添加一个span类还是什么

Ty

您可以使用

element.getAttribute（'attribute\u name'）

在纯JavaScript中获取任何数据属性的值

可在此处找到示例： 您可以使用

element.getAttribute（'attribute\u name'）

在纯JavaScript中获取任何数据属性的值

可在此处找到示例：

---

您可以使用函数读取属性。但您应该收集元素本身，调用getElementById或getElementsByTagname函数。

您可以使用函数读取属性。但您应该收集元素本身，调用getElementById或getElementsByTagname函数。

使用纯javascript有几种方法 取决于您的需求以及您期望的性能。以下是使用ID的一种方法：

<ul class="trf noborder" data-id="6581" id="myDiv">
</ul> 

<script type="text/javascript">
    var id = document.getElementById("myDiv").getAttribute("data-id");
</script>

它基于数组索引，在本例中为2（0，1，2=第三个元素）

如果您不想要jQuery，但仍然愿意使用库，那么看看哪一个是很棒的选择器引擎（jQuery实际使用）。使用Sizzle，您可以这样做：

 var id = container.getElementsByTagName("ul")[2].getAttribute("data-id");

var id = Sizzle("ul[data-id]")[0].getAttribute("data-id");

---

获取指定了数据id属性的页面上第一个UL的数据id

使用纯javascript有几种方法

getData: function(el, attr) {
  attr = 'data-' + attr;
  var result = (el.getAttribute && el.getAttribute(attr)) || null;

  if(!result) {
    var attrs = el.attributes;
    var length = attrs.length;

    for(var i = 0; i < length; i++)
      if(attrs[i].nodeName === attr)
        result = attrs[i].nodeValue;
  }

  return result;
}

var el = document.getElementsByClassName('trf')[0];
var id = getData(el, 'id');

取决于您的需求以及您期望的性能。以下是使用ID的一种方法：

<ul class="trf noborder" data-id="6581" id="myDiv">
</ul> 

<script type="text/javascript">
    var id = document.getElementById("myDiv").getAttribute("data-id");
</script>

它基于数组索引，在本例中为2（0，1，2=第三个元素）

如果您不想要jQuery，但仍然愿意使用库，那么看看哪一个是很棒的选择器引擎（jQuery实际使用）。使用Sizzle，您可以这样做：

 var id = container.getElementsByTagName("ul")[2].getAttribute("data-id");

var id = Sizzle("ul[data-id]")[0].getAttribute("data-id");

获取指定了数据id属性的页面上第一个UL的数据id

获取数据：函数（el、attr）{

getData: function(el, attr) {
  attr = 'data-' + attr;
  var result = (el.getAttribute && el.getAttribute(attr)) || null;

  if(!result) {
    var attrs = el.attributes;
    var length = attrs.length;

    for(var i = 0; i < length; i++)
      if(attrs[i].nodeName === attr)
        result = attrs[i].nodeValue;
  }

  return result;
}

var el = document.getElementsByClassName('trf')[0];
var id = getData(el, 'id');

attr='data-'+attr； var result=（el.getAttribute&&el.getAttribute（attr））| | null； 如果（！结果）{ var attrs=el.attributes； 变量长度=属性长度； 对于（变量i=0；i

获取数据：函数（el、attr）{
attr='data-'+attr；
var result=（el.getAttribute&&el.getAttribute（attr））| | null；
如果（！结果）{
var attrs=el.attributes；
变量长度=属性长度；
对于（变量i=0；i

请注意，GetElementsByCassName在IE8及以下版本中不可用。有一些替代方案，例如，或者辉煌的SizzleJS（由jQuery使用）可以使用

querySelector

来挤压ie8，它在IE7中不起作用，但在ie8中起作用。其中as

.getElementsByClassName

仅适用于IE9。所以你可以做

var el=document.querySelector（“.trf”）获得更多支持：PYou可以在此页面上看到它在哪些浏览器中可用：请注意getElementsByClassName在IE8及以下版本中不可用。有一些替代方案，例如，或者辉煌的SizzleJS（由jQuery使用）可以使用
querySelector
来挤压ie8，它在IE7中不起作用，但在ie8中起作用。其中as
.getElementsByClassName
仅适用于IE9。所以你可以做
var el=document.querySelector（“.trf”）
获得更多支持：PYou可以在此页面上查看它在哪些浏览器中可用：