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

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Simple DOM example</title>
  6.   </head>
  7.   <body>
  8.       <section>
  9.         <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.">
  10.         <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
  11.       </section>
  12.   </body>
  13. </html>

This fragment produces the following DOM structure:

htmlDOM树的更多相关文章

  1. 6_PHP AJAX MYSQL

    XAMPP套装软件: 包含Apache.MySQL.PHP等多个开源软件的集合. https://www.apachefriends.org/zh_cn/index.html 监听完整相应消息: Wi ...

  2. 补发————DOM与BOM

    什么是Dom? DOM是w3c(万维网联盟)的标准. DOM定义了HTML与ML文档的标准: w3c文档对象模型(DOM)是中立于平台与语言的接口,他允许程序和脚本动态访问和更新文档的内容.结构和样式 ...

  3. 富文本编辑器之游戏角色升级ing

    一.前言 想必大家看到这个标题,心中不禁会浮现几个问题: 什么是富文本编辑器? 富文本编辑器和游戏角色有什么关系? 为什么是升级ing? 什么是富文本编辑器--富文本编辑器集成了格式设置.媒体嵌入.社 ...

  4. Javascript | DOM\DOM树浅析

    DOM Document Object Model(文档对象模型) 定义了表示和修改文档所需的方法. DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml功能的一类对象的集合.也有人称D ...

  5. B树——算法导论(25)

    B树 1. 简介 在之前我们学习了红黑树,今天再学习一种树--B树.它与红黑树有许多类似的地方,比如都是平衡搜索树,但它们在功能和结构上却有较大的差别. 从功能上看,B树是为磁盘或其他存储设备设计的, ...

  6. ASP.NET Aries 入门开发教程8：树型列表及自定义右键菜单

    前言: 前面几篇重点都在讲普通列表的相关操作. 本篇主要讲树型列表的操作. 框架在设计时,已经把树型列表和普通列表全面统一了操作,用法几乎是一致的. 下面介绍一些差距化的内容: 1:树型列表绑定: v ...

  7. 再讲IQueryable<T>，揭开表达式树的神秘面纱

    接上篇<先说IEnumerable,我们每天用的foreach你真的懂它吗?> 最近园子里定制自己的orm那是一个风生水起,感觉不整个自己的orm都不好意思继续混博客园了(开个玩笑).那么 ...

  8. HDU1671——前缀树的一点感触

    题目http://acm.hdu.edu.cn/showproblem.php?pid=1671 题目本身不难,一棵前缀树OK,但是前两次提交都没有成功. 第一次Memory Limit Exceed ...

  9. 算法与数据结构(十一) 平衡二叉树（AVL树）

    今天的博客是在上一篇博客的基础上进行的延伸.上一篇博客我们主要聊了二叉排序树,详情请戳<二叉排序树的查找.插入与删除>.本篇博客我们就在二叉排序树的基础上来聊聊平衡二叉树,也叫AVL树,A ...

随机推荐

  1. keystone 认证深度研究分析

    一.Keystone Token深度概述 Keystone作为OpenStack项目基础认证模块,目前支持的token类型分别是uuid.pkiz.pki.fernet. 首先,简要叙述一下这四种类型 ...

  2. Python 随机数函数

    random.random random.random()用于生成一个0到1的随机符点数: 0 <= n < 1.0 描述 random() 方法返回随机生成的一个实数,它在[0,1)范围 ...

  3. linux服务器安装swoole扩展

    说明: swoole只能用在LInux,macos系统上,不能用作Windows系统上 2.0.12版本开始不再支持PHP5 安装方式一:pecl安装 适用于php7.0以上版本 centOS中: # ...

  4. Template(Updating)

    1.Splay (Tyvj1728) #include <bits/stdc++.h> using namespace std; ,INF=<<; ],sz[MAXN],cnt ...

  5. 鸟哥的私房菜：Bash shell(五)-数据流重导向

    数据流重定向 数据流重导向就是将某个指令执行后应该要出现在屏幕上的数据, 给他传输到其它的地方,例如档案或者是装置 (例如打印机之类的!)!这玩意儿在 Linux 的文字模式底下可重要的! 尤其是如果 ...

  6. 【BZOJ-3110】K大数查询 整体二分 + 线段树

    3110: [Zjoi2013]K大数查询 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 6265  Solved: 2060[Submit][Sta ...

  7. Git_Bug分支

    软件开发中,bug就像家常便饭一样.有了bug就需要修复,在Git中,由于分支是如此的强大,所以,每个bug都可以通过一个新的临时分支来修复,修复后,合并分支,然后将临时分支删除. 当你接到一个修复一 ...

  8. ARM JTAG 20

    http://infocenter.arm.com/help/index.jsp?topic=/com.arm.doc.dui0499b/BEHEIHCE.html he ARM JTAG 20 co ...

  9. tomcat ssi配置及升级导致ssi include错误问题解决

    最近tomcat升级版本时,遇到了ssi解析的问题,记录下解决的过程,还有tomcat ssi配置的要点. tomcat 配置SSI的两种方式 Tomcat有两种方式支持SSI:Servlet和Fil ...

  10. 普天通信JavaEE开发岗面试题

    1 EJB中有几种Bean,叙述有状态Bean和无状态Bean的差别. 答:EJB中有Session Bean,Entity Bean,以及 Message Driven Bean.这两种的 Sess ...