Question

我想对将RESTful对象ID存储在文档中以便稍后从JavaScript访问它有意见。

从理论上讲，使用id来解决HTML中的元素并不会再削减它。相同的元素可以在页面上重复两次，在＆＃34; Recent＆＃34;和＃34;最受欢迎＆＃34;查询破坏了使用id的主要内容。

HAML甚至有这么好的语法糖：

%div[object]

变为：

<div class="object" id="object_1">

但就像我说的那样，似乎这不是一个好方法。所以我想知道在DOM中存储对象id的最佳方法是什么？

这是目前正确的方法吗？

<div data-id="object_1">

Answer 1

引入数据选择器的目的是因为用户不需要使用类或任何其他属性来存储value.Kindly使用数据选择器本身。为了便于访问它们，使用属性选择器，即[attribute ='value']。 PFB是同样的小提琴，也是例子

jsfiddle

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-git2.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body onload="call()">
  <div id="1" data-check='1'></div>
  <div id="2" data-check='1'>sdf</div>
  <div data-check='1'>sdf</div>
  <div data-check='1'>sdf</div>
  <div data-check='1'>sdf</div>
</body>
</html>

function call()
{

$("#1").html($('[data-check="1"]').length);

  $("#2").html( document.querySelectorAll('[data-check="1"]').length);

}

输出：5 5 sdf sdf sdf

Answer 2

ID旨在唯一标识元素，因此如果您希望通过某个公共标识符标识两个或多个元素，则可以使用ID，但它可能不是您的最佳选择。 / p>

您可以使用以下ID：

<div id="d0">Original Div</div>
<div id="d0-0">Copy of original div</div>
<div id="d1">Another original Div</div>
<div id="d1-0">Another copy of original div</div>
<div id="d1-1">Another copy of original div</div>

并使用以下方法获取所有 d1 元素：

document.querySelectorAll('[id^=d1]');

或只是 d1 divs：

document.querySelectorAll('div[id^=d1]')

你也可以使用一个类：

<div id="d0" class="d0">Original Div</div>
<div id="..." class="d0">Copy of original div</div>
<div id="d1" class="d1">Another original Div</div>
<div id="..." class="d1">Another copy of original div</div>
<div id="..." class="d1">Another copy of original div</div>

和

document.querySelectorAll('.d1')

或者以相同的方式使用 data - 属性。无论什么都适合。

您还可以拥有一种MVC架构，其中对象通过基于ID或其他内容的引用来存储元素关系。只是在盒子外思考一下。

Answer 3

@RobG是正确的，使用'class'你可以在JavaScript中获取元素数组 -

 var divs=document.getElelementsByClassName("className");
 \\And you can loop through it(`divs[i]`).

根据@RobG和@Barmar data-*属性也是一个不错的选择。

但这里有一点（只是指出，不是消极或积极的，完全取决于你的申请需要）我想讨论：

1] data-*元素是HTML5的新属性。 Documentation

2] 要在javascript中检索元素，您需要使用jQuery或更多的JavaScript，因为所有可用的直接功能都有特定的浏览器支持：

赞document.querySelector("CSS selector"); IE8 +

document.getElementsByClassName("className")。的 IE9 +

document.querySelectorAll("CSS selector");等。

因此，基本上，您需要根据应用需求和浏览器兼容性进行选择。

3] 按data-*属性进行选择也存在性能问题...... Source

但是，通常情况下，如果我们选择最新的应用程序并选择HTML5，data-*属性+ jQuery是一个不错的选择。

在HTML文档中存储对象ID：id vs data-id vs？

3 个答案: