html文档中怎么区分节点对象节点类型,JavaScript文档对象模型-Element类型
除了Document类型之外,Element类型是JavaScript编程中最常使用的类型。Element类型常用于表现HTML或XML元素,提供对元素标签名、子节点及特性的访问。
Element节点具有以下的特点:nodeType的值为1。
nodeName的值为元素的标签名。
nodeValue的值为null。
parentNode的值可能是Document或Element。
它的子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference。
要访问元素的标签名可以使用nodeName属性,也可以使用tagName属性,这两个属性会返回相同的值,例如下面的例子:
可以像下面这样获取这个元素的标签名称: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元素
所有的HTML元素都由HTMLElement类型来表示,不是通过这个类型,也是通过它的子类型来表示。HTMLElement类型直接继承自Element类型,并添加了一些属性。添加的这些属性分别对应于每个HTML元素中都存在的系列特性:id,元素在文档中唯一的标识符。
title,有关元素的附加说明信息,一般会通过工具提示条来显示。
lang,元素内容的语言。
dir,语言的方向,值为“ltr”(从左向右显示),或“rtl”(从右向左显示)。
classname,元素元素的class特性对应,即为元素指定的CSS类。
上面的这些属性都可以用来获取或修改相应的特性值。例如下面的例子:
我们可以在控制台中输出上面的属性值: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);
要给这些属性赋值,可以像下面这样操作: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"));
通过getAttribute()方法也可以获取自定义的属性(即标准HTML语言中没有的属性名称),例如:
可以像获取其它属性一样获取这个自定义属性的值。var div = document.getElementById("myDiv");
console.info(div.getAttribute("my-attribute")); //hello
提示:属性名称不区分大小写,即"ID"与"id"代表同一个属性。
有两个特殊的属性,它们虽然有对应的属性名,但是属性的值与通过getAttribute()获取的值并不相同。第一个属性是style属性,用于通过CSS来为元素赋予样式。在通过getAttribute()访问时,返回的style属性值中并不是包含的CSS文本,而是会返回一个对象。第二个是像onclick这样的事件处理程序。当在元素上使用的时候,onclick中包含的是JavaScript代码,如果通过getAttribute()来访问的时候,则会返回一个JavaScript函数。
设置属性
与getAttribute()相对应的是setAttribute()方法,该方法接收两个参数:要设置的属性名称和值。如果要设置的属性已经存在,setAttribute()方法会以指定的值替换现有的值,如果属性不存在,setAttribute()方法会创建该属性并设置相应的值。例如:div.setAttribute("id","myDiv");
div.setAttribute("class","div-class");
div.setAttribute("title","div-title");
通过setAttribute()方法既可以操作HTML属性,也可以操作自定义的属性。通过这个方法设置的属性名称会被统一转换为小写形式,例如“ID”会被转换为“id”。
也可以直接使用属性赋值的方式来设置属性值:div.id = "myDiv";
div.align = "left";
但是像下面这样为DOM元素添加一个自定义属性,这个属性不会自动成为元素的特性:div.myColor = "red";
alert(div.getAttribute("myColor")); //返回null
要删除一个元素的特性,可以使用removeAttribute()方法,该方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值,也会从元素中完全删除这个特性。例如:div.removeAttribute("class");
attribute属性
Element类型是唯一一个使用attribute属性的DOM节点类型。attribute属性中包含一个NamedNodeMap,于NodeList相似,也是一个动态的集合。元素的每一个特性都由一个Attr节点表示,每一个节点都保存在NamedNodeMap对象中。NamedNodeMap对象拥有以下一些方法:getNamedItem(name):返回nodeName属性等于name的节点。
removeNamedItem(name):从列表中移除nodeName属性等于name的节点。
setNamedItem(name):向列表中添加节点,以节点的nodeName为索引。
item(pos):返回位于pos位置处的节点。
attribute属性包含一系列的节点,每个节点的nodeName就是特性的名称,而节点的nodeValue就是特性的值。要取得元素的id,可以使用下面的方法:var id = element.attribute.getNamedItem("id").nodeValue;
也可以通过方括号的方式来简写上面的代码:var id = element.attribute["id"].nodeValue;
也可以通过这种语法来设置属性值:element.attribute["id"].nodeValue = "myDiv";
调用removeNamedItem()方法与在元素上调用removeAttribute()方法的效果一样:删除给定名称的元素特性。但是它们之间也有一些区别,removeNamedItem()方法会返回被删除特性的Attr节点:var oldAttr = element.attribute.removeNamedItem("id");
创建元素
我们通过document.createElement()方法可以创建一个新的元素。这个方法只接受一个参数:要创建的元素的标签名称。这个标签名称在HTML文档中不区分大小写,而在XML文档中则是要区分大小写的。例如使用下面的代码来创建一个新的元素:var div = document.createElement("div");
在使用createElement()创建元素的同时,也为元素设置了ownerDocument属性。同时,我们还可以操作元素的特性,为它添加更多的子节点,例如:var div = document.createElement("div");
div.id = "myDiv";
div.className = "div-class";
在新元素上设置这些特性只是为元素添加了相应的信息。由于新元素还没有被添加到文档树中,所以这些特性不会浏览器的显示。要把新元素添加到文档树中,可以使用appendChild()、insertBefore()、replaceChild()方法,例如下面的代码:var div = document.createElement("div");
document.body.appendChild(div);
一旦新元素被添加到文档树中,浏览器就会立刻展现该元素。之后,对该元素所做的任何修改都会在浏览器中被反应出来。
元素子节点
元素可以有任意数量的子节点和后代节点。元素的childNodes属性中包含了它的所有子节点,这些子节点有可能是元素、文本节点、注释或处理指令。不同的浏览器对待这些节点有不同的处理方法,以下面的代码为例:
- Item 1
- Item 2
- Item 3
如果是IE浏览器来解析这段代码,那么
- 元素会有3个子节点,分别是3个
- 元素;如果是其他浏览器来解析,
- 元素都会有7个子节点,包括3个
- 元素和4个文本节点(表示
- 元素之间的空白符)。如果像下面这样删除了元素之间的空白符号,那么所有的浏览器都会返回相同的子节点数量。
- Item 1
- Item 2
- Item 3
对于上面的代码,
- 元素在任何浏览器都会包含3个子节点。如果你需要通过childNodes来遍历子节点,那么一定要注意浏览器之间的这一差别。这就意味着在执行某项操作之前,我们需要检查一下nodeType属性,例如下面的代码:for(var i = 0,len = element.childNodes.length; i
if(element.childNodes[i].nodeType == 1){
//执行某些操作...
}
}
这个例子会循环遍历特定元素的每一个子节点,在子节点的nodeType类型为1时(表示元素节点),才执行某些操作。
如果想通过某个特定的标签名称来获取子节点和后代节点,可以使用getElementsByTagName()方法。在通过元素调用这个方法的时候,除了搜索起点是当前元素之外,其它的都与通过document来调用这个方法是一样的,因此,搜索的结果只会返回当前元素的后代。例如,想要取得
- 元素包含的所有
- 元素,可以这样写代码:var ul = document.getElementById("myList");
var items = ul.getElementsByTagName("li");
上面的
- 元素中只包含直接的
- 子元素。如果它包含更多层次的后代子元素,那么各个层次包含的
- 元素也一起会被返回。
html文档中怎么区分节点对象节点类型,JavaScript文档对象模型-Element类型相关推荐
- word2013插入excel对象报错_修改Word文档中嵌入的Excel对象
I need example code or even a 3rd party object that will allow me to get to an excel object embedded ...
- 从Word文档中提取嵌入对象
从Word文档中提取嵌入对象 有时候我们可能需要向word文档中插入一些文档如PDF.Excel等,相反地,有时候我们也会需要从word文档中提取嵌入的对象.这篇文章将讲述如何使用C#及一个免费Wor ...
- word 文档中嵌入和链接OLE 对象|Packager-对象包装程序
Packager-对象包装程序1 ㈠."对象包装程序"概述 "对象包装程序"是一种用于创建可以插入到某个文档中的程序包的工具. "对象包装程序&quo ...
- 用C#实现在PowerPoint文档中搜索文本
用编程的方式根据对象模型很容易实现在Word.Excel文档中搜索文本,在PowerPoint里面也同样如此,使用对象模型有助于我们了解office的文档结构. 搜索的思路和方法基本是一样的,用Pow ...
- 办公室小姐姐的福利!用Python批量提取word文档中的表格和图片内容
点上方"菜鸟学Python",选择"星标" 第491篇原创干货,第一时间送达 最近有许多小伙伴想要一些自动化办公的福利小程序,今天就满足大家的需求.日常的办公过 ...
- 怎么批量提取多个 Excel 文档中的图片
概要:批量提取 Excel 文档图片.批量提取 xlsx 文档图片.无损提取 Excel 图片.Excel 图片导出.批量提取图片.文档图片提取.批量导出文档图片 Excel 文档中可以插入文本.图片 ...
- Element 对象表示 XML 文档中的元素。
Element 对象 Element 对象表示 XML 文档中的元素.元素可包含属性.其他元素或文本.如果元素含有文本,则在文本节点中表示该文本. 重要事项:文本永远存储在文本节点中.在 DOM 处理 ...
- DOM4J解析XML文档、Document对象、节点对象节点对象属性、将文档写入XML文件(详细)...
Dom4j是一个简单.灵活的开放源代码的库.Dom4j是由早期开发JDOM开发的.与JDOM不同的是,dom4j使用接口和抽象的人分离出来而后独立基类,虽然Dom4j的API相对要复杂一些,但它提供了 ...
- 将HTML字符转换为DOM节点并动态添加到文档中
将HTML字符转换为DOM节点并动态添加到文档中 将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术. 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题: 1 ...
最新文章
- tensorflow教程 一元线性回归
- 【NOI2015】荷马史诗
- java一个接口执行结束释放内存_java的灵魂--JVM虚拟机
- 大数据主题分享第三期 | 基于ELK的亿级实时日志分析平台实践
- 修正CS2.0中的日历头显示错误
- idea设置自动清除不需要的import包,自动清除导包
- (计算机组成原理)第五章中央处理器-第一节:CPU的功能与基本结构(运算器和控制器等寄存器)
- .NET环境下水晶报表使用总结
- Q131:PBRT-V3,对比SurfaceInteration和MediumInteraction(笔记)
- fio 磁盘IO性能测试
- 浅析tomcat原理
- shadow文件的MD5密码破解
- 解决 winedit 打开tex文件 reading error(亲测可行)
- 多源异构数据分析为什么需要数据湖?
- win8宽带连接服务器未响应,关于Win8系统连接宽带错误的解决方法介绍
- 中软外包创维面试,尬聊半小时
- 计算机网络第七版 谢希仁 3-33答案
- 对勾和叉怎么打_word中插入打勾符号和打叉符号方法
- Toad for oracle 教程
- android中监听的作用,Android里的AdapterView中OnItemClickListener监听器四个参数的含义...
热门文章
- modify sql_在SQL Server中使用JSON_MODIFY()修改JSON数据
- SQL Server 2016的新功能–动态数据屏蔽
- sql文件中捕获异常_使用更改数据捕获监视SQL Server中的更改
- 德鲁伊 oltp oltp_内存中OLTP –招待看门狗的三个关键点–检查点文件
- sql union 和 union all
- Azkaban上传出错
- Android 获取地理位置信息 封装好了 直接用
- GJM:用C#实现网络爬虫(一) [转载]
- cornerstone the working copy is locked due to a previous文件lock解决办法
- mongoose在子文档的array里update或insert