JavaScript连载29-元素类型获取、节点CD

本文链接：https://blog.csdn.net/weixin_44630050/article/details/108112124

一、元素类型分类

常量名	常量值	节点类型	描述
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>

29.1

二、节点CD

文档加载过程补充讲解：
(1)onload:

window.onload = function(){
	//当页面加载完成执行
	//当也买你完全加载所有的内容（包括图像、脚本文件、CSS文件等）执行

(2)onunload:

window.onunload = function(){
	//当用户退出页面时候执行
}

三、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>