dom和sub是什么属性(dom和sub是什么意思 属性)

除了Document类型之外,Element类型就要算是Web编程中最常用的类型了。Element类型用于表现XML或HTML元素,提供了对元素标签名、子节点及特性的访问。Element节点具有以下特征:
nodeType的值为1;
nodeName的值为元素的标签名;
nodeValue的值为null;
parentNode可能是Document或Element;
其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference。
要访问元素的标签名,可以使用nodeName属性,也可以使用tagName属性;这两个属性会返回相同的值(使用后者主要是为了清晰起见)。以下面的元素为例:
<div id="myDiv"></div>

可以像下面这样取得这个元素及其标签名:
var div = document.getElementById("myDiv");
alert(div.tagName); //"DIV"
alert(div.tagName == div.nodeName); //true

这里的元素标签名是div,它拥有一个值为"myDiv"的ID。可是,div.tagName实际上输出的是"DIV"而非"div"。在HTML中,标签名始终都以全部大写表示;而在XML(有时候也包括XHTML)中,标签名则始终会与源代码中的保持一致。假如你不确定自己的脚本将会在HTML还是XML文档中执行,最好是在比较之前将标签名转换为相同的大小写形式,如下面的例子所示:
if (element.tagName == "div"){ //不能这样比较,很容易出错!
//在此执行某些操作
}

if (element.tagName.toLowerCase() == "div"){ //这样最好(适用于任何文档)
//在此执行某些操作
}

这个例子展示了围绕tagName属性的两次比较操作。第一次比较非常容易出错,因为其代码在HTML文档中不管用。第二次比较将标签名转换成了全部小写,是我们推荐的做法,因为这种做法适用于HTML文档,也适用于XML文档。
可以在任何浏览器中通过脚本访问Element类型的构造函数及原型,包括IE8及之前版本。在Safari 2之前版本和Opera 8之前的版本中,不能访问Element类型的构造函数。

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的保留字(有关保留字的信息,请参见第1章)。
上述这些属性都可以用来取得或修改相应的特性值。以下面的HTML元素为例:
<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>

HTMLElementsExample01.htm
元素中指定的所有信息,都可以通过下列JavaScript代码取得:
var div = document.getElementById("myDiv");
alert(div.id); //"myDiv""
alert(div.className); //"bd"
alert(div.title); //"Body text"
alert(div.lang); //"en"
alert(div.dir); //"ltr"

当然,像下面这样通过为每个属性赋予新的值,也可以修改对应的每个特性:
div.id = "someOtherId";
div.className = "ft";
div.title = "Some other text";
div.lang = "fr";
div.dir ="rtl";

HTMLElementsExample01.htm

并不是对所有属性的修改都会在页面中直观地表现出来。对id或lang的修改对用户而言是透明不可见的(假设没有基于它们的值设置的CSS样式),而对title的修改则只会在鼠标移动到这个元素之上时才会显示出来。对dir的修改会在属性被重写的那一刻,立即影响页面中文本的左、右对齐方式。修改className时,如果新类关联了与此前不同的CSS样式,那么就会立即应用新的样式。
前面提到过,所有HTML元素都是由HTMLElement或者其更具体的子类型来表示的。下表列出了所有HTML元素以及与之关联的类型(以斜体印刷的元素表示已经不推荐使用了)。注意,表中的这些类型在Opera、Safari、Chrome和Firefox中都可以通过JavaScript访问,但在IE8之前的版本中不能通过JavaScript访问。

元  素类  型

AHTMLAnchorElement

ABBRHTMLElement

ACRONYMHTMLElement

ADDRESSHTMLElement

APPLETHTMLAppletElement

AREAHTMLAreaElement

BHTMLElement

BASEHTMLBaseElement

BASEFONTHTMLBaseFontElement

BDOHTMLElement

BIGHTMLElement

BLOCKQUOTEHTMLQuoteElement

BODYHTMLBodyElement

BRHTMLBRElement

BUTTONHTMLButtonElement

CAPTIONHTMLTableCaptionElement

CENTERHTMLElement

CITEHTMLElement

CODEHTMLElement

COLHTMLTableColElement

COLGROUPHTMLTableColElement

DDHTMLElement

DELHTMLModElement

DFNHTMLElement

