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属性中包含了它的所有子节点,这些子节点有可能是元素、文本节点、注释或处理指令。不同浏览器在看待这些节点方面存在显著的不同,

时间: 2024-10-10 16:32:07

Element类型知识大全的相关文章

世界最全的咖啡知识大全,喜欢的就收藏吧!(转载)

世界最全的咖啡知识大全,喜欢的就收藏吧! 引导语:咖啡是什么?简单的说就是一种普通的饮料,世界三大饮料之一.全球贸易量仅次于石油,在世界上比茶更流行的饮料.今天就和我一起去探索咖啡的起源,享受咖啡的文化.    咖啡的分类:        咖啡树大致可分为5种,其中阿拉比卡(Arabica)和罗百氏特(Robusta)是较常见的.阿拉比卡种占了世界总产量的70%强,该品种一般种植在海拔900米以上的坡地,多产于中南美洲.东非.东南亚.夏威夷等热带高海拔地区.其宜人的香气.丰富的滋味,而且该树种需

美女必备美容护肤知识大全护肤小常识

美女必备美容护肤知识大全护肤小常识随着外界的污染和岁月的流逝,肌肤会出现各种各样的问题.下面小编为你搜集了各种各样的美容护肤的小窍门,针对不同的肌肤问题,是美女必备的美容护肤知识大全,下面来学习学习吧!方法/步骤护肤小窍门一 :啤酒收缩毛孔取面膜碗,倒入适量的啤酒,再将压缩面膜浸入啤酒中,三分钟后,取出,稍柠出一点多余的水分.敷于脸部,待水分快吸干时,在浸入反复如此,敷半个小时,再用冷水洗净脸部,毛孔不见了,肌肤也会变得非常的紧致....护肤小窍门二 :酸奶蜂蜜保湿...将酸奶和蜂蜜取同样的分量

JavaScript DOM(三) Element 类型

简介: 在JavaScript中除了document类型之外,Element类型就要算是Web编程中最常用的类型了.Element类型用于表现XML或者HTML元素,提供了对元素标签名,子节点及特性的访问: 特征: 1.nodeType的值为1; 2.nodeName的值为元素的标签名: 3.nodeValue的值为null; 4.parentNode可能是document或Element; 5.其子节点可能是Element,Text,Coment,ProcessingInstruction,C

Element类型

1.获取元素后访问标签名 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>element</title> 5 </head> 6 <body> 7 <div id="div1"></div> 8 <script type="text/javascript"> 9 var oDiv = document.ge

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

Element 类型用于表现 XML或 HTML元素,提供了对元素标签名.子节点及特性的访问. 要访问元素的标签名,可以使用 nodeName 属性,也可以使用 tagName 属性:这两个属性会返回相同的值.如下所示: <div id="myDiv"></div> var div = document.getElementById("myDiv"); alert(div.tagName); //"DIV" alert(d

超详细的《电子元器件综合知识大全》,电子工程师一定要看!

今天这篇资料是小编精心挑选的资料,很详细的电子元件基础知识-<电子元器件综合知识大全>,如果你想成为资深的电子工程师,这些知识是必不可少的! 部分资料如下: .............................................................. 资料页数太多,先看到这里 需要的小伙伴们可以看一下下载方式,下载链接:https://pan.baidu.com/s/1EJ0Qq2A-HbHnmyYZaFyOkw 密码:gqtq(如链接失效可上公众号下载:OFw

python知识大全目录,想学的看过来!

Python总结篇--知识大全 python装饰器 PyCharm安装与配置,python的Hello World sort与sorted的区别及实例 我必须得告诉大家的MySQL优化原理 Python四大主流网络编程框架 验证码的爬取和识别详解 Flex 布局:实例篇 http和socket之长连接和短连接区别 CSS之Flex 布局:语法篇 爬虫必须学会的正则表达式 符合语言习惯的 Python 优雅编程技巧 Python面试必须要看的15个问题 HTTP和HTTPS的请求和响应 我不想用f

ping命令技巧详解 windows下ping命令知识大全

windows ping命令对于多数电脑爱好者都不会陌生,通过ping ip可以知道网络是否畅通或者网络传输质量如何等,是网络技术人员常用的检测网络命令,多数朋友对ping命令知道的并不多,接下来本文将与大家详细了解ping以及ping命令高级技巧等,如果觉得本文不错,记得收藏哦,或许今后有用到的时候!4m的网速是多少? 4m宽带下载速度是多少? ping的基本用法想必大家都会,可知不值到有关ping命令的高级用法呢?如下面的: Ping命令知识 Ping命令工作原理详解ping [-t] [-

mysql基础类型知识总结

Mysql知识回顾 http://www.educity.cn/wenda/596225.html http://blog.csdn.net/dyllove98/article/details/9289483 http://opsmysql.blog.51cto.com/2238445/1343771 http://www.cnblogs.com/lyhabc/p/3886402.html Int(11)详解 int(11)最大长度是多少? 在SQL语句中int代表你要创建字段的类型,int代表