一、node类型
nodeType属性:表明节点的类型
nodeName
nodeValue
2、节点关系
childNode
parentNode
previousSibling
nextSibling
firstChild
lastChild
hasChildNodes():这个方法在节点包含一或多个子节点的情况下返回true
DOM节点之间的关系如下图所示:
DOM节点关系.PNG
3、操作节点
appendChild(node):用于向childNodes 列表的末尾添加一个节点。返回值是插入的节点。
var obody = document.body;
var oP = document.getElementById("p");
var node = document.createElement("strong"); //创建一个元素节点
var textNode = document.createTextNode("I am strong");//创建一个文本节点
node.appendChild(textNode); // 文本节点挂载到元素节点strong上
var returnedNode = obody.appendChild(node); //strong 挂载到body节点上
console.log(returnedNode == node); //true
console.log(obody.lastChild == node); //true
注意：如果传入到appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置。即使可以将DOM树看成是由一系列指针连接起来的，但任何DOM节点也不能同时出现在文档中的多个位置上。
insertBefore(newChild, refChild)
这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点（previousSibling），同时被方法返回。
replaceChild(newChild, oldChild)
接受的两个参数是：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置。
removeChild()
与使用replaceChild()方法一样，通过removeChild()移除的节点仍然为文档所有，只不过在文档中已经没有了自己的位置。
4、其他方法
cloneNode(boolean)
用于创建调用这个方法的节点的一个完全相同的副本。
注意：cloneNode()方法不会复制添加到DOM 节点中的JavaScript 属性，例如事件处理程序等。这个方法只复制特性、（在明确指定的情况下也复制）子节点，其他一切都不会复制。IE 在此存在一个bug，即它会复制事件处理程序，所以我们建议在复制之前最好先移除事件处理程序。
normalize()
这个方法唯一的作用就是处理文档树中的文本节点。
二、Document类型
JavaScript 通过Document 类型表示文档。在浏览器中，document 对象是HTMLDocument（继承自Document 类型）的一个实例，表示整个HTML 页面。而且，document 对象是window 对象的一个属性，因此可以将其作为全局对象来访问。Document 节点具有下列特征：
nodeType 的值为9；
nodeName 的值为"#document"；
nodeValue 的值为null；
parentNode 的值为null；
ownerDocument 的值为 null；
其子节点可能是一个DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction或Comment。
1、文档的子节点
documentElement属性
该属性始终指向HTML 页面中的<html>元素
documentBody属性
指向body元素
document.doctype
var doctype = document.doctype; //取得对<!DOCTYPE>的引用
2、文档信息
document.title
document.URL
document.domain 可以设置
document.referrer 获取来源页面的URL
由于跨域安全限制， 来自不同子域的页面无法通过JavaScript 通信。而通过将每个页面的document.domain 设置为相同的值，这些页面就可以互相访问对方包含的JavaScript 对象了
3、查找元素
document.getElementById
document.getElementsByTagName
getElementsByName()
4、特殊集合
document.anchors，包含文档中所有带name 特性的<a>元素；
document.applets，包含文档中所有的<applet>元素，因为不再推荐使用<applet>元素，所以这个集合已经不建议使用了
document.forms，包含文档中所有的<form>元素
document.images，包含文档中所有的<img>元素
document.links，包含文档中所有带href 特性的<a>元素。
5、DOM一致性检测
document.implementation.hasFeature(feature, version)
6、文档写入
document.write()
document.writeIn()
document.open()
document.close()
三、Element类型
Element 类型用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问。
- nodeType 的值为1；
- nodeName 的值为元素的标签名；
- nodeValue 的值为null；
- parentNode 可能是Document 或Element；
- 其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection 或EntityReference。
nodeNametagName访问元素的标签名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="myDiv"></div>
<script>
var div = document.getElementById("myDiv");
console.log(div.tagName); //"DIV"
console.log(div.tagName === div.nodeName); //true
</script>
</body>
</html>
这里的元素标签名是div，它拥有一个值为"myDiv"的ID。可是，div.tagName 实际上输出的是"DIV"而非"div"。在HTML 中，标签名始终都以全部大写表示；而在XML（有时候也包括XHTML）中，标签名则始终会与源代码中的保持一致。假如你不确定自己的脚本将会在HTML 还是XML 文档中执行，最好是在比较之前将标签名转换为相同的大小写形式
1、HTML元素
id，元素在文档中的唯一标识符。
title，有关元素的附加说明信息，一般通过工具提示条显示出来。
lang，元素内容的语言代码，很少使用。
dir，语言的方向，值为"ltr"（left-to-right，从左至右）或"rtl"（right-to-left，从右至左），也很少使用。
className，与元素的class 特性对应，即为元素指定的CSS类。没有将这个属性命名为class，是因为class 是ECMAScript 的保留字
var div = document.getElementById("myDiv");
console.log(div.id);
console.log(div.className);
console.log(div.title);
console.log(div.lang);
console.log(div.dir);
2、获取特性
getAttribute()
注意：有两类特殊的特性，它们虽然有对应的属性名，但属性的值与通过getAttribute()返回的值并不相同
第一类：style属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"
style="padding:10px;"
></div>
<script>
var div = document.getElementById("myDiv");
console.log(div.style == div.getAttribute("style")); //false
</script>
</body>
</html>
3、设置特性
setAttribute()
这个方法接受两个参数：要设置的特性名和值。如果特性已经存在，setAttribute()会以指定的值替换现有的值；如果特性不存在，setAttribute()则创建该属性并设置相应的值。
注意：这里我们要区分[特性]和][属性]的概念。
- 特性：比如class、id……
- 属性：包括特性，可以自定义属性。
当我们为一个元素添加一个属性时，如果是特性，则可以直接添加，如果是自定义属性，必须用setAttribute()
removeAttribute
这个方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，而且也会从元素中完全删除特性
4、attributes属性
5、创建元素
document.createElement()
6、元素的子节点
childNodes
四、Text类型
文本节点由Text 类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML 字符，但不能包含HTML 代码。Text 节点具有以下特征：
nodeType 的值为3；
nodeName 的值为"#text"；
nodeValue 的值为节点所包含的文本；
parentNode 是一个Element；
不支持（没有）子节点。
nodeValue 属性或data 属性: 访问Text节点中包含的文本
appendData(text)：将text 添加到节点的末尾。
deleteData(offset, count)：从offset 指定的位置开始删除count 个字符。
insertData(offset, text)：在offset 指定的位置插入text。
replaceData(offset, count, text)：用text 替换从offset 指定的位置开始到offset+count 为止处的文本。
splitText(offset)：从offset 指定的位置将当前文本节点分成两个文本节点。
substringData(offset, count)：提取从offset 指定的位置开始到offset+count 为止处的字符串。
1、创建文本节点
document.createTextNode(text)
2、规范化文本节点
normalize()
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("hello! Tom");
element.appendChild(textNode);
var anotherTextNode = document.createTextNode("Jerry");
element.appendChild(anotherTextNode);
document.body.appendChild(element);
console.log(element.childNodes.length); //2
element.normalize();
console.log(element.childNodes.length); //1
console.log(element.firstChild.nodeValue); //hello! TomJerry
3、分割文本节点
Text 类型提供了一个作用与normalize()相反的方法：splitText()。这个方法会将一个文本节点分成两个文本节点，即按照指定的位置分割nodeValue 值。原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本。这个方法会返回一个新文本节点，该节点与原节点的parentNode 相同。来看下面的例子。
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("hello Tom");
element.appendChild(textNode);
document.body.appendChild(element);
var newNode = element.firstChild.splitText(5);
console.log(element.firstChild.nodeValue); //hello
console.log(newNode.nodeValue); // Tom
console.log(element.childNodes.length); //2
五、Attr类型
attr表示特性类型
网友评论