DIRHTMLDirectoryElement

DIVHTMLDivElement

DLHTMLDListElement

DTHTMLElement

EMHTMLElement

FIELDSETHTMLFieldSetElement

FONTHTMLFontElement

FORMHTMLFormElement

FRAMEHTMLFrameElement

FRAMESETHTMLFrameSetElement

H1HTMLHeadingElement

H2HTMLHeadingElement

H3HTMLHeadingElement

H4HTMLHeadingElement

H5HTMLHeadingElement

H6HTMLHeadingElement

HEADHTMLHeadElement

HRHTMLHRElement

HTMLHTMLHtmlElement

IHTMLElement

IFRAMEHTMLIFrameElement

IMGHTMLImageElement

INPUTHTMLInputElement

INSHTMLModElement

ISINDEXHTMLIsIndexElement

KBDHTMLElement

LABELHTMLLabelElement

LEGENDHTMLLegendElement

LIHTMLLIElement

LINKHTMLLinkElement

MAPHTMLMapElement

MENUHTMLMenuElement

METAHTMLMetaElement

NOFRAMESHTMLElement

NOSCRIPTHTMLElement

OBJECTHTMLObjectElement

OLHTMLOListElement

OPTGROUPHTMLOptGroupElement

OPTIONHTMLOptionElement

PHTMLParagraphElement

PARAMHTMLParamElement

PREHTMLPreElement

QHTMLQuoteElement

SHTMLElement

SAMPHTMLElement

SCRIPTHTMLScriptElement

SELECTHTMLSelectElement

SMALLHTMLElement

SPANHTMLElement

STRIKEHTMLElement

STRONGHTMLElement

STYLEHTMLStyleElement

SUBHTMLElement

SUPHTMLElement

TABLEHTMLTableElement

TBODYHTMLTableSectionElement

TDHTMLTableCellElement

TEXTAREAHTMLTextAreaElement

TFOOTHTMLTableSectionElement

THHTMLTableCellElement

THEADHTMLTableSectionElement

TITLEHTMLTitleElement

TRHTMLTableRowElement

TTHTMLElement

UHTMLElement

ULHTMLUListElement

VARHTMLElement
表中的每一种类型都有与之相关的特性和方法。本书将会讨论其中很多类型。

2. 取得特性

每个元素都有一或多个特性,这些特性的用途是给出相应元素或其内容的附加信息。操作特性的DOM方法主要有三个,分别是getAttribute()、setAttribute()和removeAttribute()。这三个方法可以针对任何特性使用,包括那些以HTMLElement类型属性的形式定义的特性。来看下面的例子:
var div = document.getElementById("myDiv");
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")); //"bd"
alert(div.getAttribute("title")); //"Body text"
alert(div.getAttribute("lang")); //"en"
alert(div.getAttribute("dir")); //"ltr"

注意,传递给getAttribute()的特性名与实际的特性名相同。因此要想得到class特性值,应该传入"class"而不是"className",后者只有在通过对象属性访问特性时才用。如果给定名称的特性不存在,getAttribute()返回null。
通过getAttribute()方法也可以取得自定义特性(即标准HTML语言中没有的特性)的值,以下面的元素为例:
<div id="myDiv" my_special_attribute="hello!"></div>

这个元素包含一个名为my_special_attribute的自定义特性,它的值是"hello!"。可以像取得其他特性一样取得这个值,如下所示:
var value = div.getAttribute("my_special_attribute");

不过,特性的名称是不区分大小写的,即"ID"和"id"代表的都是同一个特性。另外也要注意,根据HTML5规范,自定义特性应该加上data-前缀以便验证。
任何元素的所有特性,也都可以通过DOM元素本身的属性来访问。当然,HTMLElement也会有5个属性与相应的特性一一对应。不过,只有公认的(非自定义的)特性才会以属性的形式添加到DOM对象中。以下面的元素为例:
<div id="myDiv" align="left" my_special_attribute="hello!"></div>

因为id和align在HTML中是<div>的公认特性,因此该元素的DOM对象中也将存在对应的属性。不过,自定义特性my_special_attribute在Safari、Opera、Chrome及Firefox中是不存在的;但IE却会为自定义特性也创建属性,如下面的例子所示:
alert(div.id); //"myDiv"
alert(div.my_special_attribute); //undefined(IE除外)
alert(div.align); //"left"ElementAttributesExample02.htm

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

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

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

