`

DOM模型获得元素的值

AjaxSSHCacheEJBJavaScript 
阅读更多

第一个简单的例子（getElementById()）: 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>根据ID来访问HTML元素</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<script type="text/javascript">
		function accessById(){
			var a = document.getElementById("a").innerHTML;
			var b = document.getElementById("b").value;     //这里要注意Value和value的区别
			alert(a + "\n" + b);
		}
	</script>
	
  </head>
  
  <body>
    <div id="a">我是一个学生</div>
    <textarea rows="3" cols="12" id="b">我要好好学习JAVA</textarea><br>
    <input type="button" value="访问这两个元素" onclick="accessById();">
  </body>
</html>

 

第二个根据根节点访问HTML属性

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>根据节点关系访问HTML元素</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<style type="text/css">
		/* 定义改变背景色的CSS，表示被选中的项  */
		.selected{
			background-color: #6666ff
		}
	</style>
	
  </head>
  
  <body>
	<ol id="book">
		<li id="java">JAVA</li>
		<li id="ssh">SSH</li>
		<li id="ajax" class="selected">Ajax</li>
		<li id="xml">XML</li>
		<li id="ejb">EJB</li>
		<li id="jsp">JSP</li>
	</ol>
	<input type="button" value="父节点" onclick="change(currentTarget.parentNode);" />
	<input type="button" value="第一个" onclick="change(currentTarget.parentNode.firstChild.nextSibling);" />
	<input type="button" value="上一个" onclick="change(currentTarget.previousSibling.previousSibling);" />
	<input type="button" value="下一个" onclick="change(currentTarget.nextSibling.nextSibling);" />
	<input type="button" value="最后一个" onclick="change(currentTarget.parentNode.lastChild.previousSibling);" />
	
	<script type="text/javascript">
		var currentTarget = document.getElementById("ajax");
		function change(target){
			alert(target.innerHTML);
		}
	</script>
  </body>
</html>

 

访问列表项：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>访问列表项</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">

  </head>
  
  <body>
    <select id="select1" name="select1" size="6">
    	<option value="java">JAVA</option>
    	<option value="ssh">SSH</option>
    	<option value="ajax">Ajax</option>
    	<option value="xml">XML</option>
    	<option value="ejb">EJB</option>
    	<option value="jsp">JSP</option>
    </select><br>
    <input type="button" value="第一个" onclick="change(curTarget.options[0]);" />
    <input type="button" value="上一个" onclick="change(curTarget.options[curTarget.selectedIndex - 1]);" />
    <input type="button" value="下一个" onclick="change(curTarget.options[curTarget.selectedIndex + 1]);" />
    <input type="button" value="最后一个" onclick="change(curTarget.options[curTarget.length - 1]);" />
  	<script type="text/javascript">
  		var curTarget = document.getElementById("select1");
  		function change(target){
  			alert(target.text);
  		}
  	</script>
  </body>
</html>

 

访问表单域控件： 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>访问表单域控件</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
  </head>
  
  <body>
	<form action="" id="d" name="form1" method="post">
		<input name="username" type="text" /><br>
		<input name="password" type="text" /><br>
		<select name="color">
			<option value="red">红色</option>
			<option value="blue">蓝色</option>
		</select>
		<input type="button" value="第一个" onclick="alert(document.getElementById('d').elements[0].value);" />
		<input type="button" value="第二个" onclick="alert(document.getElementById('d').elements['password'].value);" />
		<input type="button" value="第三个" onclick="alert(document.getElementById('d').color.value);" />
		<input type="button" value="第一个" onclick="alert(document.form1.elements[0].value);" />
		<input type="button" value="第二个" onclick="alert(document.form1.elements['password'].value);" />
		<input type="button" value="第三个" onclick="alert(document.form1.color.value);" />
	</form>
	
  </body>
</html>
 

分享到：
| 单例模式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DOM_参考手册.pdf

    在DOM模型中，文档被视为一颗倒立的树，其根节点是`document`对象，表示整个文档。它包含了一个`&lt;html&gt;`子节点。文档中的每个节点都可以被视作树的一个部分。 #### 1.2 节点类型 DOM文档中的节点类型主要分为三种：...

    HTML javascript DOM

    - **DOM Level 2**: 于 2000 年由 W3C 发布，得到了 Mozilla、Safari 和 Opera 的支持，但 IE6/7 仍不支持 DOM2。 - **DOM Level 3**: 2004 年由 W3C 发布，进一步扩展了 DOM 的功能。 随着 DOM 标准的不同版本，...

    dom4j demo 使用

    DOM4J这个名字来源于Document Object Model (DOM) 和Java的结合，但它实际上并不是DOM API的一个实现，而是基于SAX和DOM的混合模型。DOM4J在性能和内存占用方面优于标准DOM，同时提供了更多的功能，如XPath查询和XML...

    JS操作元素方法

    例如，childNodes 属性返回当前元素所有子元素的数组，firstChild 属性返回当前元素的第一个下级子元素，nodeValue 属性指定表示元素值的读/写属性等。 方法是指 DOM 元素可以执行的操作，例如 getElementById 方法...

    HTML5 元素通用DOM接口

    `position`参数可以是以下四个值之一：“beforebegin”、“afterbegin”、“beforeend”或“afterend”，分别表示在当前元素之前、内部开始处、内部结束处或之后插入新内容。 ```javascript element....

    jQuery DOM 1.pptx

    回忆：DOM = Document Object Model（文档对象模型） 1、jQuery获得元素 三个简单实用的用于DOM操作的jQuery方法。 text() //设置或返回所选元素的文本内容 html() //设置或返回所选元素的内容（包括HTML标记） val...

    html DOM 节点的各种高度属性

    当计算元素总高度时，需要将这两个值加到`clientHeight`上，以得到`offsetHeight`。 5. `paddingTop`和`paddingBottom` `paddingTop`和`paddingBottom`是元素内部的上、下填充量。它们也是计算元素总高度时需要...

    dom4j解析XML所需jar包

    DOM4J的名字来源于DOM（Document Object Model）和Java的结合，但它的设计理念比标准DOM更先进，因为它支持XPath和事件驱动的解析模型。 在XML解析领域，DOM4J主要涉及以下知识点： 1. **DOM4J API**：DOM4J提供了...

    Dom4j 操作 XML

    同时，Dom4j使用DOM模型，允许你以面向对象的方式处理XML，而无需了解底层的解析机制。 总结来说，这段代码展示了如何使用Dom4j库通过Java读取XML文件，解析成`Document`对象，获取根元素，并开始遍历XML结构。实际...

    dom4j、XStream的jar包

    1. **DOM4J架构**：DOM4J基于事件驱动和SAX的解析器，同时也支持DOM和DOM4J特定的树模型。它的设计目标是提供一个轻量级、高性能的API，使得开发者能够方便地处理XML文档。 2. **解析XML**：DOM4J通过`Document`...

    DOM文档对象中文手册

    DOM的核心在于将网页结构转化为可编程的对象模型，使得JavaScript或其他脚本语言能够通过API来读取、修改、添加或删除网页内容。DOM将整个文档视为一个树形结构，每个元素、属性、文本节点都是树中的一个节点，这些...

    xml解析dom4j.jar

    6. **事件驱动解析**：除了DOM模型外，DOM4J还支持SAX（Simple API for XML）解析方式，这是一种基于事件的解析模式，适用于处理大型XML文件，因为它不需要一次性加载整个文档到内存。 7. **StAX（Streaming API ...

    dom4j-1.6.1-API.zip

    - **DOMReader**: 使用DOMReader可以基于DOM模型解析XML，但这种方式会将整个XML文档加载到内存中，适用于小型XML文档。 ### 3. 操作XML - **添加/删除元素**: Element对象提供了addElement和removeChild方法，...

    经典的DOM解析XML范例

    3. 使用`FileInputStream`打开XML文件，并通过`DocumentBuilder`的`parse()`方法解析XML输入流，得到`Document`对象，它是DOM模型的根节点。 4. 通过`Document`对象获取XML的根元素，通常使用`getDocumentElement()`...

    sax解析xml尤其是获取元素的值或者内容

    在`endElement()`方法中，可以处理累积的字符，得到完整的元素值。 4. **处理命名空间**： 如果XML文档包含命名空间，需要在处理器中处理URI（统一资源标识符）。`uri`参数可以用于识别元素的命名空间，`localName...

    Jdom、Dom4j 、dom解析xml文件

    4. 遍历和操作：通过得到的对象结构，遍历XML文档并执行所需的操作，如读取属性值、修改元素内容等。 在实际应用中，选择哪种解析器主要取决于项目需求。如果XML文件较小，且需要频繁读写，DOM可能是一个不错的选择...

    dom对象与jquery对象转换[参考].pdf

    相反，要将jQuery对象转换为DOM对象，通常需要通过索引来访问集合中的特定元素，如`$("#msg")[0]`，这样得到的才是DOM元素，可以使用`innerHTML`等DOM方法。还有其他方式，如`$("#msg").eq(0)[0]`、`$("#msg").get(0...

    DOM、JDOM、DOM4J解析XML实例.pdf

    3. **构建 XML 结构**：创建 XML 的根元素以及其他子元素，并设置相应的属性值。 4. **写入文件**：最后使用 `Transformer` 将构建好的 `Document` 对象转换为 XML 字符串并保存到文件中。 #### JDOM 和 DOM4J 解析...

    dom4j-1.6.rar

    5. **事件驱动的SAX解析**：DOM4J不仅提供完整的DOM模型，还支持SAX解析器，可以在读取大型XML文件时节省内存。 6. **XML Schema支持**：DOM4J可以用来验证XML文档是否符合XML Schema定义的规则。 **DOM4J的使用...

Magicbox
Global site tag (gtag.js) - Google Analytics