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操作input type=radio的实现代码
Jun 14 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
从0开始学Vue
Oct 27 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
webpack4打包vue前端多页面项目
Sep 17 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 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 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
PHP数组函数知识汇总
2016/05/12 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
js css自定义分页效果
2017/02/24 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
Python部署web开发程序的几种方法
2017/05/05 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
python3实现绘制二维点图
2019/12/04 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
酒店出纳岗位职责
2013/12/29 职场文书
建筑经济管理专业求职信分享
2014/01/06 职场文书
心理健康教育制度
2014/01/27 职场文书
一年级学生期末评语
2014/04/21 职场文书
初中作文评语集锦
2014/12/25 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang