htmlDOM树
原文： https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
Shadow DOM API 研究一下：
html 的DOM树结构如下图，
每两个node之间会有一个text, node里面也有text和子node.
----------------------------------------------------------------------------------------------
This article assumes you are already familiar with the concept of the DOM (Document Object Model) — a tree-like structure of connected nodes that represents the different elements and strings of text appearing in a markup document (usually an HTML document in the case of web documents). As an example, consider the following HTML fragment:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple DOM example</title>
</head>
<body>
<section>
<img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
<p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
</section>
</body>
</html>This fragment produces the following DOM structure:
