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文件的函数代码分享
Jul 28 Javascript
javascript学习小结之prototype
Dec 03 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
javascript对象的相关操作小结
May 16 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
详解小程序缓存插件(mrc)
Aug 17 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/05/21 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
PHP内置加密函数详解
2016/11/20 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
Vue组件化开发思考
2018/02/02 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
jQuery实现日历效果
2020/09/11 jQuery
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
Python登录注册验证功能实现
2018/06/18 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
python pip如何手动安装二进制包
2020/09/30 Python
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
JAVA代码查错题
2014/10/10 面试题
函授毕业自我鉴定
2014/02/04 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
入党自荐书范文
2014/03/09 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
律政俏佳人观后感
2015/06/09 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python