DOM模型获得元素的值

最新推荐文章于 2022-07-19 14:43:41 发布
原创 最新推荐文章于 2022-07-19 14:43:41 发布 · 137 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Ajax #SSH #Cache #EJB #JavaScript #ViewUI

第一个简单的例子（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>
 
【JavaScript - Web API】DOM（获取元素 / 事件基础 / 操作元素 / 节点操作）
qq_30148319的博客
05-18 588
一、DOM 简介 1、什么是 DOM ？ 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 2、DOM 树 文档：一个页面就是一个文档，DOM 中使用 document 表示。 元素：页面中的所有标签都是元素，DOM 中使用 element 表示。 ...
DOM元素三大系列
每天都要努力学习哦~~
10-31 543
offset元素偏移量 获取元素距离带有定位父元素的位置 获取元素自身的大小(宽度高度) 返回的数组不带单位 offset常用属性 element.offsetParent 返回作为该元素带有定位的父级元素,如果父级没有定位则返回body element.offsetTop 返回元素相对带有定位父元素上方的偏移 element.offsetLeft 返回元素相对带有定位父元素左边框的偏移 element.offsetWidth 返回自身包括padding 边框,内容区的宽度,返回值不带单位
DOM—操作元素（获取属性值、设置属性值、 移除属性）
m0_59030524的博客
02-18 2109
1. 自定义属性的操作 1.1 获取属性值 element . 属性 获取属性值；（元素本身自带的属性） element . getAttribute( ' 属性 ' )；（主要获取自定义的属性（标准）） <body> <div id="demo" index='12'></div> <script> var div = document.querySelector('div'); // 1. 获...
DOM：获取和设置元素的属性值，element.属性和element.getAttribute(“属性“)
weixin_46682277的博客
03-19 2313
获取属性值 1.element.属性：获取元素属性值 注意：element属性想要获取元素类的属性值要用className，而不是class。 <div class="box"></div> <script> var box = document.querySelector(".box"); console.log(box.className); // 输出box </script> 2.element.getAttribute(“属性”); 获取元素属性值
DOM 中的Element详解
荆莿鸟
07-05 1229
DOM_Element /* Element属性说明 nodeType:1 nodeName:元素标签名 nodeVlaue:值为null parentNode:可能是Document或Element 其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或
element元素 取属性_js 获取Dom元素、获取和设置属性
weixin_39802020的博客
12-21 1408
Dom元素1 getElementByIddocument.getElementById(id) 返回一个对象2 getElementsByTagNamedocument.getElementsByTagName(tag) 返回一个对象数组运行使用*通配符，获取所有元素dom.getElementsByTagName('*') 获取dom下所有子元素3 getElementsByClassNa...
操纵DOM之---attr 获取与设置属性的值
天下无敌庞成勇
11-16 4608
在使用JavaScript编写网页代码的过程中，多数时间都在操纵DOM，比如Ajax返回json数据、动态地向DOM添加显示节点或者是动态地更改页面上元素的CSS和属性等。DOM的全称是Document Object Model，即文档对象模型，是一种与浏览器、平台和语言无关的接口，它可以让用户代码访问任何浏览器中呈现的元素，可以将DOM看作是网页呈现的一种标准。attr 获取与设置属性的值 要
DOM模型
WYG2020的博客
02-09 1819
一、DOM模型概述 HTML文档只有一个根节点，而其他节点以根节点子节点或孙子节点的形式存在。最终形成一个结构化文档。DOM模型则用于导航、访问结构化文档的节点，并提供新增，修改，删除结构化本档的能力。 DOM并不是一种技术，它只是访问结构化文档（主要是XML文档和HTML文档）的一种思想。DOM解析器的作用就是完成结构化文档和DOM树之间的转换关系。通常来说，DOM解析器解析结构化文档就是将磁盘...
DOM——文件对象模型（元素位置、盒子模型）
qq_52301431的博客
07-19 394
是指离它最近有定位的上层元素（比如它的爸爸定位了那就打印爸爸，如果爸爸没定位，爷爷定了，就打印爷爷）body比较特殊，如果找到它了，它没有定位，但是也返回它，但是body.offsetParent就是null。dom.offsetLeft，dom.offsetTop//对于无定位父级的元素，返回相对文档的坐标；dom.offsetParent//返回最近的定位父级元素，如无，返回body元素，document.body.offsetParent为null​。el.clientTop上边框线的宽度。...
VC实现DOM枚举网页表单元素及值信息
该文件标题为“VC DOM对象枚举当前网页表单元素值.rar”，其核心内容涉及使用Visual C++（简称VC）技术对当前处于顶层窗口的网页中的DOM（文档对象模型）进行操作，重点在于枚举网页中所有表单元素及其对应的值信息...
javascript使用Dom改变超链接前面文本框的值
10-30
### JavaScript 使用 DOM 改变超链接前面文本框的值 #### 概述 在Web开发中，DOM（Document Object Model）是一种用于HTML和XML文档的标准对象模型。它将文档视为节点树，允许开发者通过JavaScript来访问、修改...
Js 获取HTML DOM节点元素的方法小结
10-30
- document.getElementsByName(elementName)：这个方法返回的是一个HTMLCollection集合，包含了所有具有指定name属性值的元素。通常用在input元素的name属性上，因为一个name可能对应多个表单元素。 - document....
DOM对象，控制HTML元素
weixin_30765505的博客
07-13 361
认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 节点属性: 遍历节点树: DOM操作: <!DOCTYPE HTML> <html> <head> <met...
D3 笔记一：选择元素、DOM 操作、绑定数据
JimmyLuo17的博客
07-28 3041
引入 D3 文件：<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 选择集与链式语法 使用 d3.select() 或 d3.selectAll() 选择元素后返回的对象，就是选择集。有人会发现，D3 能够连续不断地调用函数，形如：d3.select().selectAll().text()这称为链式语法，和
【AutoHotKey】基于 Bark 推送服务的 Windows Handoff 剪贴板支持工具，解决跨设备同步痛点！.zip
12-31
【AutoHotKey】基于 Bark 推送服务的 Windows Handoff 剪贴板支持工具，解决跨设备同步痛点！.zip
从营收增长承压到区域创新生态能级跃升，政府部门借助需求牵引型技术经纪服务能实现多大跨越？.docx
12-31
从营收增长承压到区域创新生态能级跃升，政府部门借助需求牵引型技术经纪服务能实现多大跨越？
【C 语言】基于 AT89C51 单片机的电梯程序控制系统（高效响应楼层请求，源码可复用）.zip
12-31
【C 语言】基于 AT89C51 单片机的电梯程序控制系统（高效响应楼层请求，源码可复用）.zip
如何利用闭环的新一代成果转化SaaS解决市场化技术转移机构面临的市场竞争加剧难题？.docx
12-31
如何利用闭环的新一代成果转化SaaS解决市场化技术转移机构面临的市场竞争加剧难题？
nvm安装包 目前已压缩 解压收直接双击安装即可 我从github上下载的，nvm的版本是1.2.2，windows 64位的
最新发布
12-31
nvm安装包 目前已压缩 解压收直接双击安装即可 我从github上下载的，nvm的版本是1.2.2，windows 64位的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值