Element类型

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

nodeType的值为1;

nodeName的值为元素的标签名;

nodeValue的值为null;

parentNode可能是Document或Element;

要访问元素的标签名可以使用nodeName属性或者tagName属性,两者返回相同的值

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

var div=document.getElementById("myDiv");

alert(div.nodeName);  //"DIV"

在HTML中,标签名始终全部大写,而在XML(有时候也包括XHTML)中,标签名始终与源代码保持一致,可用toLowerCase()转化为小写形式

HTML元素

所有HTML元素都由HTMLElement类型表示,不是直接通过这个类型,而是通过它的子类型

HTMLElement类型直接继承自Element并添加了一些属性,每个HTML元素都有下列标准特性:

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

title,附加说明信息,一般通过工具提示条显示出来

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

dir,语言的方向值为"ltr""rtl"也比较少使用

className,与元素的class特性对应

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

var div=document.getElementById("myDiv");

alert(div.id);  //"myDiv"

    ...

alert(div.dir);  //"ltr"(通过特性属性访问)

也可以直接赋值

div.id="someOtherId";

    ...

div.dir="rtl";

取得特性

var div=document.getElementById("myDiv");

alert(div.getAttribute("id"));  //"myDiv"(通过getAttribute()访问)

    ...

alert(div.getAttribute("class"));  //"bd" 非"className"

特性不区分大小写,ID与id代表同一个特性,如果给定名称的特性不存在,返回null

getAttribute(一个自定义特性名称);  //根据HTML5规范,自定义特性要加前缀data-以便验证

只有公认的(非自定义的)特性才会以属性的形式添加到DOM中,IE会为自定义特性也创建属性

alert(div.my_special_attribute);  //undefined(IE除外)

有两类特殊的特性,通过getAttribute()访问和通过特性属性访问返回的值并不一样:

1.style通过getAttribute()访问返回的是特性值中包含的css文本,通过特性属性访问返回一个对象

2.像onclick这样的事件处理程序,通过getAttribute()访问返回的是相应代码的字符串,通过特性属性访问返回一个JavaScript函数

因此开发人员不常使用getAttribute(),只使用对象的属性,只有在取得自定义特性值得情况下才会用getAttribute()方法

设置特性

getAttribute()对应setAttribute(),接收2个参数要设置的特性名和值,若已存在则替换,不存在则创建

div.setAttribute("id","someOtherId");

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

自定义属性不会当作元素的特性

div.mycolor="red";

alert(div.getAttribute("mycolor"));  //null(IE除外)

最后一个方法removeAttribute(),彻底删除元素的特性

div.removeAttribute("class");

attributes属性

Element类型是使用attributes属性的唯一一个DOM节点类型,attributes属性包含一个NamedNodeMap,与NodeList类似,也是一个“动态”的集合,NamedNodeMap对象拥有下列方法:

getNamedItem(name):返回nodeName属性等于name的节点;

removeNamedItem(name):从列表中移除nodeName属性等于name的节点;

setNamedItem(node):向列表添加节点,以节点的nodeName属性为索引;

item(pos):返回位于数字pos位置的节点

attributes属性包含一系列节点,每个节点的nodeName就是特性的名称,nodeValue就是特性的值

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

var id=element.attributes["id"].nodeValue;  //方括号的简写方式

element.attributes["id"].nodeValue="someOtherId";  //设置新属性值

var oldAttr=element.attributes.removeNamedItem("id");  //删除并返回给定名称的特性

element.attributes.setNamedItem(newAttr);  //添加新特性

NamedNodeMap对象的这些方法不够方便,不过在遍历是有比较大的用处

attrName=element.attributes[i].nodeName;

创建元素

document.createElement()方法接收一个参数,即要创建元素的标签名,最好小写(HTML不区分大小写,XML则区分大小写)

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

还可以为它添加更多特性

div.id="myNewDiv";

div.className="box";

这些新元素尚未添加到文档树中

元素的子节点

<ul id="myList">

  <li>Item1</li>

  <li>Item2</li>

  <li>Item3</li>

</ul>

在IE中算3个子节点,其他浏览器中算7个子节点,<li>之间的空格算4个文本节点,实际项目中注意这个差别,可以检查一下nodeType==1,另外元素也支持getElementsByTagName()方法

