`
cm14k
  • 浏览: 30693 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

访问XHTML元素

阅读更多

为了动态修改XHTML元素,必须能访问XHTML元素,DOM提供了2种方式来访问XHTML元素:

--  根据id访问

--  利用节点关系访问


(1)根据ID访问XHTML元素

document.getElementByID(idVal) : 返回文档中id属性值为idVal的XHTML元素

例如:

<script type="text/javascript">
	function accessById()
	{
		alert(document.getElementById("a").innerHTML + "\n"
		+ document.getElementById("b").value);
	}
	
</script>
 <body>
  <div id="a">中国</div>
   <textarea rows="3" cols="25" id="b">我是中国人</textarea>
   <br /> 
   <input type="button" value="访问" onclick="accessById()" />
 </body>

  (2)利用节点关系访问XHTML元素

一旦获取了某个XHTML元素,由于该元素实际上与DOM树的某个节点对应,因此可以利用节点间的父子、兄弟关系来访问XHTML元素。

利用节点关系访问XHTML元素的属性和方法如下:

Node parentNode:返回当前节点的父节点。只读属性

Node previousSibling: 返回当前节点的前一个兄弟节点,只读属性

Node nextSibling: 返回后一个兄弟节点

Node[] childNodes: 返回当前节点的所有子节点,只读属性

Node[] getElementsByTagName(tagName): 返回当前节点的具有指定标签名的所有子节点。

Node firstChild: 返回当前节点的第一个子节点

Node lastChild:最后一个子节点

 

(3)访问表单域控件

表单在DOM 中由HTMLFormElement对象表示,常用属性:

action: 指定表单的提交地址

elements:返回表单内全部表单域控件所组成的数组

length: 返回表单域的个数

method: 返回表单的method属性

target: 用户提交表单时的结果窗口

reset();重设表单

submit():提交表单

访问HTMlFormElement的更有效率的方法

 

formObj.elementName : 返回表单中id或elementName的表单域控件

 

(4)访问列表框、下拉菜单的选项

 

HTMLSelectElement代表一个列表或下拉菜单,HTMLSelectElement对象除了可使用普通XHTML元素的各种属性和方法外,还支持如下额外属性。

form: 返回所在表单对象

length:返回列表框、下拉列表的选项个数

options:返回所有选项组成的数组

selectedIndex:返回选中选项的索引

type:返回下拉列表的类型,即是否为多选。select-multiple or select-one

 

列表框、下拉菜单的选项由 HTMLOptionElement对象表示 常用属性如下:

form:

defaultSelected : 返回该选型是否默认被选中

index:索引

selected : 是否被选中

text: 返回该选项呈现出来的文本 即<option></option>之间的文本

value:返回每个选项的value值

 

 

 

分享到:
评论

相关推荐

    JavaScript处理、操作 XHTML元素的示例代码

    JavaScript处理、操作 XHTML元素的示例代码: 1.根据名称访问 XHTML元素 2.DHTML 模型 3.DOM模型 获取单选按钮 radio 的参数 获取复选框 checkbox 的参数

    wap2.0初探索XHTML MP、WCSS

    XHTML Basic (XHTML子集)+另外的一些XHTML的元素和属性 WAP浏览器与互联网之间 以前WAP网站(WML and WMLScript ) 更多的展示表现(presentation control ) 优势:开发的站点可以在WEB和无线上都可以使用,也可以...

    JSP.pdf教程学习

    网页开发者们通过结合HTML代码、XHTML代码、XML元素以及嵌入JSP操作和命令来编写JSP。 JSP通过网页表单获取用户输入数据、访问数据库及其他数据源,然后动态地创建网页。 JSP标签有多种功能,比如访问数据库、记录...

    JSP参考手册 中文CHM版

    网页开发者们通过结合HTML代码、XHTML代码、XML元素以及嵌入JSP操作和命令来编写JSP。 JSP通过网页表单获取用户输入数据、访问数据库及其他数据源,然后动态地创建网页。 JSP标签有多种功能,比如访问数据库、记录...

    JSP手册,可以帮助JSP入门以及了解

    网页开发者们通过结合HTML代码、XHTML代码、XML元素以及嵌入JSP操作和命令来编写JSP。 JSP通过网页表单获取用户输入数据、访问数据库及其他数据源,然后动态地创建网页。 JSP标签有多种功能,比如访问数据库、记录...

    java 的dom的读取xml

    如果您希望首先学习这些项目,请在我们的 首页 访问这些教程。 什么是 XPath? • XPath 使用路径表达式在 XML 文档中进行导航 • XPath 包含一个标准函数库 • XPath 是 XSLT 中的主要元素 • XPath 是一个 W3C ...

    js中通过getElementsByName访问name集合对象的方法

    1、查找给定name属性的所有元素,这个方法将返回一个...DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3

    JavaScript中对DOM节点的访问、创建、修改、删除

    用DOM方法和属性,你可以访问,修改,删除页面上任意一个元素,也是可以添加一个元素。DOM是独立于语言的API,可以被任意语言所实现,当然也包括了Javascript 看看下面的一个文本。 &lt;!DOCTYPE ...

    js 通过html()及text()方法获取并设置p标签的显示值

    例如要设置p元素的HTML代码,可以使用如下代码: 代码如下: //设置p元素的HTML代码 $(“p”).html(“欢迎您访问简明现代魔法图书馆~~”); 注意:html()方法可以用于XHTML文档,但不能用于XML文档。 text()方法 此...

    前端css+html+布局笔记

    xHtml语法规范 1.HTML中不区分大小写,但是尽量使用小写 2.HTML的注释不能嵌套 3.标签必须结构完整 要么成对出现 要么自结束标签 4.标签可以嵌套但是不能交叉嵌套 5.属性必须有值,且值必须加引号,单引号...

    JS中批量给元素绑定事件过程中的相关问题使用闭包解决

    在JS中,你写一个for循环的时候,内部的循环变量I其实是会保存在它运行的函数或类内的,所以你会发现你给元素批量绑定事件的时候,出现i=最后一个循环变量的值,这就很坑爹啊,解决的方案有2钟, 思路就是:把这个...

    js使用html()或text()方法获取设置p标签的显示的值

    此方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置...$("p").html("欢迎您访问简明现代魔法图书馆~~"); 注意:html()方法可以用于XHTML文档,但不能用于XML文档。 text()方法 此方法类似于JavaScript中

    HTML DOM简介_动力节点Java学院整理

    要改变页面的某个东西,JavaScript就需要对HTML文档中所有元素进行访问的入口。这个入口,连同对HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。在 1998 年,W3C 发布了第...

    艺帆婚纱摄影婚庆公司网站源码.rar

    婚庆公司着重点在于婚礼本身,会场布置着重点在场景的布置,婚礼大于会场布置,一场好的时尚个性婚礼婚礼,会场布置是为婚礼服务的,它是为了更好地表达婚礼而设置的一个元素,正如一场电影为表达主题而设置的周围...

    JSP 简介

    网页开发者们通过结合HTML代码、XHTML代码、XML元素以及嵌入JSP操作和命令来编写JSP。 JSP通过网页表单获取用户输入数据、访问数据库及其他数据源,然后动态地创建网页。 JSP标签有多种功能,比如访问数据库、...

Global site tag (gtag.js) - Google Analytics