学习JS中的DOM节点以及操作_javascript技巧_脚本之家

除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():获取指定元素标签名的元素数组。

一般地,节点至少拥有nodeTypenodeNamenodeValue这三个基本属性。

属性节点和文本节点都属于元素节点的子节点。
因此操作时,需先选中元素节点,再修改属性和文本。

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值是标签内容值

  1. .childNodes: 获取当前节点的所有子节点。

现在,div元素内容为’测试’

.children: 获取当前节点的所有元素子节点。

测试var txt = test.firstChild;//3 '#text' '测试'console.log(txt.nodeType,txt.nodeName,txt.nodeValue)console.log;//true 
  1. .parentNode: 获取当前节点的父节点。

  2. .firstChild: 获取第一个子节点,包括回车等文本节点;

CDATA节点

.firstElementChild: 获取第一个元素节点。 不含文本节点;

CDATASection类型只针对基于XML的文档,只出现在XML文档中,表示的是CDATA区域,格式一般为

.lastChild: 获取最后一个子节点,包括回车等文本节点;

该类型节点的节点类型nodeType的值为4,节点名称nodeName的值为’#cdata-section’,nodevalue的值是CDATA区域中的内容

.lastElementChild: 获取最后一个子节点,不含文本节点;

实体引用名称节点

  1. .previousSibling: 获取当前节点的前一个兄弟节点,包括文本节点;

实体是一个声明,指定了在XML中取代内容或标记而使用的名称。
实体包含两个部分, 首先,必须使用实体声明将名称绑定到替换内容。
实体声明是使用
语法在文档类型定义或XML架构中创建的。其次,在实体声明中定义的名称随后将在
XML 中使用。 在XML中使用时,该名称称为实体引用。

.previousElementSibling: 获取当前节点的前一个元素兄弟节点;

实体引用名称节点entry_reference的节点类型nodeType的值为5,节点名称nodeName的值为实体引用的名称,nodeValue的值为null

.nextSibling:获取当前节点的后一个兄弟节点,包括文本节点;

//实体名称//实体名称引用Published by &publisher;

.nextElementSibling:获取当前节点的后一个元素兄弟节点;

实体名称节点上面已经详细解释过,就不再赘述

  1. .attributes: 获取当前节点的所有属性节点。 返回数组格式。

  2. document.createElement: 创建一个新节点,并将创建的新节点返回。

该节点的节点类型nodeType的值为6,节点名称nodeName的值为实体名称,nodeValue的值为null

需要配合.setAttribute()为新节点设置属性。

处理指令节点

  1. 父节点.insertBefore: 在父节点中,将新节点插入到目标节点之前。

处理指令节点ProcessingInstruction的节点类型nodeType的值为7,节点名称nodeName的值为target,nodeValue的值为entire
content excluding the target

父节点.appendChild: 在父节点的内部最后,插入一个新节点。

注释节点

  1. 源节点.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 
  1. 父节点.removeChild: 从父节点中,删除指定子节点。

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注