- 浏览: 224367 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
July01:
最近了解到一款StratoIO打印控件,功能如下:1、Html ...
(原创)javascript 实现批量打印《简历》 -
liangchengfck1:
这个只能正对数据量少的批量打印,当你打印10000张数据的时候 ...
(原创)javascript 实现批量打印《简历》 -
dare_:
官网的文档明确说明 是五种 你的默认和no应该是同一种
Spring 中Bean的自动装配六种模式,你懂得几种? -
Franciswmf:
图片上传的东西呢?
java+Ckeditor -
huigou:
地址不对了
ETL Kettle发送邮件时发送失败!高手指点!
DOM 总结(二)
查找元素的方法:
1,getElementByName()方法:
寻找有着给定name属性的所有元素,这个方法将返回一个节点集合,这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。
举例:
<form name="form1"> <input type="text" name="tname" value="吃饭_1" /><br> <input type="text" name="tname" value="吃饭_2" /><br> <input type="text" name="tname" value="吃饭_3" /><br> <input type="button" name="ok" value="保存" id="ok" onclick="test();"> </form> function test(){ // 获取属性的Name var tnameArray=document.getElementsByName("tname"); //输出长度 alert(tnameArray.length); //迭代输出获得的值 for(var i=0;i<tnameArray.length;i++){ window.alert(tnameArray[i].value); } }
2,getElementById()方法:
寻找一个有着给定 id 属性值的元素,返回值是一个有着给定 id 属性值的元素 节点。如果不存在这样的元素,它返回 null.
var oElement = document.getElementById ( sID )
**该方法只能用于 document 对象
举例:
3,通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性
<input type="text" value="吃饭" id="tid"> function test(){ //获取ID var usernameElement=document.getElementById(“tid"); //获取元素的值 alert("usernameElement.value: "+usernameElement.value) //获取元素的类型 alert("usernameElement.type: "+usernameElement.type) }
这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构,在文档中进行“短距离的旅行”。
请看下面这个 HTML 片段:
<table> <tr> <td>John</td> <td>Doe</td> <td>Alaska</td> </tr> </table>
在上面的HTML代码中,第一个 <td> 是 <tr> 元素的首个子元素(firstChild),而最后一个 <td> 是 <tr>元素的最后一个子元素(lastChild)。
此外,<tr> 是每个 <td>元 素的父节点(parentNode),这就是DOM父与子之间的关系;但是有的时候有的父节点不存在子节点那么就需要进行判断在读取,在判断是我们用到了一个方法hasChildNodes()方法
hasChildNodes()
该方法用来检查一个元素是否有子节点,返回值是 true 或 false.
var booleanValue = element.hasChildNodes();
文本节点和属性节点不可能再包含任何子节点,所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.如果 hasChildNodes 方法的返回值是 false,则 childNodes,firstChild,lastChild 将是空数组和空字符串。
在用元素子节点的属性读取时我们先要获得根节点:
有两种特殊的文档属性可用来访问根节点:
document.documentElement
document.body
第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。
第二个属性是对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问
DOM的属性
每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
nodeName(节点名称)
nodeValue(节点值)
nodeType(节点类型)
1,DOM属性nodeName
nodeName 属性含有某个节点的名称。
var name = node.nodeName;
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释:nodeName 所包含的 XML 元素的标签名称永远是大写的
注:nodeName 是一个只读属性。
2,DOM属性nodeValue
nodeValue:返回给定节点的当前值(字符串)
如果给定节点是一个属性节点,返回值是这个属性的值。
如果给定节点是一个文本节点,返回值是这个文本节点的内容。
如果给定节点是一个元素节点,返回值是 null
nodeValue 是一个 读/写 属性,但不能对元素节点的 nodeValue 属性设置值,
但可以为文本节点的 nodeValue 属性设置一个值。
var li = document.getElementById(“li”);
if(li.firstChild.nodeType == 3)
li.firstChild.nodeValue = “国庆60年”;
3,DOM属性 nodeType
nodeType:返回一个整数,这个数值代表着给定节点的类型。
nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种:
Node.ELEMENT_NODE ---1 -- 元素节点
Node.ATTRIBUTE_NODE ---2 -- 属性节点
Node.TEXT_NODE ---3 -- 文本节点
nodeType 是个只读属性
举例:
如下的html: 请将select中的文本输出(用两种方法来写)
<body> <div> <form action=""> 用户名:<input type="text" name="name" /> 学历:<select id="edu" name="education"> <option value="大专">大专生</option> <option value="本科">本科生</option> <option value="硕士">硕士生</option> <option value="博士">博士生</option> </select> <input type="submit" value="注册" /> </form> </div> 用户的学历是: <div id="showMsg"> </div> </body>
第一种(用getElementById()和getElnmentByNmae()方法读取)
<script type="text/javascript"> window.onload = function() { //通过getElementById("edu")方法获取select的对象 var edus = document.getElementById("edu"); //通过select中options集合获取所有的option对象 var edus1 = edus.options; var msg =""; //遍历所有的option对象的文本值 for(var i=0;i<edus1.length;i++){ msg+=edus1[i].innerHTML+","; } //把获取的msg信息写入到showMsg的div中 document.getElementById("showMsg").innerHTML=msg; } </script>
第二种(通过元素节点的属性来读取)
<script type="text/javascript"> window.onload = function() { //通过getElementById("edu")方法获取select的对象 var edus = document.getElementById("edu"); var edus1 = edus.childNodes; alert(edus1.length); var fc = edus.firstChild; alert(fc.nodeName); var lc = edus.lastChild; alert(lc.nodeName); var llc = lc.firstChild; alert(llc.nodeValue); var msg=""; for(var i=0;i<edus1.length;i++){ if(edus1[i].nodeType==1) msg+=edus1[i].lastChild.nodeValue+","; } document.getElementById("showMsg").innerHTML=msg; } </script>
发表评论
-
项目框架和项目架构的区别是什么?
2012-05-17 12:31 1848项目框架和项目架构的区别是什么?谁能告诉我啊! -
(原创)javascript 实现批量打印《简历》
2012-04-16 15:57 20939(原创)javascript 实现批量打印《简历》 ... -
java+Ckeditor
2012-03-23 18:09 1975CKEditor 二次开发 ---- 为 ... -
iteye 这是咋了
2012-03-23 17:45 11iteye这是咋了 发一篇文章就这么难嘛 越来越他妈的垃圾了 ... -
不查不知道 一查全知道(hibernate注解实现set集合排序)
2011-12-21 16:09 1392@ManyToMany(cascade = { Cascade ... -
《终于解决了》检索 COM 类工厂中 CLSID 为 {0002E510-0000-0000-C000-000000000046}
2011-08-24 18:23 42167异常详细信息: System.Runtime.InteropS ... -
JDK7.0语法新特性及下载
2011-08-12 17:28 28141,菱形语法(泛型实例 ... -
系统性能调优总结分享(转载)
2011-07-01 13:33 1547概述 Ø 性能优化的思 ... -
JAVA内存问题:Java heap space
2011-06-29 14:09 1956错误信息: javax.servlet.Servle ... -
Jquery从入门到精通及附件下载(一)
2011-03-30 08:15 3840Jquery从入门到精通及 ... -
Json 浅谈及解析
2011-03-25 17:07 2267Json 浅谈及解析 Json简介 ... -
Ajax 实现分页及表与表的级联
2011-03-24 20:57 1488Ajax 实现分页及表与表的级联 时间过的真快转 ... -
《神》预测本周五 java 考试题!!
2011-03-22 19:56 1248预测本周五 java 考试题!! 1,加载类有哪几 ... -
DOM总结(三)及综合案例
2011-03-17 20:59 1083DOM总结(三)及综合案例 1,DOM属性-----re ... -
DOM 总结(一)
2011-03-16 20:24 1475DOM 总结(一) ... -
javascript实现全选,反选及全不选
2011-03-15 19:53 1397javascript实现全选,反选及全部选 html 代 ... -
仿谷歌,百度分页计算分析 代码实现
2011-03-10 19:32 2020仿谷歌,百度分页计 ... -
Java反射概念及类的反射的实例应用
2011-03-04 10:32 2349Java反射概念及类的反射的实例 一、反射的概念 : ... -
BeanUtils工具包下载及应用
2011-03-04 10:23 18693BeanUtils工具包下载及应用 ... -
“世界上最复杂的邮件”诞生了
2011-03-04 08:04 1355“世界上最复杂的邮件” ...
相关推荐
#### 二、DOM 与 DHTML 的关系 **DHTML**(Dynamic HTML)是动态 HTML 的简称,它是 HTML、CSS、DOM 和 JavaScript 结合的结果。DOM 在 DHTML 中扮演着核心的角色,因为它提供了对页面元素的访问能力,使得页面能够在...
### JavaScript DOM API 总结 #### 一、概述 JavaScript 的 Document Object Model (DOM) API 是一种用于 HTML 和 XML 文档的标准编程接口。通过 DOM API,开发者能够动态地访问、更新文档的内容、结构和样式。...
以下是对“JavaScript获取HTML DOM节点元素的方法的总结”的详细阐述,旨在帮助开发者更好地理解和应用DOM操作。 ### 一、通过`document`对象获取DOM节点 #### 1. `document.getElementById(elementId)` 这个方法...
总结,DOM4J作为Java处理XML的首选工具之一,其易用性、灵活性和高效性为XML操作带来了极大的便利。了解并掌握DOM4J,对于提升XML相关项目的开发效率至关重要。通过阅读DOM4J的API文档(如`dom4j-2.0.3-javadoc.jar`...
总结,dom4j是一个强大且灵活的XML处理库,提供了丰富的API来读取、操作和生成XML文档。通过利用XPath的支持,可以高效地定位和提取XML数据,极大地简化了XML编程。在实际开发中,根据项目需求选择合适的解析器...
总结,PHP Simple HTML DOM解析库为PHP开发者提供了一种高效、灵活的HTML处理方式,无论是简单的数据提取还是复杂的页面重构,都能得心应手。只要熟悉了它的API,就能轻松地驾驭HTML文档,让Web开发变得更便捷。
总结,DOM4J-2.1.1.jar作为一款强大的XML处理工具,不仅具备了基本的XML操作能力,还提供了XPath支持、事件驱动处理等功能,使得在处理XML文档时更加便捷高效。在实际开发中,无论是简单的XML解析,还是复杂的XML...
总结一下,本书《JavaScript DOM编程艺术》主要涵盖了以下知识点: 1. JavaScript基础:包括语法、变量、数据类型、函数等。 2. DOM基础:解释了DOM的概念,如何选择、遍历、创建和修改DOM元素。 3. 事件处理:学习...
#### 二、环境搭建与准备工作 在开始使用DOM4j之前,首先需要下载DOM4j库并将其添加到项目的类路径中。可以通过访问DOM4j官网或通过Maven等构建工具来获取最新的DOM4j库。 **步骤1:下载DOM4j库** - 访问DOM4j...
标题 "dom4j2" 指的是DOM4J的第二个主要版本,这是一个流行的Java库,专门用于处理XML文档。DOM4J是一个灵活且功能强大的API,它提供了丰富的功能来读取、写入、修改以及操作XML文件。在这个场景中,我们可能会探讨...
总结,"根据DOM将html转为canvas图片格式"这个主题涉及了DOM操作、Canvas绘图、HTML5新特性以及前端兼容性问题。在实际应用中,我们需要结合HTML2Canvas等工具,遵循一定的步骤和最佳实践,才能实现将HTML页面转换...
在前端开发中,DOM(Document Object Model)是...总结,遍历DOM元素是前端开发中的常见任务,掌握不同的遍历方法及其应用场景,能有效提高代码质量和性能。理解DOM遍历的原理并合理运用,是提升前端开发能力的关键。
总结,DOM手册作为中文参考资源,涵盖了DOM的基本概念、节点操作、事件处理、与JavaScript的结合使用等多个方面,对Web开发者来说是一份宝贵的教程。通过深入学习和实践,开发者可以更有效地操纵网页内容,创建出...
总结来说,DOM4J是Java开发中处理XML文档的强大工具,无论是在解析、创建、修改还是查询XML文档上,都能提供简洁的API和高效的操作。通过理解并熟练运用DOM4J,开发者可以更高效地进行XML相关的开发工作。
总结,DOM4J-1.6.1版本是一个强大且易用的XML处理工具,它简化了XML文档的操作,提供了高效、灵活的解决方案,使得开发者能够更好地处理XML数据。无论是新手还是经验丰富的开发者,都能从中受益。
通过以上总结,我们了解到Schema和DOM在XML文档验证和处理中的重要作用。Schema不仅提供了强大的数据类型验证功能,还支持自定义数据类型,使得XML文档的定义更加灵活多样。而DOM则为开发者提供了一种便捷的方式去...