整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
来看html网页的代码和浏览器展现的结果（下图1和图2）：
图1
图2
然后对照着下图的DOM树，分析DOM的节点层次和定义：
除了html中的<!DOCTYPE>和<meta>声明外，
1.第一级是html文件中的根元素：<html></html>标签
2.第二级是根元素html下面的子元素：<head></head>和<body></body>标签
3.第三级是<head>元素的子元素：<title></title>标签以及
<body>元素的子元素：<a></a>和<h1></h1>标签
4.title元素中有一个文本“这是网页标题”；
a元素中有一个href属性和一个文本“这是链接”；
h1元素中有一个文本“这是网页内容中的标题”。
综上：
1.html文档是一个文档节点，
2.每个html元素是元素节点，
3.html元素内的文本是文本节点，
4.每个html属性是属性节点。
节点的层级关系用术语来描述：
父（parent）、子（child）和同胞（sibling）等。
在节点树中，顶端节点被称为根（root），在页面中对应的是<html></html>标签，
每个节点都有父节点、除了根（它没有父节点），<head></head>和<body></body>的父节点就是<html></html>，
一个节点可拥有任意数量的子节点，<body></body>的子节点有<a></a>和<h1></h1>，
同胞是拥有相同父节点的节点，<a></a>和<h1></h1>有相同的父节点，因此它俩就是同胞。
在之前介绍创建 Custom Elements 的代码中，有一个地方是比较繁琐的：Shadow DOM 中的每个子元素都是通过 document.createElement 方法创建的。就像下面这样的：
那到底有没有方法能简化这一步操作呢？答案是有的，就是我们今天要介绍的主角 —— Template。
引用 MDN 上的原话是：
HTML内容模板（<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用 JavaScript 实例化。
将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理**<template>**元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。
通过这个概念解释，我们可以知道关于 Templates 的以下几点：
Templates 是较早之前出现的，比 Web Components 更早。
Templates 除了全局属性（也就是所有 HTML 元素所共有的属性）外，只有一个私有属性 ：content，这个属性是只读的，返回 Templates 内部的文档片段对象及其 DOM 结构。
在控制台操控一下template，结果如下：
我们可以将 templateEle.content 当做一个正常的 document 对象来使用。
<body>
<h1>使用 Templates</h1>
<template>
<div>
这是 template 标签内的子节点内容
</div>
</template>
</body>
页面显示效果如下：
符合以上两点：被解析、不渲染。
如果想要将 Templates 中的节点内容加载到当前页面显示出来，我们可以使用一下 JS 代码实现：
// 获取 template 元素
const templateEle = document.querySelector("template");
// 获取 template 元素包含的文档片段
const content = templateEle.content;
// content 可以当做正常的 document 来使用
const node = content.querySelector("div");
// 追加节点到当前文档
document.body.appendChild(node);
最终效果如下：
但是这样操作的话，就存在一个缺陷，由于将 Templates 代码片段内部的 div 追加到了当前文档结构，所以 Templates 内部的 div 节点消失。
为了避免修改内容模板内部的 DOM 结构，我们可以先克隆模板内部的元素节点，再将克隆的节点追到到当前文档：
// 获取 template 元素
const templateEle = document.querySelector("template");
// 获取 template 元素包含的文档片段
const content = templateEle.content;
// content 可以当做正常的 document 来使用
const node = content.querySelector("div");
// 导入 node 到 当前文档
// 必须要有这一步
const cloneNode = document.importNode(node, true);
// 也可以使用 cloneNode
// const cloneNode = node.cloneNode(true);
// 追加节点到当前文档
document.body.appendChild(cloneNode);
Templates 可以将一些页面内容事先封装并且保存在 HTML 页面上，且不进行渲染，随后可以使用 JS 来操作 Templates。
以上就是 Templates 的有关知识点。
~
~ 本文完，感谢阅读！
~
学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！
大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！
、什么是节点
回顾概念:
文档:document
元素:页面中所有的标签,元素---element, 标签----元素---对象
节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node
根元素:html标签节点node | nodeType | nodeName | nodeValue |
元素节点 | 1 | 标签名（大写） | null |
属性节点 | 2 | 属性名 | 属性值 |
文本节点 | 3 | #text | 文本内容 |
CDATA节点 | 4 | #cdata-section | CDATA区域内容 |
实体引用名称节点 | 5 | 引用名称 | null |
实体名称节点 | 6 | 实体名称 | null |
处理指令节点 | 7 | target | entire content cluding the target |
注释节点 | 8 | #comment | 注释内容 |
文档节点 | 9 | #document | null |
文档类型节点 | 10 | doctype的名称 | null |
文档片段节点 | 11 | #document-fragment | null |
DTD声明节点 | 12 | 符号名称 | null |
****节点的属性:(可以使用标签--元素.出来,可以使用属性节点.出来,文本节点.点出来)
nodeType:节点的类型
nodeName:节点的名字
nodeValue:节点的值二、节点的获取（包含元素节点）
相关html代码
<div id="dv">
<span>这是div中的第一个span标签</span>
<p>这是div中的第二个元素,第一个p标签</p>
<ul id="uu">
<li>乔峰</li>
<li>鹿茸</li>
<li id="three">段誉</li>
<li>卡卡西</li>
<li>雏田</li>
</ul>
</div>获取父节点（属性）：
// 获取某节点的父级节点
node.parentNode
// 获取某节点的父级元素
node.parentElement获取子节点（属性）：
// 获取某节点的子节点
node.childNodes
// 获取某节点的子元素
node.children属性节点（方法）：
// 获取属性节点
node.getAttributeNode("name")获取其他相关节点（属性）—— 拓展：
// 获取某节点的第一个子节点
node.firstChild;//-----------------------IE8中是第一个子元素
// 获取某节点的第一个子元素
node.firstElementChild;//----------------IE8中不支持
// 获取某节点的最后一个子节点
node.lastChild;//------------------------IE8中是第一个子元素
// 获取某节点的最后一个子元素
node.lastElementChild;//-----------------IE8中不支持
// 获取某节点的前一个兄弟节点
node.previousSibling;
// 获取某节点的前一个兄弟元素
node.previousElementSibling;
// 获取某节点的后一个兄弟节点
node.nextSibling;
// 获取某节点的后一个兄弟元素
node.nextElementSibling;案例：点击按钮设置div中p标签改变背景颜色（掌握）
html和css代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 450px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="变色" id="btn" />
<div id="dv">
<span>这是span</span>
<p>这是p</p>
<span>这是span</span>
<p>这是p</p>
<span>这是span</span>
<p>这是p</p>
<span>这是span</span>
<a href="http://www.baidu.com">百度</a>
</div>
</body>
</html>JavaScript代码
*请认真填写需求信息，我们会在24小时内与您取得联系。
