<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 文档树 </title>
</head>
<body>
文档：document，网页中的所有内容其实都是在document里面
所有内容都是document开枝散叶而来，这种关系像树一样，所以我们把它称之为文档树
如果我要给body里面再加一个a标签，其实只是相当于在body这个分支下面再挂一个分支a
节点：网页中的所有内容都叫节点。 标签、属性、文本、注释都叫内容，这些内容都称之为节点
元素：其实就是标签
节点有三大属性（三大特征）
nodeType：节点类型
nodeName：节点名字
nodeValue：节点值
元素节点的特征
nodeType：1
以后如果我拿到一个节点，我不知道它是什么，就可以判断它的nodeType是否为1，如果为1，就代表是标签
nodeName：大写的标签名
以后我拿到一个节点，我确定它是一个标签，但是不知道是哪个标签，就可以通过nodeName来判断
nodeValue：null
<div class="box">我是div1</div>
<div id="box" class="boxcc">我是div2</div>
<ul>
我是文字
<!-- 我是注释 -->
<li>隔壁老王1</li>
<li>隔壁老王2</li>
<li>隔壁老王3</li>
<li>隔壁老王4</li>
<li>隔壁老王5</li>
</ul>
<script>
// 元素节点
var box = document.getElementsByClassName('box')[0];
/*
元素节点的特征
nodeType：1
以后如果我拿到一个节点，我不知道它是什么，就可以判断它的nodeType是否为1，如果为1，就代表是标签
nodeName：大写的标签名
以后我拿到一个节点，我确定它是一个标签，但是不知道是哪个标签，就可以通过nodeName来判断
nodeValue：null
*/
console.log(box.nodeType); //1
console.log(box.nodeName); //DIV
console.log(box.nodeValue); //null
// 属性节点
var box = document.getElementById('box');
// 这个仅仅只是拿到属性值
// console.log(box.id);
/* 属性节点的节点特征：
nodeType: 2
nodeName：属性名
nodeValue：属性值
*/
// 拿属性需要用 attibutes
console.log(box.attributes[0].nodeType); //2
console.log(box.attributes[0].nodeName); //属性名 id (小写)
console.log(box.attributes[0].nodeValue); //属性值 box
//文本节点 //找到ul
var ul = document.getElementsByTagName('ul')[0];
// 拿文本节点不能直接拿到， 只通过它所在的父元素拿到
// childNodes： 拿到子节点
// 文本特征：
// nodeType: 3
// nodeName: #text
// nodeValue: 文本内容
console.log(ul.childNodes[0].nodeType); //3
console.log(ul.childNodes[0].nodeName); //#text
console.log(ul.childNodes[0].nodeValue); //文本的内容
// 注释节点 ,找到ul
var ul = document.getElementsByTagName('ul')[0];
console.log(ul.childNodes);
// 注释特征：
// nodeType: 8
// nodeName: #comment
// nodeValue:注释的内容
console.log(ul.childNodes[1].nodeType); //8
console.log(ul.childNodes[1].nodeName); //#comment
console.log(ul.childNodes[1].nodeValue); //注释的内容
// 找特殊元素
// document.documentElement 找html
// document.body 找body
// document.head 找head
// document：就是文档
// 节点特征：
// nodeType:9
// nodeName:#document
// nodeValue:null
// 找特殊元素
console.log(document.body.nodeType); //1
console.log(document.body.nodeName); //BODY
console.log(document.body.nodeValue); //null
//document.documentElement拿到html
console.log(document.documentElement.nodeType); //1
console.log(document.documentElement.nodeName); //HTML
console.log(document.documentElement.nodeValue); //null
//document.head找head
console.log(document.head.nodeType); //1
console.log(document.head.nodeName); //HEAD
console.log(document.head.nodeValue); //null
// document
console.log(document.nodeType); //9
console.log(document.nodeName); //#document
console.log(document.nodeValue); //null
</script>
</body>
</html>
网友评论