如何从使用 javascript html 标记中获取值？ [复制]答案

【问题标题】：How can I get a value from using javascript html tag? [duplicate]如何从使用 javascript html 标记中获取值？ [复制]
【发布时间】：2021-04-18 18:16:54
【问题描述】：

我想使用 javaScript 从 HTML 标记中获取值，
我正在尝试这样做

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <span id="year"> 2021 </span>
</body>
<script>
    const YEAR = document.getElementById('year');
    alert(YEAR);
</script>
</html>

我得到的是 [object HTMLSpanElement]
，而不是 2021 年的警报那么如何在 YEAR 变量中获得 2021 年？？

【问题讨论】：

这能回答你的问题吗？ Get a Div Value in JQuery你需要使用innerHTML,textContent或者innerText，你只是获取了整个元素，你需要提取内容。

标签： javascript html dom tags

【解决方案1】：

使用document 对象时，您可以访问数百个属性方法。您可以使用innerHTML() 检索带有选定id 属性的html value。

let year = document.getElementById('year').innerHTML;

【讨论】：

或textContent 或innerText，他使用了document.getElementById，所以他只有元素对象。所以这不是很好的解释。
谢谢你，现在我得到了我想要的东西

【解决方案2】：

您可以使用innerText、innerHTML 或textContent，如果我稍微更改您的代码，

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
    <span id="year"> <b>2021</b> </span>
    </body>
    <script>
        const YEAR1 = document.getElementById('year').innerHTML;
        const YEAR2 = document.getElementById('year').innerText;
        const YEAR3 = document.getElementById('year').textContent;
        alert("This is innerHTML :" + YEAR1 + "\n" + "This is innerText :" + YEAR2 + "\n" + "This is textContent :" + YEAR3 + "\n");
    </script>
    </html>

您可以看到innerText 或textContent 是最好的方法，因为innerHTML 在您的<span> 中返回字符串，并且在字符串中包含HTML（或XML）标记，包括任何间距，换行等

innerText 与textContent 非常相似，但是它们之间有重要的区别！简单地说，innerText 知道文本的呈现外观，而textContent 则不知道。

【讨论】：

虽然只有代码的答案可以解决他们在 SO 上不受欢迎的问题，但您应该解释这些变化，以便 OP 实际从中学到一些东西。
@ikiK 感谢并更新！

【解决方案3】：

const YEAR = document.getElementById('year').innerText;

HTMLElement 接口的 innerText 属性表示节点及其后代的“渲染”文本内容。作为一个 getter，它近似于用户使用光标突出显示元素的内容然后将其复制到剪贴板时将获得的文本。

有关更多详细信息，请查看 MDN 文档： HTMLElement.innerText

【讨论】：

虽然只有代码的答案可以解决他们在 SO 上不受欢迎的问题，但您应该解释这些变化，以便 OP 实际从中学到一些东西。
@ikiK 我希望现在好多了。