Element类型

Element类型用于表现XML或HTML元素,提供了对元素标签名、子节点及特性的访问。Element节点具有以下特征:

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

要访问元素的标签名,可以使用nodeName属性、也可以使用tagName属性;这两个属性会返回相同的值

          <div id="myDiv"></div>

可以像下面这样取得这个元素以及标签名

          var div = document.getElementById('myDiv');
console.log(div.nodeName); //"DIV"
console.log(div.tagName == div.nodeName); //true

div.tagName实际上输出的是大写形式,通常转换为小写形式

         if (element.tagName.toLowerCase() == "div"){//这样最好
//在此执行操作
}

1、HTML元素

所有HTML元素都由HTMLElement类型表示,不是直接通过这个类型,也是通过它的子类型来表示。每个HTML元素都存在下列标准特性:

id,元素在文档中的唯一标识符。
title,有关元素的附加说明信息,一般通过工具提示条显示出来。
lang,元素内容的语言代码,很少使用。
dir,语言的方向
className,与元素的class特性相对应

         <div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>

         var div = document.getElementById('myDiv');
console.log(div.id); //myDiv
console.log(div.className); //bd
console.log(div.title); //BOdy text
console.log(div.lang); //en
console.log(div.dir); //ltr

当然也可以给他们赋予新值

2、取得特性

操作特性的DOM方法主要有三个:getAttribute()、setAttribute()、removeAttribute()

         var div = document.getElementById('myDiv');
console.log(div.getAttribute('id'));//myDiv
console.log(div.getAttribute('class')); //bd
console.log(div.getAttribute('title')); //BOdy text
console.log(div.getAttribute('lang')); //en
console.log(div.getAttribute('dir'));//ltr

如果给定的名称特性不存在,则返回null;

通过getAttribute()方法也可以取得自定义特性,例如:

         <div id="myDiv" my_special_attribute="hello!"></div>
var value = div.getAttribute('my_special_attribute');

任何元素的所有特性,也都可以通过DOM元素本身的属性来访问。不过只有公认的特性才会以属性的形式添加到DOM对象中。

         <div id="myDiv" align="left" my_special_attribute="hello!"></div>

因为id和align在HTML中是<div>公认的特性,因此该元素的DOM对象中也将存在对应的属性。不过自定义特性my_special_attribute在Safari、Opera、Chrome及Firefox中是不存在的;但IE却会为
自定义特性也创建属性,例如:

         console.log(div.id) //myDiv
console.log(div.my_special_attribute) //underfined(IE除外)

有两类特殊的特性,他们虽然有对应的属性名,但属性的值与通过getAttribute()返回的值并不相同。第一类就是style,在通过getAttribute()访问时,返回的是css文本,而通过属性来访问他则返回的是一个对象。第二类就是onclick这样的时间处理程序。通过getAttribute()访问时,返回的是相应代码的文本,而通过属性来访问时,则会返回一个JavaScript函数

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

3、设置特性

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

         div.setAttribute('id','someOtherId');
div.setAttribute('class','ft');

所有特性都是属性,所以可以直接给属性赋值:

         div.id = 'someOtherId';

不过,像下面这样为DOM元素添加一个自定义的属性,该属性不会自动成为元素的特性

         div.mycolor = "red";
console.log(div.getAttribute('mycolor')); //null(IE除外)

removeAttribute()用于彻底删除元素的特性:

         div.removeAttribute('class');

4、attribute属性

Element类型是使用attribute属性的唯一一个DOM节点类型。attributes属性中包含一个NamedNodeMap,与NodeList类似,也是一个“动态”集合。元素的每一个特性都由一个Attr节点表示,每个节点都保存在NamedNodeMap对象中。NamedNodeMap对象拥有下列方法。

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

attributes属性中包含一系列节点,每个节点的nodeName就是特性的名称,而节点的nodeValue就是特性的值。要取得id特性,可以使用以下代码:

         var id = element.attributes.getNamedItem("id").nodeValue;

以下是使用方括号语法的简写形式:

         var id = element.attributes["id"].nodeValue = "someOtherId";

调用removeNamedItem()方法与在元素上调用removeAttribute()方法的效果一样:直接删除给定名称的特性。他们的唯一区别就是removeNamedItem()返回表示删除特性的Attr节点

以下代码展示了如何迭代元素的每个特性,然后将他们构造成name="value" name="value"这样的字符串格式

         function outputAttributes(element){
var pairs = new Array(),
attrName,
attrValue,
i,
ien; for(i=0,len=element.attributes.length;i<len;i++){
attrName = element.attributes[i].nodeName;
attrValue = elemetn.attributes[i].nodeValue;
if(element.attributes[i].specified){
pairs.push(attrName + "=\"" + attrValue + "\"");
}
}
return pairs.join(" ");
}

5、创建元素

使用document.createElement()方法可以创建新元素。这个方法只接受一个参数,即要创建元素的标签名。例如创建一个<div>元素。

         var div = document.createElement("div");

在使用createElement()方法创建新元素的同时,也为新元素设置了ownerDocuemnt属性。此时,还可以操作元素的特性,为它添加更多的子节点,以及执行其他的操作

         div.id = "myNewDiv";
dov.className = "box";

要把这些新元素添加到文档树中可以使用appendChild()、insetrBefore()或者replaceChild()方法。

6、元素的子节点

元素可以由任意数目的子节点和后代节点,不同浏览器在看待这些节点方面存在显著的不同,以下面的代码为例:

         <ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

如果是IE累解析这些代码,那么<ul>元素会有3个节点,分别是3个<li>元素。但如果是在其他浏览器中。<ul>元素都会有7个元素,包过3个<li>元素和4个文本节点(表示<li>元素之间的空白符)。
如果像下面这样将元素间的空白符删除,那么所有的浏览器都会返回相同的数目的子节点

        <ul id="myList"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>

如果需要通过childNodes属性遍历子节点,那么通常都要先检查一下nodeType属性,如下:

         for(var i=0;len=element.childNodes.length;i<len;i++){
if(element.childNodes[i]nodeType == 1){
//执行某些操作
}
}

如果像通过某个特定的标签名取得子节点或后代节点可以使用getElementsByTagName()方法。

         var ul = documet.getElementById('myList');
var items = ul.getElementsByTagName('li');

要注意的是,这里<ul>的后代中只包含直接子元素。不过,如果它包含更多层次的后代元素,那么各个层次中包含的<li>元素也都会返回。

DOM-Element类型的更多相关文章

  1. 深入理解DOM节点类型第五篇——元素节点Element

    × 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...

  2. DOM Element节点类型详解

    上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element . 1.概况 Element 类型用于表现 HTML 或 X ...

  3. 从原型链看DOM--Element类型

    Element类型用于表现XML或HTML元素,提供对元素标签名,子节点及特性的访问.原型链的继承关系为 某节点元素.__proto__->(HTML某元素Element.prototype)- ...

  4. 第10章 文档对象模型DOM 10.3 Element类型

    Element 类型用于表现 XML或 HTML元素,提供了对元素标签名.子节点及特性的访问. 要访问元素的标签名,可以使用 nodeName 属性,也可以使用 tagName 属性:这两个属性会返回 ...

  5. javascript之DOM(三Element类型)

    Element类型用于表现XML和HTML的元素,提供了对元素标签名.子节点及特性的访问. 要访问标签名可以使用nodeName和tagName属性,其返回值是一样的. <p id=" ...

  6. 第十章—DOM(二)——Element类型

    Element类型用于表现HTML和XML,提供了对元素标签名,子节点和特效的访问.Element节点具有以下特征: 要访问元素的标签名,可以使用nodeName属性,也可以使用tagName属性.这 ...

  7. 深入理解DOM节点类型第一篇——12种DOM节点类型概述

    × 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...

  8. js DOM Element属性和方法整理

    节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. childNodes获取到的是NodeLi ...

  9. Element类型知识大全

    Element类型 除了Document类型之外,Element类型就要算是Web编程中最常用的类型了.Element类型用于表现XML或HTML元素,提供了对元素标签名.子节点及特性的访问.   要 ...

  10. JavaScript -- 时光流逝(十二):DOM -- Element 对象

    JavaScript -- 知识点回顾篇(十二):DOM -- Element 对象 (1) element.accessKey: 设置或返回accesskey一个元素,使用 Alt + 指定快捷键 ...

随机推荐

  1. duplicate symbols for architecture arm64 after xCode 8.0 update

    Xcode IDE  从7.3.1 update 到 8.0 之后出现的问题 一个错误把我困扰了两天之久,最终找到解决办法我欣喜若狂. 错误发生原因:Xcode IDE  从7.3.1 update ...

  2. 可变数组NSMutableArray

    //创建一个空的可变数组 NSMutableArray *array = [NSMutableArray array]; //向数组里面添加对象 [array addObject:@"< ...

  3. js Date学习

    Date.parse()接收一个表示日期的字符串参数(参数错误时返回NaN),返回相应日期的毫秒数.(使用自 UTC(Coordinated Universal Time,国际协调时间)1970 年 ...

  4. Smart3D系列教程4之 《案例实战演练1——小物件的照片三维重建》

    一.前言 Wish3D出品的Smart3D系列教程已经推出3讲了,分别是关于倾斜摄影三维建模原理应用.照片采集技巧.Smart3D各个功能模块的作用,它们都是围绕Smart3D建模软件进行的讲解.那么 ...

  5. Google Authentication的实现 - Odoo 安全登录

    在前边的一篇文章中,我们提到了利用二次验证增强Odoo登录的可靠性:http://www.cnblogs.com/kfx2007/p/6023991.html 今天我们来具体实现这一步: 后端的实现 ...

  6. PMP备考_第六章_项目时间管理

    项目时间管理 前言 项目时间管理是项目管理中最难的一个环节,与个人时间管理类似,团体的效率如果管理不当,是低于个人效率的,为了管理好时间,从预估,执行到反馈均需要严格的分析和处理.如果制定的计划是无法 ...

  7. bootstarp3 支持ie8

    http://blog.csdn.net/hyb3280660/article/details/51850832 想要bootstarp3 支持ie8? 引入 <!-- 存放全局css/js - ...

  8. php面向对象中的几个基本定义

    面向对象: 面向对象是现代编程中的一种重要设计方法,其基本思想是使用对象,类,封装,继承等来进行程序设计. 对象: 一只猪,一只羊,一辆汽车. 类: 类的主要作用就是创建对象. 封装: 类的特点是将对 ...

  9. 比achartengine更加强大的Android图表控件。

    比achartengine更加强大的图表控件MPAndroidChart. 详细使用及demo:http://www.see-source.com/androidwidget/detail.html? ...

  10. CSS基础篇之选择符3

    border(边框) 如何用CSS调出边框 我们给p标签加一个边框试一下 p{ border:1px solid #ccc:/*这是缩写*/ } 第一个值是为边框的宽度 第二个值是为边框线样式为直线 ...