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节点树
节点层次
兄弟层级
父子层级
子节点的判断