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

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. Django-url路由映射与views逻辑处理

    一.URL路由映射 路由映射模块,主要完成url与views视图函数的映射.当一个url请求到来时,会按照这个模块中的url地址从上到下进行匹配,如果匹配成功,将执行映射试图中的函数:反之将返回404 ...

  2. linux命令大全之cal命令详解(显示日历)

    cal命令可以用来显示公历(阳历)日历. 1．命令格式:cal [参数][月份][年份] 2．命令功能:用于查看日历等时间信息,如只有一个参数,则表示年份(1-9999),如有两个参数,则表示月份和年 ...

  3. Spring之Spring环境搭建

    Spring之Spring环境搭建 一.什么是Spring? Spring框架是由于软件开发的复杂性而创建的.Spring使用的是基本的JavaBean来完成以前只可能由EJB完成的事情.然而,Spr ...

  4. 【set】【multiset】Codeforces Round #484 (Div. 2) D. Shark

    题意:给你一个序列,让你找一个k,倘若把大于等于k的元素都标记为不可用,那么剩下的所有元素形成的段的长度相同,并且使得段的数量尽量大.如果有多解,输出k尽量小的. 把元素从大到小排序插回原位置,用一个 ...

  5. 【拉格朗日插值法】【找规律】【高精度】Gym - 101156G - Non-Attacking Queens

    题意:问你n*n的国际象棋棋盘上放3个互不攻击皇后的方案数. oeis……公式见代码内 //a(n) = 5a(n - 1) - 8a(n - 2) + 14a(n - 4) - 14a(n - 5) ...

  6. 河南省队选拔 HAOI2015 解题报告

      其实省选在四天前就已经结束了,但由于题目难度略大我到今天上午才补完所有题目……(捂脸逃)考场上很幸运,打完了所有我会写的部分分,最后Round1的110分 + Round2的70分,勉强算是没有被 ...

  7. Treap树理解

    title: Treap树理解 comments: true date: 2016-10-06 07:57:37 categories: 算法 tags: Treap树 树 Treap树理解 简介 随 ...

  8. hdu 1150 Machine Schedule 最少点覆盖

    Machine Schedule Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php? ...

  9. C#高级编程9-第2章 核心C#

    C#基础 使用C#命名编译器csc.exe,编译C#程序 变量 变量一般初始化后才能使用 类型判断弱类型var,根据初始值判断类型, 变量作用域,可以访问该代码的区域 类中定义的成员变量和属性,作用在 ...

  10. Linux性能监控分析命令（二）—sar命令介绍

    性能监控分析的命令包括如下: 1.vmstat 2.sar 3.iostat 4.top 5.free 6.uptime 7.netstat 8.ps 9.strace 10.lsof ======= ...