这是第38篇笔记！！！
一，Comment类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Comment类型</title>
</head>
<body>
<div id="myDiv"><!--这是一个注释--></div>
<script>
/*
1，nodeType: 8
2, nodeName: '#comment'
3, nodeValue: 注释的内容 【重点】
4，parentNode：Document or Element
5, 不支持（没有）子节点
*/
var div = document.getElementById('myDiv');
console.log(div);
var comment = div.firstChild;
console.log(div.childNodes);
// console.log(div.parentNode);
// (1) 可以通过nodeValue or data 属性取得注释的内容
console.log(comment.data); // 这是一个注释
console.log(comment.nodeValue); // 这是一个注释
// (2) 使用document.createComment()并为其传递注释文本可以创建注释节点
var comment = document.createComment('this is a added comment!'); // 浏览器不会识别在</html>标签后边的注释
// 很少用！！
// FireFox, Safari, Chrome and Opera ，可以访问Comment 类型的构造函数和原型
// IE8 中， 注释节点被视为标签名为“！”的元素
</script>
</body>
</html>
二，CDATASection类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CDATASection类型</title>
</head>
<body>
<script>
/*
CDATASection类型针对基于“XML的文档”，表示CDATA区域
CDATASection类型继承自Text类型
跟Comment类似
1, nodeType: 4
2, nodeName: '#cdata-section'
3, nodeValue: CDATA区域中的内容分
4, parentNode: Document or Element
5, 不支持（没有）子节点
【注意】 CDATA区域只会出现在XML文档中，因此多数浏览器会把CDATA区域错误地解析为Comment or Element
*/
</script>
</body>
</html>
三，DocumentType类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DocumentType类型</title>
</head>
<body>
<script>
/*
DocumentType类型并不常用！！！
DocumentType类型包含着与文档的doctype有关的所有信息
1, nodeType: 10
2, nodeName: doctype的名称
3, nodeValue: null
4, parentNode: Document
5, 不支持（没有）子节点
在DOM1级中，DocumentType对象不能动态创建，而只能通过解析文档代码的方式来创建。
支持DocumentType对象的浏览器会把他保存在document.doctype中
因为浏览器使用的都是HTML或XHTML文档类型
DOM1级描述了DocumentType对象的3个属性：
a, name: 文档类型的名称 <!DOCTYPE之后的文本
b, entitles: 由文档类型描述的实体NamedNodeMap对象 （空列表）
c, notations: 由文档类型描述的符号NamedNodeMap对象 （空列表）
IE问题多！！！
*/
alert(document.doctype.name);
</script>
</body>
</html>
四，DocumentFragment类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DocumentFragment类型</title>
</head>
<body>
<ul id="myList"></ul>
<script>
/*
在所有的节点类型中，只有DocumentFragment在文档中没有对应的标记
DOM规定文档片段是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外资源
不能把文档片段直接添加到文档中，但可以将他作为一个“仓库”来使用。即可以在里面保存将来可能会添加到文档中的节点
1, nodeType: 11
2, nodeName: '#document-fragment'
3, nodeValue: null
4, parentNode: null
5, 子节点: Element,ProcessingInstruction,Comment,Text,CDATASection or EntityReference
*/
// 创建文档片段
var fragment = document.createDocumentFragment();
console.log(fragment.nodeType);
var ul = document.getElementById('myList');
var li = null;
for(var i=0;i<3;i++){
li = document.createElement('li');
li.appendChild(document.createTextNode('item' + (i+1)));
fragment.appendChild(li);
}
ul.appendChild(fragment);
// 在将文档片段作为参数传递给appendChild() and insertBefore中时，实际上只会将该文档片段的所有子节点添加到相应的位置上；
// 文旦片段本身不属于文档树的一部分
console.log(ul.childNodes);
// 文档片段继承了Node的所有方法！！
// 如果将文档中的节点添加到文档片段中，就会从文档树中移除这个节点，也不会从浏览器中再看到该节点
// 反之，将文档片段中的所有子节点添加到文档中，这个子节点将被删除并转移到文档中
// 添加到文档片段的新节点不属于文档树
</script>
</body>
</html>
五，Attr类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Attr类型</title>
</head>
<body>
<div id="div1">fdfakdfldjadf</div>
<script>
/*
元素的特性在DOM中以Attr类型来表示
在所有的浏览器中，都可以访问Attr类型的构造函数和原型
特性是存在于元素的attributes属性中的节点
尽管也是节点，但特性不认为是DOM文档树的一部分！！！
1, nodeType: 2
2, nodeName: 特性的名字
3, nodeValue: 特性的值
4, parentNode: null
5, 不支持（没有）子节点
6, 在XML中子节点可以是Text or EntityReference
Attr对象有3个属性：
a, name == nodeName
b, value == nodeValue
c, specified 布尔值，用以区别特性，是默认的
*/
// 使用document.createAttribute()并传入特性的名称可以创建新的特性节点
var div = document.getElementById('div1');
var attr = document.createAttribute('align');
console.log(attr.nodeType);
attr.value = 'center';
div.setAttributeNode(attr); // 将创建的特性添加到元素中，必须如该行书写
// 等价的3种书写
console.log(div.attributes['align'].value); // center
console.log(div.getAttributeNode('align').value); // center
// attributes属性和getAttributeNode()方法都会返回对应特性的Attr节点
console.log(div.getAttribute('align')); // center
// getAttribute()则只会返回特性的值
// 【注意】并不建议直接访问特性节点！！
// getAttribute(), setAttribute(), removeAttribute()更方便！！
</script>
</body>
</html>
节点层次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>节点层次</title>
<script>
/*
DOM是针对HTML和XML文档的一个API
本章主要谈论与浏览器中HTML页面相关的DOM1级的特性和应用
IE中的所有DOM对象都是以COM对象的形式实现的!!!
1，DOM可以将任何HTML和XML文档描绘成一个由多层节点构成的结构
2，节点之间的关系构成“层次”，而所有的页面标记则表现为一个以特定节点为根节点的树形结构
3，对于HTML，文档节点只有一个子节点，就是<html>元素，即“文档元素”
4，文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中，每个文档只有“一个”文档元素
5，对于XML，任何元素都可以是文档元素
6，每一段标记都可以通过文档树中的一个节点来表示！！！
元素 --> 元素节点 --> Element类型
特性 --> 特性节点 --> Attr类型
文档类型 --> 文档类型节点 --> DocumentType类型
注释 --> 注释节点 --> Comment类型
*/
</script>
</head>
<body>
</body>
</html>
让学习“上瘾”，成为更好的自己！！！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
