整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
來看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小時內與您取得聯系。
