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 相关文章推荐
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
微信小程序单选框自定义赋值
May 26 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函数的实现原理及性能分析(二)
2015/05/13 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
Vue指令指令大全
2019/02/09 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
Python抓取京东图书评论数据
2014/08/31 Python
Python功能键的读取方法
2015/05/28 Python
wxPython多个窗口的基本结构
2019/11/19 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
python生成word合同的实例方法
2021/01/12 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
与UNIX有关的几个名词
2015/09/17 面试题
财务会计人员岗位职责
2013/11/30 职场文书
实习生自我鉴定范文
2013/12/05 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
法人授权委托书样本
2014/09/19 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
2014年建筑工作总结
2014/11/26 职场文书
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python