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 Cookie的读取和写入函数
Dec 08 Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 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新手上路(十四)
2006/10/09 PHP
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
Angularjs修改密码的实例代码
2017/05/26 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
JS如何设置元素样式的方法示例
2017/08/28 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
Python走楼梯问题解决方法示例
2018/07/25 Python
python利用tkinter实现屏保
2019/07/30 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
高中三年学习生活的自我评价
2013/10/10 职场文书
商场总经理岗位职责
2014/02/03 职场文书
农村面貌改造提升实施方案
2014/03/18 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
甘南现象心得体会
2014/09/11 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang
一条 SQL 语句执行过程
2022/03/17 MySQL