首页 > 代码库 > Element类型知识大全

Element类型知识大全

  Element类型


   除了Document类型之外,Element类型就要算是Web编程中最常用的类型了。Element类型用  9于表现XML或HTML元素,提供了对元素标签名、子节点及特性的访问。
 
要访问元素的标签名,可以使用nodeName属性,也可以使用tagName属性;这两个属性会返回相同的值(使用后者主要是为了清晰起见)。

在HTML中,标签名始终都以全部大写表示;而在XML(有时候也包括XHTML)中,标签名则始终会与源代码中的保持一致。假如你不确定自己的脚本将会在HTML还是XML文档中执行,最好是在比较之前将标签名转换为相同的大小写形式,

 1.HTML元素

   所有HTML元素都由HTMLElement类型表示,不是直接通过这个类型,也是通过它的子类型来表示。HTMLElement类型直接继承自Element并添加了一些属性。添加的这些属性分别对应于每个HTML元素中都存在的下列标准特性。

    id,元素在文档中的唯一标识符。

    title,有关元素的附加说明信息,一般通过工具提示条显示出来。

    lang,元素内容的语言代码,很少使用。

    dir,语言的方向,值为"ltr"(left-to-right,从左至右)或"rtl"(right-to-left,从右至左),也很少使用。

    className,与元素的class特性对应,即为元素指定的CSS类。没有将这个属性命名为class,是因为class是ECMAScript的保留字
 
 2.取得特性

   每个元素都有一或多个特性,这些特性的用途是给出相应元素或其内容的附加信息。操作特性的DOM方法主要有三个,分别是getAttribute()、setAttribute()和removeAttribute()。这三个方法可以针对任何特性使用,包括那些以HTMLElement类型属性的形式定义的特性。
 注意,传递给getAttribute()的特性名与实际的特性名相同。因此要想得到class特性值,应该传入"class"而不是"className",后者只有在通过对象属性访问特性时才用。如果给定名称的特性不存在,getAttribute()返回null。

   通过getAttribute()方法也可以取得自定义特性(即标准HTML语言中没有的特性)的值不过,特性的名称是不区分大小写的,即"ID"和"id"代表的都是同一个特性。另外也要注意,根据HTML5规范,自定义特性应该加上data-前缀以便验证。
 

 节点层次 

任何元素的所有特性,也都可以通过DOM元素本身的属性来访问。当然, HTMLElement也会有5个属性与相应的特性一一对应。不过,只有公认的(非自定义的)特性才会以属性的形式添加到DOM对象中。

 

有两类特殊的特性,它们虽然有对应的属性名,但属性的值与通过getAttribute()返回的值并不相同。第一类特性就是style,用于通过CSS为元素指定样式。在通过getAttribute()访问时,返回的style特性值中包含的是CSS文本,而通过属性来访问它则会返回一个对象。由于style属性是用于以编程方式访问元素样式的,因此并没有直接映射到style特性。 

第二类与众不同的特性是onclick这样的事件处理程序。当在元素上使用时,onclick特性中包含的是JavaScript代码,如果通过 getAttribute()访问,则会返回相应代码的字符串。而在访问onclick属性时,则会返回一个JavaScript函数(如果未在元素中指定相应特性,则返回null)。这是 因为onclick及其他事件处理程序属性本身就应该被赋予函数值。

由于存在这些差别,在通过JavaScript以编程方式操作DOM时,开发人员经常不使用getAttribute(),而是只使用对象的属性。只有在取得自定义特性值的情况下,才会使用getAttribute()方法。

 

 设置特性    

   与getAttribute()对应的方法是setAttribute(),这个方法接受两个参数:要设置的特性名和值。如果特性已经存在,setAttribute()会以指定的值替换现有的
 值;如果特性不存在,setAttribute() 则创建该属性并设置相应的值。
 

通过setAttribute()方法既可以操作HTML特性也可以操作自定义特性。通过这个方法设置的特性名会被统一转换为小写形式,即"ID"最终会变成"id"。

 在IE7及以前版本中,setAttribute()存在一些异常行为。通过这个方法设置class和style特性,没有任何效果,而使用这个方法设置事件处理程序特性时也 一样。尽管到了IE8才解决这些问题,但我们还是不推荐通过属性来设置特性。
 要介绍的最后一个方法是removeAttribute(),这个方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值,而且也会从元素中完全删除特性,
 5.创建元素

   使用document.createElement()方法可以创建新元素。这个方法只接受一个参数,即要创建元素的标签名。这个标签名在HTML文档中不区分大小写,而在XML(包括XHTML)文档中,则是区分大小写的。
 
 要把新元素添加到文档树,可以使用appendChild()、insertBefore()或replaceChild()方法。一旦将元素添加到文档树中,浏览器就会立即呈现该元素。此后,对这个元素所作的任何修改都会实时反映在浏览器中。
 
 6.元素的子节点    

   元素可以有任意数目的子节点和后代节点,因为元素可以是其他元素的子节点。元素的childNodes属性中包含了它的所有子节点,这些子节点有可能是元素、文本节点、注释或处理指令。不同浏览器在看待这些节点方面存在显著的不同,

Element类型知识大全