如何用javascript读取html desc参数？

Question

在这个链接中：

价值

我学习了如何读取HTML元素的参数值，但当我试图获取链接的desc值时，它输出了“未定义”。它与标题一起工作，所以我不明白为什么它不适用于desc

HTML：

<a href="https://www.google.com/" desc="google" title="Google" id="myLink">Google</a>

和JavaScript：

let x = document.getElementById("myLink").desc;
console.log("value of desc: " + x);

还有别的方法来解读它的价值吗？我更喜欢简单的javascript，但是任何东西都会有帮助。

Answer 1

因为您的desc是非标准属性，所以它不在DOM对象中。

为此请使用getAttribute

​

let x = document.getElementById("myLink").getAttribute('desc');
console.log("value of desc: " + x);

<a href="https://www.google.com/" desc="google" title="Google" id="myLink">Google</a>

​

使用自定义属性的正确方法将通过JS数据集

然后，您的属性将类似于data-desc="google"，并访问它：

// JS
document.getElementById("myLink").dataset.desc
document.getElementById("myLink").dataset.desc = 'bing'

// jQuery
$('#myLink').data('desc')
$('#myLink').data('desc', 'bing')

// CSS attr() :before|:after only
#myLink::before {
  content: attr(data-desc);
}

// CSS selector
#myLink[data-desc='google']

Answer 2

让我们先把一些术语记下来，这可能会帮助您理解正在发生的事情。HTML没有“参数”。有“元素”，它们可能有也可能没有“属性”。在JavaScript中，您有“对象”，而它们具有“属性”。

HTML由与JavaScript不同的机制处理(解析)，当您要求JavaScript“引擎”处理HTML元素时，它会创建该“元素”的“对象”表示，并且几乎所有的“属性”都被复制到新对象的“属性”中。

但是，没有像"desc“这样的HTML属性，所以当创建JavaScript对象时，它不会获得一个desc属性供您访问。如果您尝试了一个与有效属性对齐的不同属性，它就会工作：

​

var link = document.getElementById("myLink");

console.log(link.href); // works
console.log(link.title); // works
console.log(link.desc)  // doesn't work

<a href="https://www.google.com/" desc="google" title="Google" id="myLink">Google</a>

​

这里有些事情很棘手，虽然HTML元素的JavaScript对象表示没有用非标准属性创建，但是通过直接访问HTML元素的属性，仍然可以通过JavaScript访问HTML元素的非标准属性：

​

var link = document.getElementById("myLink");

console.log(link.getAttribute("desc")); 

<a href="https://www.google.com/" desc="google" title="Google" id="myLink">Google</a>

​

但是实际上有一种方法可以创建有效的自定义属性，并通过JavaScript使用属性访问它们，这些属性从data-开始，然后您可以在其上附加一个自定义属性名。通过这个接口，有一种标准的方法可以通过表示dataset元素的所有JavaScript对象所具有的JavaScript属性访问这些属性：

​

var link = document.getElementById("myLink");

// You can access a data- attribute through the
// dataset property
console.log(link.dataset.desc);

<a href="https://www.google.com/" data-desc="google" title="Google" id="myLink">Google</a>

​

并且，帮你自己一个大忙，尽可能远离W3Schools。该网站是众所周知的不完整，过时，或只是简单的不正确的信息。相反，要向JavaScript、Mozilla开发人员网络(MDN)上最广为人知的权威学习。