网站地图    收藏   

主页 > 专题教程 > javascript > js基础 >

JavaScript文档对象模型-Element类型

来源:自学PHP网    时间:2018-02-08 10:24 作者: 阅读:

[导读] 除了Document类型之外,Element类型是JavaScript编程中最常使用的类型。Element类型常用于表现HTML或XML元素,提供对元素标签名、子节点及特性的访问。...

除了类型之外,Element类型是JavaScript编程中最常使用的类型。Element类型常用于表现HTML或XML元素,提供对元素标签名、子节点及特性的访问。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");
console.info(div.tagName);                 //输出“DIV”
console.info(div.tagName == div.nodeName); //true                              
                            

在HTML中,标签始终以大写字母来表现,因此div.tagName会输出大写的“DIV”。而在XML(包括XHTML)中,标签名则会于源代码中的标签保持一致。因此在比较元素的标签名是否一致的时候,最好将它们转换为小写在比较。

//错误的写法
if(element.tagName == "div"){
  
}
//正确的写法
if(element.tagName.toLowerCase() == "div"){
  
}                              
                            

所有的HTML元素都由HTMLElement类型来表示,不是通过这个类型,也是通过它的子类型来表示。HTMLElement类型直接继承自Element类型,并添加了一些属性。添加的这些属性分别对应于每个HTML元素中都存在的系列特性:

  • id,元素在文档中唯一的标识符。
  • title,有关元素的附加说明信息,一般会通过工具提示条来显示。
  • lang,元素内容的语言。
  • dir,语言的方向,值为“ltr”(从左向右显示),或“rtl”(从右向左显示)。
  • classname,元素元素的class特性对应,即为元素指定的CSS类。

上面的这些属性都可以用来获取或修改相应的特性值。例如下面的例子:

<div id="myDiv" class="htmleaf" title="jQuery之家" lang="zh" dir="ltr">jQuery之家</div>
                            

我们可以在控制台中输出上面的属性值:

var div = document.getElementById("myDiv");
console.info(div.id);
console.info(div.className);
console.info(div.title);
console.info(div.lang);
console.info(div.dir);                              
                            

firefox控制台输出结果

要给这些属性赋值,可以像下面这样操作:

div.id = "otherId";
div.className = "otherClass";
div.title = "otherTitle";
div.lang = "en";
div.dir = "rtl";                           
                            

每一个元素都有一个或多个属性,操作元素属性的DOM方法有3个,分别是:

  • getAttribute()
  • setAttribute()
  • removeAttribute()

上面的这些方法可以对任何属性使用,例如:

var div = document.getElementById("myDiv");
console.info(div.getAttribute("id"));
console.info(div.getAttribute("class"));
console.info(div.getAttribute("title"));
console.info(div.getAttribute("lang"));
console.info(div.getAttribute("dir"));                              
                            

firefox控制台输出结果2

通过getAttribute()方法也可以获取自定义的属性(即标准HTML语言中没有的属性名称),例如:

<div id="myDiv" my-attribute="hello">自定义属性</div>                                
                            

可以像获取其它属性一样获取这个自定义属性的值。

var div = document.getElementById("myDiv");
console.info(div.getAttribute("my-attribute"));   //hello                             
                            

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论