JavaScript高级程序设计24.pdf的更多相关文章

  1. JavaScript高级程序设计61.pdf

    JSON对象 早期的JSON解析器就是使用JavaScript的eval()函数,ECMAScript5对解析JSON的行为做出了规定,定义了全局对象JSON. JSON对象有2个方法:stringi ...

  2. JavaScript高级程序设计60.pdf

    错误处理 try-catch语句 try{ //可能会导致错误的代码 }catch(error){ //在错误发生时如何处理 } error是一个包含着错误信息的对象,它有一个message属性,保存 ...

  3. JavaScript高级程序设计58.pdf

    15章 使用Canvas绘图 略 16章 HTML5脚本编程 HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作 跨文档消息传递 简称XDM,指来自不同域 ...

  4. JavaScript高级程序设计57.pdf

    表单序列化 首先了解一下浏览器如何将数据发送给服务器 对表单字段的名称和值进行URL编码,使用和号(&)分隔 不发送禁用的表单字段 只发送勾选的复选框和单选按钮 不发送type为“reset” ...

  5. JavaScript高级程序设计55.pdf

    输入模式 HTML5为文本字段新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值 例如,只想在允许在文本字段中输入数值 <input type="text&q ...

  6. JavaScript高级程序设计54.pdf

    过滤输入 对于一些浏览器,可以使用正则表达式里的text()测试用户按下的按键,Firefox和safari(3.1版本之前)会对向上向下.退格键和删除键触发keypress事件,在Firefox中, ...

  7. JavaScript高级程序设计53.pdf

    共有的表单字段方法 每个表单字段都有两个方法:focus()和blur(),其中focus()用于将浏览器焦点设置到表单字段,激活表单字段.可以侦听页面的load事件 EventUtil.addHan ...

  8. JavaScript高级程序设计52.pdf

    表单脚本 表单的基础知识 在HTML中,表单是由<form>元素表示的,在Javascript对应的是HTMLFormElement类型,它继承自HTMLElement,因此具有与其他HT ...

  9. JavaScript高级程序设计50.pdf

    hashchange事件 HTML5新增了hashchange事件,以便在URL的参数列表(及URL中“#”号后面的所有字符串)发生变化时通知开发人员,之所以新增这个事件,是因为在Ajax应用中,开发 ...

随机推荐

  1. 思维导图软件VYM

    http://www.insilmaril.de/vym/ 点击打开链接http://www.oschina.net/p/vym 有人说VYM就跟目录是一回事,确实是这样, 只不过与excel之类的比 ...

  2. 《Thinking In Java第四版》拾遗

    <Thinking In Java第四版>拾遗 转自我的github(http://katsurakkkk.github.io/2016/05/Thinking-In-Java%E7%AC ...

  3. js实现小数点后保留N位并可以四舍五入——js对float数据的处理

    曾经遇到的两次的问题,关于前台接受后台传过来的float数据,一显示就是老长的小数点后缀,很烦人,后来想着用js把其进行四舍五入处理下,经网上查找,一哥们的代码如下:(很好用,感谢下!) functi ...

  4. svn-代码回滚

    第一种:# svn revert [-R] something 第二种: 1. svn update,svn log,找到最新版本(latest revision)    2. 找到自己想要回滚的版本 ...

  5. nginx服务器的日志太多:定期执行脚本删除

    #!/bin/bash -type f -name *.log | xargs rm -f 脚本名字autodellog.sh 设置定时器(每天凌晨一点执行) [root@localhost ~]# ...

  6. wamp的mysql密码修改

    ==方法1== 通过WAMP打开mysql控制台,提示输入密码,因为现在是空,所以直接按回车. 输入“use mysql”,意思是使用mysql这个数据库教程,提示“Database changed” ...

  7. ios8.1.2耗电情况严重的解决方法

    打开cydia,搜索ifile(威锋源,版本2.1.0-1).打开ifile,进入路径/Applications.里面有许多程序文件,选择适当的进行禁用(ifile可以禁用程序的活动而不完全删除它,这 ...

  8. python开发-web框架之diango-----Models

    这篇博客是紧连上一篇博客的,因为内容较多,这里介绍的是Models这一部分的内容 七:Models 数据库的配置 1    django默认支持sqlite,mysql, oracle,postgre ...

  9. LayoutInflater的获取与使用

    在实际开发中LayoutInflater这个类还是非常有用的,它的作用类似于findViewById().不同点是LayoutInflater是用来找res/layout/下的xml布局文件,并且实例 ...

  10. 密室经典逃脱N部--考验你的智力!据说全球没几人走出去!不要看攻略!【工作之余也来休闲一下】

    密室经典逃脱N部-考验你的智力!据说全球没几人走出去!不要看攻略![工作之余也来休闲一下] 更多经典逃脱尽在:点击进入更多经典逃脱 测试你的反映速度:躲避小红球 测试你对鼠标的控制力 叫美女起床 ↓↓ ...