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 相关文章推荐
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
给before和after伪元素设置js效果的方法
Dec 04 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
Vue.js表单控件实践
Oct 27 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
js闭包的9个使用场景
Dec 29 Javascript
原生js实现自定义滚动条组件
Jan 20 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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
PHP网站提速三大“软”招
2006/10/09 PHP
处理单名多值表单的详解
2013/06/08 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
JavaScript对象学习经验整理
2013/10/12 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
浅析HTML5 Landmark
2020/09/11 HTML / CSS
房屋转让协议书范本
2014/04/11 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
检讨书格式范文
2015/05/07 职场文书
公司老总年会致辞
2015/07/30 职场文书
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis