DOM节点详解

DOM节点之Node详解

定义

DOM(文档对象模型) 是针对HTML和XML文档的一个API(应用程序编程接口)

DOM描绘的是一个层次化的节点树，允许开发人员添加，修改和移除页面的某一部分

Node类型

属性：1、nodeType ，表示节点类型

规则：  1 -->Element类型    3 -->Text类型   8 -->Comment类型   9 -->Document类型

      2、 childNodes ，表示子节点集合，可以使用slice方法将NodeList转换为数组

      var arr = Array.prototype.slice.call(nodes,0);8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom核心概念</title>
</head>
<body>
    <div class="nav">
        <ul class="msg">
            <li>s</li>
            <li>f</li>
            <li>s</li>
            <li>c</li>
            <li>g</li>
        </ul>
    </div>
    <script>
        /*
            DOM(文档对象模型) 是针对HTML和XML文档的一个API(应用程序编程接口)
            DOM描绘的是一个层次化的节点树，允许开发人员添加，修改和移除页面的某一部分
            
        */
        let oNav=document.querySelector(".nav");
        let oMsg=document.querySelector(".msg");
        let oLi=document.querySelectorAll("li");//nodeList 只会包含元素 用oLi[0].childNodes还换包含换行符，数组下标就会变。
    </script>
</body>
</html>

window.onload = function(){
	    console.log(document.body.childNodes);   //获取所有子节点，包括各种类型的节点，返回NodeList类数组对象
	    //将类数组对象转换为数组对象
	    var tempArr = Array.prototype.slice.call(document.body.childNodes,0);
	    console.log(tempArr);
            //Text类型
	    var texts = tempArr.filter(function(item,index){
		return item.nodeType == 3;
	    });
	    console.log(texts);
	    //Element类型
	    var eles = tempArr.filter(function(item,index){
		    return item.nodeType == 1;
	    });
	    console.log(eles);
	    //Comment类型
	    var com = tempArr.filter(function(item,index){
		return item.nodeType == 8;
	    });
	    console.log(com); 
	    //Document类型
	    var docu = tempArr.filter(function(item,index){
		    return item.nodeType == 9;
	    });
	    console.log(docu);
 
        }
    </script>

DOM节点树

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EsPrzDpr-1592627856611)(C:\Users\dell\Desktop\我的前端博客\images\DOM.png)]$

节点层次

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JyZlMOVH-1592627856615)(C:\Users\dell\Desktop\我的前端博客\images\1111.png)]$

兄弟层级

$外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aHnxoeQ0-1592627856619)(C:\Users\dell\Desktop\我的前端博客\images\d.png)$

父子层级

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dJr6PgHG-1592627856622)(C:\Users\dell\Desktop\我的前端博客\images\c.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h0Ds59EQ-1592627856625)(C:\Users\dell\Desktop\我的前端博客\images\a.png)]$

子节点的判断

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qxF3p1S6-1592627856629)(C:\Users\dell\Desktop\我的前端博客\images\a'a.png)]$