JavaScript获取页面上某个元素的代码


Posted in Javascript onMarch 13, 2011

W3C标准推荐的语法是通过document文档对象获取DOM树内的内的某个元素,常见的方法有getElementById()、getElementsByName()、getElementsByTagName(),他们的作用分别通过id属性、name属性/标签名称返回单个节点或节点集合。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JavaScript获取页面上某个元素的方法 </title> 
<script type="text/javascript"> 
function doGetElementsByTagName(){ 
var x=document.getElementsByTagName("input"); 
alert(x.length); 
} 
function doGetElementsByName(){ 
var x=document.getElementsByName("myInput"); 
alert(x.length); 
} 
function getValue(){ 
var x=document.getElementById("myHeader"); 
alert(x.innerHTML); 
} 
</script> 
</head> 
<body> 
<h1 id="myHeader" onclick="getValue();">这里是头部</h1> 
<p>点击头部弹出myHeader的内容</p> 
<input type="text" name="myInput" size="20" /> 
<br /> 
<br /> 
<input type="text" name="myInput" size="20" /> 
<br /> 
<br /> 
<input type="text" name="myInput" size="20" /> 
<br /> 
<br /> 
<input type="button" onclick="doGetElementsByTagName();" value="有多少个input元素?"/> 
<br /> 
<input type="button" onclick="doGetElementsByName();" value="有多少个name的值为myInput?"/> 
</body> 
</html>

当点击:JavaScript获取页面上某个元素的代码时,弹出:JavaScript获取页面上某个元素的代码

当点击:JavaScript获取页面上某个元素的代码时,弹出:JavaScript获取页面上某个元素的代码

 

当点击:JavaScript获取页面上某个元素的代码时,弹出:JavaScript获取页面上某个元素的代码

 

特别是在以下代码中,

function getValue(){ 
var x=document.getElementById("myHeader"); 
alert(x.innerHTML); 
}

涉及到了一个知识点:HTML DOM innerHTML ,作用是从对象的起始位置到终止位置的全部内容,包括Html标签
Javascript 相关文章推荐
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
分析javascript原型及原型链
Mar 18 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
jQuery hover 延时器实现代码
Mar 12 #Javascript
js中if语句的几种优化代码写法
Mar 12 #Javascript
鼠标事件延时切换插件
Mar 12 #Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 #Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 #Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 #Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 #Javascript
You might like
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
js 内存释放问题
2010/04/25 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
Python学习资料
2007/02/08 Python
Python 创建子进程模块subprocess详解
2015/04/08 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
如何将python中的List转化成dictionary
2016/08/15 Python
Python中join函数简单代码示例
2018/01/09 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
Python双向循环链表实现方法分析
2018/07/30 Python
python面试题之列表声明实例分析
2019/07/08 Python
python调用支付宝支付接口流程
2019/08/15 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
Python标准库itertools的使用方法
2020/01/17 Python
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
大学生的四年学习自我评价
2013/12/13 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
小班下学期个人总结
2015/02/12 职场文书
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS
Java设计模式之代理模式
2022/04/22 Java/Android