原文: 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: