JavaScript連載29-元素類型獲取、節點CD

時間 2020-08-20

標籤 javascript 連載元素類型獲取節點欄目 JavaScript 简体版

原文原文鏈接

1、元素類型分類

常量名	常量值	節點類型	描述
Node.ELEMENT_NODE	1	Element	表明元素
Node.ATTRIBUTE_NODE	2	Attr	表明屬性
Node.TEXT_NODE	3	Text	表明元素或者屬性中的文本內容
Node.CDATA_SECTION_NODE	4	CDATASection	表明文檔中的CDATA部（不會由解析器解析的文本）
Node.ENTITY_PEFERENCE_NODE	5	EntityReference	代實體引用
Node.ENTITY_NODE	6	Entity	表明實體
Node.PROCESSING_INSTRUCTION_NODE	7	Processinginstruction	表明處理指令
Node.COMMENT_NODE	8	Comment	表明註釋
Node.DOCUMENT_NODE	9	Document	表明整個文檔（DOM樹的根節點）
Node.DOCUMENT_TYPE_NODE	10	DocumentType	向爲文檔定義的實體提供接口
Node.DOCUMENT_FRAGMENT_NODE	11	DocumentFragment	表明輕量級的Document對象（文檔的某個部分）
Node.NOTATION_NODE	12	Notation	表明DTD中的聲明符號

下面咱們舉個例子，取出一些元素標籤

<body>
<div id="box">
    <button class="btn">按鈕</button>
    <span id="span">
        <a href="#">一個連接</a>
    </span>
    <p class="lk">我是段落標籤</p>
    <div>哈哈哈</div>
</div>
<script>
    window.onload = function (ev) {
        //1.獲取標籤
        var box = document.getElementById("box");
        //2.獲取標籤內部的全部節點
        var allNodeLists = box.childNodes;
        //3.過濾元素節點
        var newListArr = [];
        allNodeLists.forEach(function (value,key,parent) {
            // console.log(value);
            console.log(value.nodeType);
            if(value.nodeType === 1){//這裏的意思就是把元素標籤拿出來
                newListArr.push(value);
            }

        });
        console.log(newListArr);
    }
</script>
</body>

2、節點CD

文檔加載過程補充講解：
(1)onload:

window.onload = function(){
	//當頁面加載完成執行
	//當也買你徹底加載全部的內容（包括圖像、腳本文件、CSS文件等）執行

(2)onunload:

window.onunload = function(){
	//當用戶退出頁面時候執行
}

3、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">點我</button>
    </div>
<script>
    window.onload = function (ev) {
        //CRUD操做
        var box = document.getElementsByClassName("box")[0];
        //1.建立節點
        var img = document.createElement("img")//建立了一個img標籤
        img.src = "img/img_01.png";
        box.appendChild(img);
        var btn = document.getElementsByTagName("button")[0];
        box.insertBefore(img,btn);
    }
</script>
</body>
</html>

3、源碼：

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
歡迎關注微信公衆號：傅里葉變換，我的帳號，僅用於技術交流

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。