DOM 元素和 HTML 元素之间是否总是存在一对一的关系？答案

【问题标题】：Is there always a 1-to-1 relationship between DOM elements and HTML elements?DOM 元素和 HTML 元素之间是否总是存在一对一的关系？
【发布时间】：2014-10-23 21:55:55
【问题描述】：

一个元素是否可能存在于 DOM 中但不存在于 HTML 中？反之亦然？

【问题讨论】：

标签： html dom web browser

【解决方案1】：

是的……

检查以下代码...

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    alert("Page is loaded");
    var t = document.getElementById("test");
    alert (t.innerText);
}
</script>
</head>

<body onload="myFunction()">
<h1>Hello World!</h1>
<myElement id="test"> dffsdsf </myElement>
</body>

</html>

myElement 不是 html 标记...

【讨论】：

尼克 - 以上是否回答了您的问题？
你是说“myElement”元素不会被浏览器添加到DOM，因为它不会将myElement标签识别为有效的HTML？
元素被添加到 DOM...我在 myElement 上尝试过 onclick=, class= 没有任何问题...所以，myElement 是浏览器完全识别的自定义标签...但是，它与 IE 存在兼容性问题...
对不起，我想我把你的问题弄错了......我认为你正在尝试的可能是不可能的......

【解决方案2】：

当然！

JavaScript 操作 DOM，因此它可以删除和添加元素，而无需将它们放在源代码中。
您的浏览器会自动将缺失的元素添加到 DOM 中，例如省略的 <html> <head> <body> <tbody> 和一堆其他元素。
Shadow DOM 是 DOM 的一种特殊情况（例如，<video> 元素上的控件是 shadow DOM）。

【讨论】：

但是浏览器不会更改 HTML 以反映它对 DOM 所做的更改吗？
不。如果您在页面上查看源代码，您将看到原始的 HTML 源代码，那里没有 DOM 更改。您可以使用相应浏览器的开发人员工具（使用 Chrome、F12）查看 DOM 更改
好的，谢谢！因此，在 Chrome 开发人员工具中，“元素”选项卡显示了 DOM 的当前状态（可以通过用户编写的 JavaScript 或由浏览器自动更新，如您所述），而“源”选项卡显示 HTML 源代码因为它最初是由浏览器加载和解析的。对吗？