在IE7及以前版本中,通过getAttribute()方法访问style特性或onclick这样的事件处理特性时,返回的值与属性的值相同。换句话说,getAttribute("style")返回一个对象,而getAttribute("onclick")返回一个函数。虽然IE8已经修复了这个bug,但不同IE版本间的不一致性,也是导致开发人员不使用getAttribute()访问HTML特性的一个原因。

想要了解更多Java基础知识,可以点击评论区链接和小编一起学习java吧,此视频教程为初学者而著,零基础入门篇!给同学们带来全新的Java300集课程啦!java零基础小白自学Java必备优质教程_手把手图解学习Java,让学习成为一种享受_哔哩哔哩_bilibili

?

本文部分内容来自互联网,如有疑问请与我们联系。

发布者:币侠,转转请注明出处:https://www.yfhhf.com/baike/67504.html

(0)
                       
上一篇 2022年 12月 5日 上午3:56
下一篇 2022年 12月 5日 上午4:02

相关推荐

  • 2000泰铢兑换多少人民币(1000泰铢兑换人民币多少)

    时代的改变让很多人的思想也随之而改变,很多人在自身生活条件得到提升之后,也开始看重精神层面的享受。 (此处已添加小程序,请到今日头条客户端查看) 旅游,是一件无比快乐的事,在这个过程中,一个人可以见识到很多东西,而且自身的眼界与心胸也变得更加开阔,更重要的是,因为旅游,很多人的心理健康也越来越好,不再只是整天被生活压力搞的焦头烂额。 现在,世界上有很多国家都…

    2023年 1月 31日
    4450
  • 微粒贷怎么还款最划算(微粒贷怎么选择微信还款)

    现在很多年轻人都喜欢用信用卡提前消费,想买什么东西一刷即可,但是如果不一小心“剁手”过度,就会形成只能选择最低还款的局面。其实使用最低还款并不划算,相比之下使用微粒贷会是一个更划算的选择,下面编者就来给大家讲解一下,为什么说微粒贷比信用卡最低还款更划算。 微粒贷是什么? 微粒贷作为国内首家互联网银行微众银行推出的小额信贷产品,不仅操作便捷,安全有保障,计息方…

    百科问答 2023年 1月 8日
    1920
  • 一般几月份放暑假(大学生一般几月份放暑假)

    前段时间有很多朋友都想知道一般几月份放暑假是什么。今天小编特意为大家整理了相关知识来解答!还有其他网友想搞清楚大学生一般几月份放暑假,币侠网小编(www.yfhhf.com)现在为大家找到了相关问题的答案,接下来一起看看吧,希望能给大家带来帮助。 中小学每一年的暑假一般都接近2个月的时间。 大部分地区的中小学暑假时间是在7月份开始放假,在8月31日上学,但并…

    2022年 9月 21日
    2740
  • 2020欧洲杯最新消息(2020欧洲杯最新消息90分钟)

    前段时间有很多朋友都想知道2020欧洲杯最新消息是什么。今天小编特意为大家整理了相关知识来解答!还有其他网友想搞清楚2020欧洲杯最新消息90分钟,币侠网小编(www.yfhhf.com)现在为大家找到了相关问题的答案,接下来一起看看吧,希望能给大家带来帮助。 官方消息,欧洲杯确认将延期至2021年进行,比赛时间为明年的6月11日至7月11日。2020欧洲杯…

    2022年 10月 18日
    2440
  • 茅台历年零售价格一览表(茅台历年零售价格一览表及图片)

    目前白酒市场行情较冷,飞天茅台终端价格不断下挫,最新价格为2650元/瓶。近十几天以来,茅台酒大经销商在进行放货。现在已临近年底,新一年份的飞天茅台即将上市,大经销商此时放货时机较好。 今日茅台酒行情价全览。飞天方面,2021~2022年散瓶、2020~2022年原箱涨20元/瓶。生肖方面,虎年、鼠年、猪年、狗年生肖原箱涨20元/瓶。其他方面,精品茅台原箱、…

    2023年 1月 3日
    8590

联系我们

不接风险内容

在线咨询: QQ交谈

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信