除IE外的浏览器是将换行符作为内容的文本节点。而元素的话，nodeType为1。下面是查找它们的实用方法：
复制代码 代码如下: lastSibling:function{
var tempObj = node.parentNode.lastChild; while(tempObj.nodeType!=1 &&
tempObj.previousSibling!=null) { tempObj=tempObj.previousSibling; }
return ?tempObj:false; }
这是《深入浅出JavaScript》书中DOMhelp库中lastSibling方法的源码。与
mootools 库中实现源码差不多： 复制代码
代码如下: ‘last-child’: function(){ var element = this; while ((element
= element.nextSibling)){ if (element.nodeType == 1) return false; }
return true; } 这是在 Mootools 1.2.4 源码中的 last-child() 方法。
前言
DOM操作在JS中可以说是非常常见了吧，很多网页的小功能的实现，比如一些元素的增删操作等都可以用JS来实现。那么在DOM中我们需要知道些什么才能完成一些功能的实现呢？今天这篇文章就先简单的带大家入一下JS中DOM操作的门吧！！
1、获取元素节点
DOM的作用是将网页转为一个javascript对象，从而可以使用javascript对网页进行各种操作。浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构。DOM的最小组成单位叫做节点由12种类型的节点组成。
奥门威尼斯网址，一、DOM树的节点
getElementById()：获取指定唯一id的元素。
属性
1、 DOM节点分为三大类: 元素节点、属性节点和文本节点。
getElementByTagName()：获取指定元素标签名的元素数组。
一般地，节点至少拥有nodeType、nodeName和nodeValue这三个基本属性。
属性节点和文本节点都属于元素节点的子节点。
因此操作时，需先选中元素节点，再修改属性和文本。
getElementByName()：获取具有指定属性name的元素数组。
节点类型不同，这三个属性的值也不相同
1、 使用getElement系列方法：
2、子节点
nodeType
具体的HTML代码如下图：
element.childNodes：返回该元素的子节点数组。注意：换行在浏览器中作为text节点，需要进行过滤
nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值，12种类型分别对应1到12的常数值
//通过ID来查看元素属性var li = document.getElementById; //通过类名来查看元素属性var lis1 = document.getElementsByClassName;//通过名字来查看元素属性var lis2 = document.getElementsByName;//通过标签名来查看元素属性var lis3 = document.getElementsByTagName;
element.firstChild：该元素的第一个子节点。
元素节点 Node.ELEMENT_NODE
① ID不能重名，如果ID重复，只能取到第一个。
element.lastChild：该元素最后一个子节点。
属性节点 Node.ATTRIBUTE_NODE
② 获取元素节点时，必须等到DOM树加载完成后才能获取。
3、父节点
文本节点 Node.TEXT_NODE
a.将JS写在文档最后；
element.parentNode
CDATA节点 Node.CDATA_SECTION_NODE
b.将代码写入window.onload函数中；
4、兄弟节点
实体引用名称节点 Node.ENTRY_REFERENCE_NODE
③
通过getElements系列取到的为数组格式，操作时必须取到其中的每一个元素，才能进行操作，而不能直接对数组进行操作。
element.previousSibling：返回相同的树层级中的前一个节点，如果没有，则为null
实体名称节点 Node.ENTITY_NODE
document.getElementsByTagName[0].click = function(){}
element.nextSibling：返回相同的树层级中的后一个节点，如果没有，则为null
处理指令节点 Node.PROCESSING_INSTRUCTION_NODE
④
这一系列方法，也可以先选中一个DOM节点，在从选中的DOM节点中，选择需要的节点：
5、创建节点
注释节点 Node.COMMENT_NODE
document.getElementById.getElementsByTagName;
createElement() 按指定标签名创建节点
文档节点 Node.DOCUMENT_NODE
① 传入一个选择器名称，返回第一个找到的元素。 通常用于查找ID：
6、复制节点
文档类型节点 Node.DOCUMENT_TYPE_NODE
var dq1 = document.querySelector;
clonedNode = Node.cloneNode 传入布尔值，true表示复制该节点下的所有子节点
文档片段节点 Node.DOCUMENT_FRAGMENT_NODE
②
传入一个选择器名称，返回所有找到的元素，无论找到几个，都返回数组格式。这种方法比较全能，不管什么属性都可以准确地找到。
7、加入节点
DTD声明节点 Node.NOTATION_NODE
var dqs1 = document.querySelectorAll;
parentNode.appendChild 将新节点加入到子节点末尾
DOM定义了一个Node接口，这个接口在javascript中是作为Node类型实现的，而在IE8-浏览器中的所有DOM对象都是以COM对象的形式实现的。所以，IE8-浏览器并不支持Node对象的写法
1、 查看属性节点：.getAttribute;
parentNode.insertBefore 将newNode 加入到targNode之前
//在标准浏览器下返回1，而在IE8-浏览器中报错，提示Node未定义console.log;//1
2、 设置属性节点：.setAttribute;
8、移除目标节点
nodeName
注意事项：.setAttribute()
在老版本IE中会存在兼容性问题，可以使用.符号代替。
parentNode.removeChild
nodeName属性返回节点的名称
1、 使用setAttribute设置class和style。
9、替换目标节点
nodeValue
document.getElementById.setAttribute;document.getElementById.setAttribute;
parentNode.replace 使用newNode 替换targetNode
nodeValue属性返回或设置当前节点的值，格式为字符串
2、使用.className添加一个class选择器。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
接下来，将按照节点类型的常数值对应顺序，从1到12进行详细说明
document.getElementById.className = "class1";
元素节点
3、 使用.style.样式 直接修改单个样式。 注意样式名必须使用驼峰命名法。
元素节点element对应网页的HTML标签元素。元素节点的节点类型nodeType值是1，节点名称nodeName值是大写的标签名，nodeValue值是null
document.getElementById.style.fontSize = "18px";
// 1 'BODY' nullconsole.log(document.body.nodeType,document.body.nodeName,document.body.nodeValue)console.log(Node.ELEMENT_NODE === 1);//true
4、 使用.style 或 .style.cssText 添加一串行级样式：
特性节点
// IE不兼容document.getElementById.style = "color:red;"; //所有浏览器兼容document.getElementById.style.cssText = "color:red;";
元素特性节点attribute对应网页中HTML标签的属性，它只存在于元素的attributes属性中，并不是DOM文档树的一部分。特性节点的节点类型nodeType值是2，节点名称nodeName值是属性名，nodeValue值是属性值
1、.innerHTML: 取到或设置一个节点中的HTML代码。
现在，div元素有的属性
2、.innerText: 取到或设置一个节点中的文本，不能设置HTML代码。
var attr = test.attributes.id;//2 'id' 'test'console.log(attr.nodeType,attr.nodeName,attr.nodeValue)console.log(Node.ATTRIBUTE_NODE === 2);//true
二、层次节点操作
文本节点文本节点text代表网页中的HTML标签内容。文本节点的节点类型nodeType值是3，节点名称nodeName值是’#text’，nodeValue值是标签内容值
- .childNodes： 获取当前节点的所有子节点。
现在，div元素内容为’测试’
.children： 获取当前节点的所有元素子节点。
测试var txt = test.firstChild;//3 '#text' '测试'console.log(txt.nodeType,txt.nodeName,txt.nodeValue)console.log;//true
-
.parentNode: 获取当前节点的父节点。
-
.firstChild： 获取第一个子节点，包括回车等文本节点；
CDATA节点
.firstElementChild： 获取第一个元素节点。 不含文本节点；
CDATASection类型只针对基于XML的文档，只出现在XML文档中，表示的是CDATA区域，格式一般为
.lastChild： 获取最后一个子节点，包括回车等文本节点；
该类型节点的节点类型nodeType的值为4，节点名称nodeName的值为’#cdata-section’，nodevalue的值是CDATA区域中的内容
.lastElementChild： 获取最后一个子节点，不含文本节点；
实体引用名称节点
- .previousSibling： 获取当前节点的前一个兄弟节点，包括文本节点；
实体是一个声明，指定了在XML中取代内容或标记而使用的名称。
实体包含两个部分， 首先，必须使用实体声明将名称绑定到替换内容。
实体声明是使用
语法在文档类型定义或XML架构中创建的。其次，在实体声明中定义的名称随后将在
XML 中使用。 在XML中使用时，该名称称为实体引用。
.previousElementSibling： 获取当前节点的前一个元素兄弟节点；
实体引用名称节点entry_reference的节点类型nodeType的值为5，节点名称nodeName的值为实体引用的名称，nodeValue的值为null
.nextSibling：获取当前节点的后一个兄弟节点，包括文本节点；
//实体名称//实体名称引用Published by &publisher;
.nextElementSibling：获取当前节点的后一个元素兄弟节点；
实体名称节点上面已经详细解释过，就不再赘述
-
.attributes: 获取当前节点的所有属性节点。 返回数组格式。
-
document.createElement： 创建一个新节点，并将创建的新节点返回。
该节点的节点类型nodeType的值为6，节点名称nodeName的值为实体名称，nodeValue的值为null
需要配合.setAttribute()为新节点设置属性。
处理指令节点
- 父节点.insertBefore： 在父节点中，将新节点插入到目标节点之前。
处理指令节点ProcessingInstruction的节点类型nodeType的值为7，节点名称nodeName的值为target，nodeValue的值为entire
content excluding the target
父节点.appendChild： 在父节点的内部最后，插入一个新节点。
注释节点
- 源节点.cloneNode： 克隆一个节点。
注释节点comment表示网页中的HTML注释。注释节点的节点类型nodeType的值为8，节点名称nodeName的值为’#comment’，nodeValue的值为注释的内容
传入true表示克隆源节点以及源节点的所有子节点；
现在，在id为myDiv的div元素中存在一个
传入false或不传，表示只克隆当前节点，而不克隆子节点。
var com = myDiv.firstChild;//8 '#comment' '我是注释内容'console.log(com.nodeType,com.nodeName,com.nodeValue)console.log(Node.COMMENT_NODE === 8);//true
-
父节点.removeChild： 从父节点中，删除指定子节点。
-
父节点.replaceChild： 从父节点中，用新节点替换老节点。
文档节点
文档节点document表示HTML文档，也称为根节点，指向document对象。文档节点的节点类型nodeType的值为9，节点名称nodeName的值为’#document’，nodeValue的值为null
//9 "#document" nullconsole.log(document.nodeType,document.nodeName,document.nodeValue)console.log(Node.DOCUMENT_NODE === 9);//true
文档类型节点
文档类型节点DocumentType包含着与文档的doctype有关的所有信息。文档类型节点的节点类型nodeType的值为10，节点名称nodeName的值为doctype的名称，nodeValue的值为null
Documentvar nodeDocumentType = document.firstChild;//10 "html" nullconsole.log(nodeDocumentType.nodeType,nodeDocumentType.nodeName,nodeDocumentType.nodeValue);console.log(Node.DOCUMENT_TYPE_NODE === 10);
文档片段节点
文档片段节点DocumentFragment在文档中没有对应的标记，是一种轻量级的文档，可以包含和控制节点，但不会像完整的文档寻亲战胜额外的资源。该节点的节点类型nodeType的值为11，节点名称nodeName的值为’#document-fragment’，nodeValue的值为null
var nodeDocumentFragment = document.createDocumentFragment(); //11 "#document-fragment" nullconsole.log(nodeDocumentFragment.nodeType,nodeDocumentFragment.nodeName,nodeDocumentFragment.nodeValue);console.log(Node.DOCUMENT_FRAGMENT_NODE === 11);//true
DTD声明节点
DTD声明节点notation代表DTD中声明的符号。该节点的节点类型nodeType的值为12，节点名称nodeName的值为符号名称，nodeValue的值为null
总结
在这12种DOM节点类型中，有一些适用于XML文档，有一些是不常用的类型。而对于常用类型，后面会陆续进行详细介绍，本文对这12种节点类型只做概述，希望本文对大家能有所帮助。