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 相关文章推荐
js异或加解密效果代码
Jun 25 Javascript
再谈ie和firefox下的document.all属性
Oct 21 Javascript
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
vue data引入本地图片的两种方式小结
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
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
django中静态文件配置static的方法
2018/05/20 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
Python3如何判断三角形的类型
2020/04/12 Python
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
企业精神口号
2014/06/11 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
物业保安岗位职责
2014/07/02 职场文书
开发房地产协议书
2014/09/14 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
教师节横幅标语
2014/10/08 职场文书
科学育儿宣传标语
2014/10/08 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
培训通知
2015/04/17 职场文书
介绍信怎么写
2015/05/05 职场文书
毕业生入职感言
2015/07/31 职场文书
四群教育工作总结
2015/08/10 职场文书
关于五一放假的通知
2015/08/18 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis