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 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
js自执行函数的几种不同写法的比较
Aug 16 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
webpack+vue中使用别名路径引用静态图片地址
Nov 20 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 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.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
php array_map()函数实例用法
2021/03/03 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
web打印小结
2017/01/11 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
python笔记(2)
2012/10/24 Python
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
带你认识Django
2019/01/15 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
python属于跨平台语言码
2020/06/09 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
法国房车租赁网站:Yescapa
2019/08/26 全球购物
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
关于安全演讲稿
2014/05/09 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
2015年调度员工作总结
2015/04/30 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
《学会看病》教学反思
2016/02/17 职场文书
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js