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. 【ORACLE】字符串操作 B字符串时A的一部分

    select * from a where instr(a,b)>0;用于实现B字段是A字段中的某一部分的时候,要论顺序或者要相邻的字符. 如果想要不论顺序或者不相邻的字符时,定义函数可以实现: ...

  2. JDBC驱动自身问题引发的FullGC

    公众号HelloJava刊出一篇<MySQL Statement cancellation timer 故障排查分享>,作者的某服务的线上机器报 502(502是 nginx 做后端健康检 ...

  3. 整理react native的资料

    http://blog.csdn.net/jj120522/article/details/51900016  -----RN常见的错误 http://www.mamicode.com/info-de ...

  4. iOS地图

    地图 1.主要用到了地图展示和定位功能 CoreLocation框架的使用: 导入头文件        #import <CoreLocation/CoreLocation.h>CoreL ...

  5. liunx常用的命令

    计算机网络的主要优点是能够实现资源和信息的共享,并且用户可以远程访问信息.Linux提供了一组强有力的网络命令来为用户服务,这些工具能够帮助用户登录到远程计算机上.传输文件和执行远程命令等. 本章介绍 ...

  6. 页面制作部分之PS切图

    页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...

  7. backbone新手填坑教程资源

    backbone 入门第二版 http://www.kancloud.cn/kancloud/backbonejs-learning-note/49379 backbone 入门讲解 http://w ...

  8. 在VisualStadio2015上使用EF6.0建立MySql数据库

    1.新建工程 2.建立类的文件夹DAL 3.建立相关类 [Student类] using System;using System.Collections.Generic;using System.Li ...

  9. 函数randint的使用

    摘自百科: ANDINT 在MATLAB中用于产生基质的均匀分布的随机整数. 用法: 1.OUT = RANDINT 产生一个“ 0 ”或“ 1 ”等概率 2.OUT = RANDINT(M) 生成的 ...

  10. IT人生知识分享:概率与运气

    前言: 最近的人生多了些体验,也读了些许书,感觉还是有些知识是可以分享的. 今天难得周六,特意开电脑了,花几个小时写写,和大伙分享分享点知识. 以下内容,更多的需要读者思考,所以结论不会写太清晰,但一 ...