除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种节点类型只做概述,希望本文对大家能有所帮助。