js element类型的属性和方法整理

Element类型

除了Document类型,我们Web编程中最常用的类型就是Element类型啦.Element 类型用于表现XML或html元素,提供了对元素标签名,子节点,特性的访问

特征

nodeType值为1
nodeName为元素标签名
nodeValue为null
parentNode可能是Document或Element
子节点可能是Element,Text,Comment,ProcessingInstruction,CDATASection,EntityReference

其中nodeName和tagName属性返回相同的值,推荐使用tagName,则表义更清晰,值得注意的是返回值大小写的问题,由于HTML中为答谢,而XML/XHTML则会与源代码保持一致,所以比较时要统一大小写形式.

HTML元素

HTML元素都由HTMLElement类型表示,不直接通过该类型,也是通过它的子类型表示.HTMLElement类型继承自Element并且添加了一些属性如下:

id 元素在文档中的唯一标识符
title 元素的附加说明信息,一般为工具提示条显示
lang 元素内容的语言代码,很少使用
dir 语言方向,ltr为从左到右,rtl则相反
className 与元素class的特性对应,没有设置为class则是因为class为ECMAScript的保留字

注意以上属性的修改并不是所有都会在页面中直观的表现出来,id和lang修改对用户来说是不可见的(假设没有css样式),对title的修改则只会在鼠标移动到元素上时才会显示出来(工具提示条),dir的修改则会在属性重写的那一刻立刻影响页面中的文本,对className的修改则与是否关联了不同的CSS样式有关.

特性

HTML元素每个元素都有一个或多个特性,操作特性的dom方法如下有三个:

getAttribute()
setAttribute()
removeAttribute()

这三个方法可以针对任何特性使用,包括自定义特性.但是只有公认的特性才会添加到DOM元素属性上,自定义的特性通常是不存在的(undefined),当然这里又要注意我们的”好朋友”IE啦,它会为自定义特性创建属性.

特殊特性

主要针对getAttribute()方法讲述一下特殊情况.

有两类特殊特性,有对应的属性名,但值与getAttribute()返回的值并不相同

style,通过getAttribute()访问会返回CSS文本,而通过属性访问返回一个对象
onclick这样的事件处理程序,通过getAttribute()访问会返回相应代码的字符串.而属性访问时,则会返回一个JavaScript函数(未指定则为null)

故通常只有取得自定义特性值的情况下,才会使用getAttribute()方法.

注意!:我们的”老朋友”IE7及以前版本中,getAttribute()方法访问上述两个特殊特性时,返回的值与属性的值相同.即getAttribute("style")返回一个对象,getAttribute("onclick")返回一个函数.

设置特性

这里主要讲解下setAttribute()方法,这和getAttribute()相对应.这个方法接受两个参数,要设置的特性名和值,如果特性存在则将值进行替换;不存在则创建并设置相应的值.
值得注意的是,设置特性名会转换为小写.而且直接给DOM元素添加一个自定义的属性并不会让这个属性成为元素的特性.

div.mycolor="red";
div.getAttribute("mycolor"); //这里返回null(IE除外)

移除特性

removeAttribute()方法用于彻底删除元素特性,调用该方法会清除特性的值并完全删除特性.
注意!:IE6及以前版本不支持该方法.

attributes属性

Element类型是使用attributes属性的唯一一个DOM节点类型.在该属性中包含一个NamedNodeMap,与NodeList类似,也是”动态”集合.元素每一个特性都由一个Attr节点表示,每个节点都保存在NamedNodeMap对象中.相关方法如下:

getNamedItem(name)返回nodeName属性等于name的节点
removeNamedItem(name)从列表移除nodeName等于name的节点
setNamedItem(node)向列表添加节点,以节点的nodeName属性为索引
item(pos)返回处于数字pos位置处的节点

在该属性中有一系列的节点,每个节点的nodeName就是特性的名称,nodeValue就是特性的值.要取得元素的id特性,可以使用attributes.getNamedItem("id").nodeValue
等同于attributes["id"].nodeValue

调用removeNamedItem()与在元素上调用removeAttribute()效果相同.

setNamedItem()是一个很不常用的方法,该方法可以为元素添加一个新特性,此外需要为它传入一个特性节点.

注意!:IE7及更早版本会返回HTML元素中所有可能的特性,包括没指定的特性.
针对低版本改进:每个特性节点都有一个名为specified的属性,如果为true则意味着要么HTML中指定了相应特性,要么通过setAttribute()设置了该特性,在IE中未设置过的特性都为false,其他浏览器则不会为这类特性生成对应特性节点.

创建元素

document.createElement()方法就可创建新元素.
该方法接受一个参数,就是元素标签名,这个标签名在HTML下不区分大小写,XML中则会区分大小写.

在创建新元素的同时,新元素也设置了ownerDocument属性,此时,还可以操作元素特性,为它添加更多的子节点.
在设置完特性后,由于未添加到文档树,所以一切特性都不会影响浏览器的显示.我们可以通过之前讲到的appendChild(),insertBefore(),replaceChild()方法来进行相应的操作.
一旦添加到文档树,则浏览器会立刻呈现该元素.此后我们的修改都会反应到浏览器中.
注意!(常不考虑):在IE中我们可以通过另一种方式进行创建

document.createElement("<div id=\"myNewDiv\" class=\"box\"></div>");

这个方式可以避开IE7及更早版本中动态创建元素的某些问题.(不能设置动态创建的iframe元素的name特性;不能通过表单的reset()方法重设动态创建的input元素;动态创建的type特性值为”reset”的button元素重设不了表单;动态创建的一批name相同的单选按钮彼此毫无关系)

元素子节点
除了IE,其他浏览器解析代码时会解析空白符为文本节点.我们可以通过nodeType属性的检查来过滤掉它们

链接: https://fly63.com/article/detial/268