DOM 知识点梳理（笔记）
Posted 不忘初心8090
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM 知识点梳理（笔记）相关的知识，希望对你有一定的参考价值。
1998年10月DOM1级规范成为了W3C的推荐标准，为基本的文档结构及查询提供了接口。
一、Node类型
每个节点都有个nodeType属性，表明了节点的类型。共有12种类型：
元素节点 Node.ELEMENT_NODE(1)
属性节点 Node.ATTRIBUTE_NODE(2)
文本节点 Node.TEXT_NODE(3)
CDATA节点 Node.CDATA_SECTION_NODE(4)
实体引用名称节点 Node.ENTRY_REFERENCE_NODE(5)
实体名称节点 Node.ENTITY_NODE(6)
处理指令节点 Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点 Node.COMMENT_NODE(8)
文档节点 Node.DOCUMENT_NODE(9)
文档类型节点 Node.DOCUMENT_TYPE_NODE(10)
文档片段节点 Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点 Node.NOTATION_NODE(12)
这12个类型并不完全受到浏览器的支持；而开发人员常用的就是前三个（元素节点，属性节点，文本节点）
if(someNode.nodeType==3){
//为了兼容ie，通常将noteType的属性值与数值进行比较
}
此外节点还有nodeNames和nodeValue这两个属性。而这二个属性的值完全取决于节点的类型。
1）对于nodeName来说
元素节点的 nodeName 是标签名称。
属性节点的 nodeName 是属性名称。
文本节点的 nodeName 是 #text。
文档节点的 nodeName 是 #document。
2）对于nodeValue来说
文本节点的nodeValue 属性包含文本。
对于属性节点的nodeValue 属性包含属性值。
文档节点的nodeVlaue为null。
元素节点是nodeVlaue为null。
1.1节点关系：
每个节点都有一个childNodes属性，其中保存着一个NodeList对象,它是基于DOM结构动态执行查询的结果而不是一张初次访问时的快照。
每个节点也都有个parentNode节点，该属性指向文档节点的父节点。childNodes列表中所有的节点都具有相同的父节点。而且它们之间都是同胞节点，可以通过previousSibling和nextSibling互相之间访问，父节点的firstChild和lastChild分别指向childcNodes列表的第一个和最后一个j节点。
1.2操作节点
appendChild()方法：
用于向父节点的chidNodes末尾添加一个节点。如果传入到appendChild()的节点已经是文档中的一部分了，那么该节点会从原来的位置转移到新的位置上。
例如：
<div id="ss">hi
<p>1</p>
<p>2</p>
<p>3</p>
</div> <script> var ss=document.getElementById("ss"); ss.appendChild(ss.firstChild); alert(ss.lastChild.nodeValue);//hi 第一个文本节点 变成了最后一个节点 </script>
insetBefore()方法：
这个方法接受二个参数：要插入的节点和作为参照的节点。插入后被插入的节点会变成参照节点的前一个同胞节点。
如果参照节点是null那么执行和appendChild相同的操作。
replaceChild()方法：
这个方法接受二个参数：要插入的节点和要替换的节点。返回替换的节点。
removeChild()方法：
这个方法接受一个参数，即要移除的节点。返回被移除的节点。
上面的四个方法在调用时，都是在某个节点的子节点上操作，所以都必须先取得它们的父节点！
cloneNode()方法：
该方法接受一个布尔型参数表示是否进行深浅负责，为true时执行深复制（复制节点及其整个子节点树），为false时执行浅复制（只复制节点本身）。
var ss=document.getElementById("ss");var tt=ss.cloneNode(true); ss.appendChild(tt);//复制完后，为他指定父节点，将它添加到文档中
二、Document类型
document对象是htmlDocument的一个实例，表示整个HTMl页面。
可以通过document.documentElement和document.body来取得对<html>和<body>的引用
文档信息：
document.title包含着<title>元素中文本的引用。
document.URl包含着页面完整的URl。
document.domain包含着页面的域名。它是可读取也可设置的，进而可以对二个页面进行通信设置。
document.referrer保存着链接到当前页面的那个页面的URl。
查找元素：
document.getElementById();
document.getElementsByTagName();
特殊集合：
document.anchors 包含文档中所有带name特性的<a>标签
document.forms 包含文档中所有的<form>元素
document.images 包含文档中所有的<img>元素
document.links 包含文档中所有带href特性<a>元素
文档写入：
document.write()或writeln()
可以在页面加载过程中动态的向页面加入内容。
三、Element类型
以上是关于DOM 知识点梳理（笔记）的主要内容，如果未能解决你的问题，请参考以下文章