在另一个标签中使用标签的属性是可以的吗?

Question

我想知道在另一个没有此属性的标签中使用标签的属性是否有问题。

例如:在<video>属性中，我们有src。如果我放<p src="...">会有问题吗?我知道这是错的，但这只是一个问题!

我问这个是因为我可以使用javascript捕获p中的src属性。例子:

var tag = document.getElementsByTagName("p") 
for (var i = 0; i < tag.length; i++) {
alert(tag.item(i).getAttribute("src"))
}

<p src="...">Hello!</p>

我想知道这是否有限制，或者是否会有不兼容。

谢谢。

Answer 1

您可以使用带有data-前缀的属性。

自定义数据属性用于存储自定义数据、状态、注释以及类似于页面或应用程序的私有属性，对于这些属性或元素，没有更合适的属性或元素。

来源:https://html.spec.whatwg.org/multipage/dom.html custom-data-attribute

那么，在你的例子中，它可以是这样的:

var tag = document.getElementsByTagName("p") 
for (var i = 0; i < tag.length; i++) {
alert(tag.item(i).getAttribute("data-src"))
}

<p data-src="...">Hello!</p>

如果不这样做，将来可能会遇到兼容性问题。

Answer 2

无限制。事实上，在HTML5规范中，你可以定义自己的自定义节点。

实际上，向现有元素添加额外的属性(例如p)将产生最佳实践警告。

https://www.w3.org/TR/2011/WD-html5-20110525/elements.html elements-in-the-dom

然而，在data-*属性中有一个方便的地方用于自定义属性:

<p data-src='//custom/path.png'></p>

然后你有额外的奖励的jsdataset:

let $node = $('p')
$node.dataset.src == '//custom/path.png'

https://www.w3.org/TR/2011/WD-html5-20110525/elements.html embedding-custom-non-visible-data-with-the-data-attributes

但是你也可以发明你自己的节点:

<mycustomnode></mycustomnode>

除此之外——发疯吧!

Answer 3

最好避免使用不属于标签的属性。使用数据属性:

const tag = document.querySelector('p');
console.log({
foo: tag.dataset.foo,
moo: tag.dataset.moo
});

<p data-foo="bar" data-moo="goo">Hello dataset</b>

文档:https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes