一、元素類型分類
| 常量名 |
常量值 |
節(jié)點(diǎn)類型 |
描述 |
| Node.ELEMENT_NODE |
1 |
Element |
代表元素 |
| Node.ATTRIBUTE_NODE |
2 |
Attr |
代表屬性 |
| Node.TEXT_NODE |
3 |
Text |
代表元素或者屬性中的文本內(nèi)容 |
| Node.CDATA_SECTION_NODE |
4 |
CDATASection |
代表文檔中的CDATA部（不會由解析器解析的文本） |
| Node.ENTITY_PEFERENCE_NODE |
5 |
EntityReference |
代實(shí)體引用 |
| Node.ENTITY_NODE |
6 |
Entity |
代表實(shí)體 |
| Node.PROCESSING_INSTRUCTION_NODE |
7 |
Processinginstruction |
代表處理指令 |
| Node.COMMENT_NODE |
8 |
Comment |
代表注釋 |
| Node.DOCUMENT_NODE |
9 |
Document |
代表整個(gè)文檔（DOM樹的根節(jié)點(diǎn)） |
| Node.DOCUMENT_TYPE_NODE |
10 |
DocumentType |
向?yàn)槲臋n定義的實(shí)體提供接口 |
| Node.DOCUMENT_FRAGMENT_NODE |
11 |
DocumentFragment |
代表輕量級的Document對象（文檔的某個(gè)部分） |
| Node.NOTATION_NODE |
12 |
Notation |
代表DTD中的聲明符號 |
- 下面我們舉個(gè)例子，取出一些元素標(biāo)簽
<body>
<div id="box">
<button class="btn">按鈕</button>
<span id="span">
<a href="#">一個(gè)鏈接</a>
</span>
<p class="lk">我是段落標(biāo)簽</p>
<div>哈哈哈</div>
</div>
<script>
window.onload = function (ev) {
//1.獲取標(biāo)簽
var box = document.getElementById("box");
//2.獲取標(biāo)簽內(nèi)部的所有節(jié)點(diǎn)
var allNodeLists = box.childNodes;
//3.過濾元素節(jié)點(diǎn)
var newListArr = [];
allNodeLists.forEach(function (value,key,parent) {
// console.log(value);
console.log(value.nodeType);
if(value.nodeType === 1){//這里的意思就是把元素標(biāo)簽?zāi)贸鰜? newListArr.push(value);
}
});
console.log(newListArr);
}
</script>
</body>
二、節(jié)點(diǎn)CD
- 文檔加載過程補(bǔ)充講解：
- (1)onload:
window.onload = function(){
//當(dāng)頁面加載完成執(zhí)行
//當(dāng)也買你完全加載所有的內(nèi)容（包括圖像、腳本文件、CSS文件等）執(zhí)行
window.onunload = function(){
//當(dāng)用戶退出頁面時(shí)候執(zhí)行
}
三、DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D29_1_TagCD</title>
</head>
<body>
<div class = "box">
<p id="word">xiaoming</p>
<button id="btn">點(diǎn)我</button>
</div>
<script>
window.onload = function (ev) {
//CRUD操作
var box = document.getElementsByClassName("box")[0];
//1.創(chuàng)建節(jié)點(diǎn)
var img = document.createElement("img")//創(chuàng)建了一個(gè)img標(biāo)簽
img.src = "img/img_01.png";
box.appendChild(img);
var btn = document.getElementsByTagName("button")[0];
box.insertBefore(img,btn);
}
</script>
</body>
</html>
三、源碼：
- D28_1_GetAPI.html
- D29_1_TagCD.html
- 地址:
https://github.com/ruigege66/JavaScript/blob/master/D28_1_GetAPI.html
https://github.com/ruigege66/JavaScript/blob/master/D29_1_TagCD.html- 博客園：
https://www.cnblogs.com/ruigege0000/
- CSDN：
https://blog.csdn.net/weixin_44630050?t=1
- 歡迎關(guān)注微信公眾號：傅里葉變換，個(gè)人賬號，僅用于技術(shù)交流
|
