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 相关文章推荐
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
javascript连续赋值问题
Jul 08 Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 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
调频问题解答
2021/03/01 无线电
PHP.MVC的模板标签系统(五)
2006/09/05 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
javascript 面向对象的JavaScript类
2010/05/04 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
J2EE中的容器都包括哪些
2013/08/21 面试题
部队领导证婚词
2014/01/12 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
学校标语大全
2014/06/19 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
卖房授权委托书样本
2014/10/05 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
2014年党员整改措施
2014/10/24 职场文书
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python
mysql事务对效率的影响分析总结
2021/10/24 MySQL