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 相关文章推荐
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
关于js遍历表格的实例
Jul 10 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
基于jquery.page.js实现分页效果
Jan 01 jQuery
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
vue实现行列转换的一种方法
Aug 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使用array_search函数实现数组查找的方法
2015/06/12 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
详解使用Python处理文件目录的相关方法
2015/10/16 Python
python在不同层级目录import模块的方法
2016/01/31 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
Python多进程原理与用法分析
2018/08/21 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
python实现Virginia无密钥解密
2019/03/20 Python
python实现代码统计程序
2019/09/19 Python
Django在Model保存前记录日志实例
2020/05/14 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
关于运动会的广播稿
2014/09/22 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python