2.3 Element类型
Element类型应该是Document类型之外使用的最多的节点类型了,Element代表XML或HTML文档中的一个元素,它具有以下特征:
[1]nodeType为1
[2]nodeName为标签名
[3]nodeValue为null
[4]parentNode可能是Element或Document
[5]childNode可能是Element,Text,Comment,Proccessinginstruction,CDATASection或EntityReference
除了使用nodeName,还可以使用tagName取得标签名称,但是返回的标签名都是大写的。
2.3.1 HTML元素
在HTML中,所有的HTML元素都是由HTMLElement类型或者其子类型来表示的,他们都存在以下这些标准特性:
[1]id:元素在文档中的唯一标识
[2]title:有关元素的附加说明信息,一般在鼠标移动到该元素上面时显示出来
[3]lang和dir:分别是元素内容的语言代码和语言方向,一般很少使用
[4]className:为元素设置的css类名
这些特性都是可读可写的
2.3.1 取得元素的特性
每个元素都有一个或多个特性,特性一般用来为元素提供附加信息。操作特性的DOM方法主要有三个:getAttribute()、setAttribute()和removeAttribute()。
可以通过getAttribute取得元素特性,但传入的参数必须与实际的特性名称相同,比如要获取class特性,则必须调用getAttribute("class")才可以。此外,getAttribute还可以获取自定义的特性(HTML标准语言中没有的特性),特性名称一般是不区分大小写的。
除了通过getAttribute获取元素特性,还可以通过元素的属性来获取相应的特性,除自定义特性之外(采用元素属性的方式获取自定义特性时会返回undefined,IE8及以下浏览器都会返回相应的特性值)。
有两类特殊的特性,它们虽然拥有对应的属性名,但是通过getAttribute获得的特性值却与对应的属性值不同:
首先是"style"特性,如果通过getAttribute("style"),获得的是style字符串;如果通过element.style,获得的是一个对象(IE7及以下浏览器中,使用元素属性与getAttribute方法返回的都是对象)。
另外一个特性是"onclick"这种事件处理程序特性,使用getAttribute时,返回的相应特性的字符串,而访问元素的属性返回的则是一个js函数(IE7及以下浏览器中,使用元素属性与getAttribute方法返回的都是js函数)。
2.3.2 设置元素的特性
与getAttribute相对应的是setAttribute,可以用来设置元素的特性,如果特性已经存在,则修改对应的特性;如果特性不存在,则为元素创建相应的特性,通过这个方法设置的特性名称都会转换为小写。
与getAttribute相似,也可以通过修改元素的属性来为元素设置对应的特性,但是如果是自定义特性,除IE8及以下浏览器外,都不能通过元素属性来设置。
注:在IE7及以下浏览器中,通过setAttribute设置class,style,事件处理程序没有效果。
另外还有一个方法是removeAttribute,这个方法不仅会清除对应的特性值,还会删除对应的特性,但IE6并不支持这个方法。
2.3.3 attributes属性
Element类型是唯一一个使用attributes属性的节点类型,这个属性中包含一个NamedNodeMap,与NodeList相似,也是一个动态的集合。包含以下几个方法:
[1]getNamedItem(name):根据特性名称来获取一个Attr节点
[2]removeNamedItem(name):根据名称删除一个特定的Attr节点
[3]setNamedItem(Node):向列表中添加一个Attr节点,以节点的nodeName为索引
[4]item(pos):获得对应位置索引的节点
2.3.4 创建Element节点
可以使用document.createElement方法创建一个元素,这个方法接收一个参数,即元素的标签名。创建之后的节点必须通过2.1.3节中介绍的操作节点的方法才可以将元素在页面中显示出来。
在IE中还可以传入这个元素的完整标签,比如:
document.createElement("<div id='div' name='div'>测试</div>")
这种方式有助于避开IE7及以下浏览器中动态创建元素时会出现的一些问题,目前已知的问题包括:
[1]不能设置动态创建的iframe元素的name特性
[2]不能通过reset()重置动态创建的input元素
[3]动态创建的type为reset的button不能重置表单
[4]动态创建的一批name相同的radio按钮彼此之间毫无关系
2.3.5 元素的子节点
元素可以拥有多个子节点和后代节点,因为一个元素可以是其他元素的子节点,通过childNodes属性可以获得元素的所有子节点。但是不同浏览器对于元素的childNodes属性会有不同的处理,IE8及以下浏览器不会增加空白文本节点,以下面代码为例:
<ol id="list">
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
</ol>
在IE8及以下浏览器中,list的childNodes的length为4,而其他浏览器中则为9,因此如果要获取元素的所有子元素节点,务必要遍历childNodes,并通过nodeType来进行筛选。
此外,Element也支持getElementsByTagName。
2.4 Text类型
Text类型代表DOM树中的文本节点,它有如下特点:
[1]nodeType为3
[2]nodeName为#text
[3]nodeValue为节点的文本字符串
[4]parentNode为Element
[5]没有childNodes
可以通过nodeValue或data属性来获取或者设置文本节点的内容,同时还有以下几个函数来操纵文本节点的文本字符串:
[1]appendData(text):将文本添加到节点末尾
[2]deleteData(offset,count):从offset处开始删除count个字符
[3]insertData(offset, text):从offset处插入text
[4]replaceData(offset, count, text):用text替换从offset之后的count个字符
[5]splitText(offset):从offset处将文本节点拆分成两个文本节点
[6]substringData(offset, count):提取offset开始的count个字符
此外,文本节点还有一个length属性,表示其内容字符串的长度,同时它的data属性和nodeValue属性也都有一个length属性。
可以通过设置文本节点的nodeValue或data属性来修改节点的内容,但是插入的内容都会经过HTML或XML编码。
2.4.1 新建文本节点
可以通过document.createTextNode()来新建一个文本节点,这个方法接收一个参数,即文本节点的内容(内容也会经过编码)。
一般情况下,一个元素只有一个文本节点,但如果向元素插入了多个文本节点,那么它也可能会包含多个文本节点。
2.4.2文本节点的规范化与分割
2.1.4节介绍过normalize方法,这个方法会处理元素包含的文本节点,比如删除空白的文本节点,合并相邻的文本节点等。另外,还可以通过文本节点的splitText方法分割文本节点,这样就会使得元素包含多个文本节点。
2.5 Comment类型
Comment类型在文档中表示注释,Comment的基本特征如下:
[1]nodeType为8
[2]nodeName为#comment
[3]nodeValue为注释的内容
[4]parentNode可能是Document或Element
[5]没有子节点
Comment类型与Text类型继承自同一个基类,因此它具有除splitText之外的所有Text类型节点所具有的方法。
可以通过document.createComment来创建一个注释节点,但是实际中我们很少会创建或者操作文本节点。
2.6 CDATASection类型
CDATASection只针对XML文档,它继承自Text,也具有除splitText之外的所有Text类型所具有的方法,它的基本特征如下:
[1]nodeType为4
[2]nodeName为#cdata-section
[3]nodeValue为CDATA区域中的内容
[4]parentNode可能是Document或Element
[5]没有子节点
Comment类型与Text类型继承自同一个基类,因此它具有除splitText之外的所有Text类型节点所具有的方法。
CDATASection只会出现在XML文档中,浏览器中一般会把其视为Comment或Element来处理。在真正的XML文档中,可以通过document.createCDataSection方法创建一个CDATASection节点
2.7 DocumentType类型
DocumentType包含着与文档类型有关的信息,它的基本特征如下:
[1]nodeType为10
[2]nodeName为doctype的名称
[3]nodeValue为null
[4]parentNode是Document
[5]没有子节点
在DOM1中,DocumentType类型不能动态创建,而只能通过解析页面代码的方式创建,支持它的浏览器会DocumentType对象保存在document.doctype中,DOM1中描述了doctype的三个属性:
[1]name:表示文档类型的名称
[2]entities:是文档类型描述的实体的NamedNodeMap对象
[3]notations:是文档类型描述的符号的NamedNodeMap对象
通常情况下,只有name属性是有用的
2.8 DocumentFragment类型
在所有的节点类型中,只有DocumentFragment在文档中没有对应的标记,它是一种轻量级的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源,它的基本特征如下:
[1]nodeType为11
[2]nodeName为#document-fragment
[3]nodeValue为null
[4]parentNode为null
[5]childNode可能是Element,Text,Comment,Proccessinginstruction,CDATASection或EntityReference
DocumentFragment类型继承了Node的所有方法,主要用于执行针对文档的DOM操作,可以使用document.createDocumentFragment方法创建一个文档片段,它的使用有如下特点:
(1)如果把文档树中的节点添加到文档片段中,那么就会从文档树中移除该节点;而添加到文档片段中的节点也不会在文档树中显示
(2)可以通过appendChild、insertBefore或replaceChild方法将文档片段添加到文档树中,而这个操作只是把文档片段的所有子节点添加到了文档树中,文档片段本身是不会被添加到文档树中的。
2.9 Attr类型
特性节点是用来表示元素特性的,它也是存在于attributes属性中的节点,它的基本特征如下:
[1]nodeType为2
[2]nodeName为特性名称
[3]nodeValue为特性的值
[4]parentNode为null
[5]没有子节点
Attr对象有三个属性:name,value和specified,name与nodeName属性对应,value与nodeValue属性对应,而specified则表示特性是否是在代码中指定的。
可以通过document.createAttribute方法创建一个特性节点,并且通过Element的setAttributeNode方法为元素添加特性。
注:实际中一般很少直接操作特性节点,而是通过getAttribute、setAttribute和removeAttribute方法,或者通过元素对象属性的方式来操作元素的特性
在平时的DOM编程中,使用最多的应该是Document、Element和Text类型,DOM1中为这些节点的操作提供了底层的支撑和基础的方法,后面的文章会陆续介绍后续对DOM1级的扩展,以及DOM2和DOM3所带来的新的变化。
- DOM LEVEL 1 中的那些事儿[总结篇-上]
DOM是前端编程中一个非常重要的部分,我们在动态修改页面的样式.内容.添加页面动画以及为页面元素绑定事件时,本质都是在操作DOM.DOM并不是JS语言的一个部分,我们通过JAVA.PHP等语言抓取网页 ...
- DOM对象模型接口规范中的四个基本接口
DOM对象模型的四个基本接口 在DOM对象模型接口规范中,有四个基本的接口:Document,Node,NodeList以及NamedNodeMap.在这四个基本接口中,Document接口是对文档进 ...
- DBA避坑宝典:Oracle运维中的那些事儿
对于Oracle运维中的那些事儿,我的最终目的:不是比谁更惨,而是能够从中吸取经验和教训. 从我的理解来看,我会从下面的几个方面来进行说明DBA运维中的一些事儿. 每个部分都是非常关键的,缺一不可,而 ...
- 在浏览器中输入Google.com并且按下回车之后发生了什么(转载)
原文地址:https://github.com/skyline75489/what-happens-when-zh_CN#id9 本文试图回答一个古老的面试问题:当你在浏览器中输入google.com ...
- 在浏览器中输入Google.com并且按下回车之后发生了什么?
作者: skyline75489 来源: skyline75489的博客 发布时间: 2015-03-26 16:57 阅读: 4163 次 推荐: 23 原文链接 [收藏] ...
- C#中的Attribute详解(下)
原文地址:https://blog.csdn.net/xiaouncle/article/details/70229119 C#中的Attribute详解(下) 一.Attribute本质 从上篇里我 ...
- 前端开发工程师 - 03.DOM编程艺术 - 第1章.基础篇(下)
第1章.基础篇(下) Abstract: 数据通信.数据存储.动画.音频与视频.canvas.BOM.表单操作.列表操作 数据通信(HTTP协议) HTTP事务: 客户端向服务器端发送HTTP请求报文 ...
- jQuery对象和DOM对象使用说明,需要的朋友可以参考下。
jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...
- Python列表中的字典按照该字典下的键值进行排序
列表中的字典按照该字典下的键值进行排序 这算是排序中比较复杂的一种情况吧,多重嵌套,按照某种规则进行排序.如下面这个json(注:这里这是该列表中的一个项): [ { "stat" ...
随机推荐
- coocsCreator杂记
判断是否继承 cc.isChildClassOf = function (subclass, superclass) { 获取所有super classes CCClass.getInheritanc ...
- json数据映射填充到html元素显示
映射算法做了改进,支持name重复映射 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...
- 关于Rigidbody,Collider和CharacterController三者之间的关系和用法的总结
Rigidbody:多用在“物体”上,因为“物体”都是“死”的,他们的运动一般都是靠物理系统.所以对于Rigidbody的移动,不要用Translate(),要用各种“力”, 比如:Rigidbody ...
- 粒子跟随本体unity
Simulation Space(模拟空间):在世界坐标和本地坐标中切换,这个就是制作技能痕迹的重要位置,新建的粒子系统一般都默认为local,所以在粒子本体移动的时候也跟着进行移动,改为world的 ...
- 36、NSTimer使用详解-开启、关闭、移除
1.要是用一个定时器,首先要定义一个定时器: @property(strong,nonatomic)NSTimer *myTimer;//定时器 2.初始化,初始化有两种方式: 第一种: + (NST ...
- 2018.11.06 bzoj1835: [ZJOI2010]base 基站选址(线段树优化dp)
传送门 二分出每个点不需要付www贡献的范围,然后可以推出转移式子: f[i][j]=f[i−1][k]+value(k+1,j)+c[i]f[i][j]=f[i-1][k]+value(k+1,j) ...
- 2018.11.05 bzoj3124: [Sdoi2013]直径(树形dp)
传送门 一道sbsbsb树形dpdpdp 第一问直接求树的直径. 考虑第二问问的边肯定在同一条直径上均是连续的. 因此我们将直径记下来. 然后对于直径上的每一个点,dpdpdp出以这个点为根的子树中不 ...
- Echarts饼图显示模板
图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示.可选为: 'line'(折线图) | 'bar'(柱状图) | 'scatter'(散点图) | 'k'(K线图) 'pie'(饼图) | ...
- Ubuntu下删除卸载程序图标
Ubuntu下删除卸载程序图标 方法一:直接在终端输入命令alacarte.可以任意增.改.隐藏.显示菜单,但无法删除菜单,即使拥有root权限. 方法二:注意几个目录和文件./usr/share/a ...
- mysql update受影响的行数为0或查询结果为空时
当执行update语句时,如果受影响的行数是0,返回的也是true. $conn = new mysqli(); $sql = "update ..."; $query = $co ...