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 相关文章推荐
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
图解js图片轮播效果
Dec 20 Javascript
JavaScript动态设置div的样式的方法
Dec 26 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 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/27 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
js获取class的所有元素
2013/03/28 Javascript
jQuery功能函数详解
2015/02/01 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
基于python编写的微博应用
2014/10/17 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
Python交互式图形编程的实现
2019/07/25 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
医学毕业生自我鉴定
2013/10/30 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
解除劳动合同协议书
2014/09/17 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
就业意向协议书
2015/01/29 职场文书
全陪导游词
2015/02/04 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
windows系统安装配置nginx环境
2022/06/28 Servers