如何为某些HTML标签存储任意数据

JavaScript HTML

阳光小哥

2020-03-23

我正在制作一个页面，该页面具有javascript提供的一些交互功能。举个例子：链接发送AJAX请求以获取文章内容，然后在div中显示该数据。显然，在此示例中，我需要每个链接来存储额外的信息：文章的ID。我一直在处理的方式是将这些信息放在href链接中，如下所示：

<a class="article" href="#5">

然后，我使用jQuery查找a.article元素并附加适当的事件处理程序。（不要太在意可用性或语义，这只是一个例子）

无论如何，此方法有效，但闻起来有点香，并且根本无法扩展（如果click函数具有多个参数，会发生什么？如果其中一些参数是可选的，怎么办？）

显而易见的答案是在元素上使用属性。我的意思是，这就是他们的意思吧？（的种类）。

<a articleid="5" href="link/for/non-js-users.html">

在我最近的问题中，我问这种方法是否有效，事实证明，如果没有定义自己的DTD（不是），那么就不正确或无效。常见的回答是将数据放入class属性中（尽管这可能是由于我的选择不佳的示例所致），但是对我来说，这甚至更难闻。是的，它在技术上是有效的，但这不是一个很好的解决方案。

我过去使用的另一种方法是实际生成一些JS并将其插入到<script>标签中的页面中，从而创建与该对象相关联的结构。

var myData = {
    link0 : {
        articleId : 5,
        target : '#showMessage'
        // etc...
    },
    link1 : {
        articleId : 13
    }
};

<a href="..." id="link0">

但这可能是维持屁股的真正痛苦，并且通常非常混乱。

因此，为了解决这个问题，如何存储HTML标签的任意信息？

第3079篇《如何为某些HTML标签存储任意数据》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共10个回答
樱小胖Mandy 2020.03.23

在我以前的雇主那里，我们一直使用自定义HTML标记来保存有关表单元素的信息。问题是：我们知道用户被迫使用IE。

当时对于FireFox来说效果不佳。我不知道FireFox是否已更改此设置，但是请注意，读者的浏览器可能不支持将自己的属性添加到HTML元素。

如果您可以控制读者使用的浏览器（例如，公司的内部Web小程序），则请务必尝试一下。会疼什么，对吗？

Itachi 2020.03.23

一种可能是：

  • 创建一个新的div来保存所有扩展/任意数据
  • 做一些事情以确保此div不可见（例如CSS加上div的class属性）
  • 将扩展的/任意的数据放在该不可见的div内的[X] HTML标记内（例如，作为文本在表格的单元格中，或其他类似的内容）
番长Gil 2020.03.23

我主张使用“ rel”属性。XHTML进行验证，很少使用属性本身，并且可以有效地检索数据。

小小 2020.03.23

您可以使用您自己的随机元素（<span data-randomname="Data goes here..."></span>）的属性的数据前缀，但这仅在HTML5中有效。因此，浏览器可能会抱怨有效性。

您也可以使用<span style="display: none;">Data goes here...</span>标签。但是这种方式不能使用属性函数，并且如果css和js被关闭，那么这也不是一个整洁的解决方案。

但是我个人更喜欢以下内容：

<input type="hidden" title="Your key..." value="Your value..." />

在所有情况下，输入都将被隐藏，属性是完全有效的，并且如果它在<form>标签内，则不会被发送，因为它没有任何名称，对吗？最重要的是，这些属性确实很容易记住，并且代码看起来很好并且易于理解。您甚至可以在其中放置一个ID属性，因此您也可以轻松地使用JavaScript对其进行访问，并使用来访问键值对input.title; input.value。

老丝十三 2020.03.23

因此，应该有四个选择：

  1. 将数据放在id属性中。
  2. 将数据放入任意属性
  3. 将数据放在类属性中
  4. 将您的数据放在另一个标签中

http://www.shanison.com/?p=321

达蒙 2020.03.23

为什么不利用已有的有意义的数据，而不是添加任意数据？

即使用<a href="/articles/5/page-title" class="article-link">，然后您可以以编程方式获取页面上的所有文章链接（通过类名）和文章ID（将regex /articles\/(\d+)/与匹配this.href）。

乐米亚 2020.03.23

作为jQuery用户，我将使用Metadata插件。HTML看起来很干净，可以验证，并且您可以嵌入任何可以使用JSON表示法描述的内容。

古一 2020.03.23

换一种方式，我个人不会使用它，但是它可以工作（确保您的JSON有效，因为eval（）很危险）。

<a class="article" href="link/for/non-js-users.html">
    <span style="display: none;">{"id": 1, "title":"Something"}</span>
    Text of Link
</a>

// javascript
var article = document.getElementsByClassName("article")[0];
var data = eval(article.childNodes[0].innerHTML);
卡卡西Near 2020.03.23

任意属性无效，但在现代浏览器中绝对可靠。如果您通过javascript设置属性，那么您也不必担心验证。

另一种方法是在javascript中设置属性。jQuery 为此提供了一个很好的实用程序方法，或者您可以自己滚动。

古一西里 2020.03.23

您正在使用哪个版本的HTML？

在HTML 5中，使用以data-开头的自定义属性是完全有效的，例如

<div data-internalid="1337"></div>

在XHTML中，这不是真的有效。如果您处于XHTML 1.1模式，浏览器可能会抱怨它，但是在1.0模式下，大多数浏览器只会默默地忽略它。

如果我是你，我将遵循基于脚本的方法。您可以使其在服务器端自动生成，因此维护起来不会麻烦。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android