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

Storing object ID in HTML document: id vs data-id vs?

本文关键字：ID vs data-id 对象 存储 HTML 文档      更新时间：2023-09-26

我想有一个关于在文档中存储RESTful对象id以便以后从JavaScript访问它的意见。

从理论上讲，使用id在HTML中寻址元素不再有效。相同的元素可以在页面上重复两次，比如在"最近"answers"最受欢迎"的查询中，这打破了使用id的要点。

HAML甚至有这个很好的语法糖:

%div[object]

就变成:

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

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

这是当前正确的方法吗?

<div data-id="object_1">

ID是用来唯一地标识一个元素的，所以如果你想用一些通用的标识符来标识两个或多个元素，你可以使用ID，但它可能不是你的最佳选择。

你可以使用这样的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]');

或仅d1div:

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或其他的引用来存储元素关系。

引入数据选择器的目的是因为用户不需要使用类或任何其他属性来存储值。请使用数据选择器本身。为了方便访问它们，请使用属性选择器，即[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

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

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

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

但这里有一些观点(只是观点，不是消极或积极的，这完全取决于你的应用需要)我想讨论:

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

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

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

document.getElementsByClassName("className")。 IE9 +

document.querySelectorAll("CSS selector");等

所以，基本上对于这一点，你需要根据你的应用需要和浏览器兼容性来选择。

3]性能问题也存在于data-*属性选择…源

但是，一般来说，如果我们选择最新的应用程序并选择HTML5, data-*属性+ jQuery是一个很好的选择。

我也在想这个问题。下面是我使用示例组件的POV。

CSS -所有按钮的样式

元素不应该在JS中使用CSS类引用，因为如果你有多个按钮需要不同的功能，为每个组件添加唯一的CSS类会变得混乱。

<div class="my-component">

JS -抓取组件时，它只能出现一次在一个页面

虽然浏览器可以处理多个id，但这将损害维护，因为这将是id的意外行为。

<div id="my-component">

const myComponent = document.querySelector('#my-component')

JS -抓取组件，当它可以出现多次在一个页面

ref或data-id都可以工作。ref已经被React和Vue推广，所以开发人员可能更熟悉它。

<div ref="my-component">

const myComponents = document.querySelectorAll('[ref="my-component"]')

或

<div data-id="my-component">

const myComponents = document.querySelectorAll('[data-id="my-component"]')
相关文章：