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 相关文章推荐
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
Json实现传值到后台代码实例
Jun 30 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绘制一条弧线的方法
2015/01/24 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
Python实现配置文件备份的方法
2015/07/30 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
如何基于python测量代码运行时间
2019/12/25 Python
Django models filter筛选条件详解
2020/03/16 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
法律专业应届生自荐信范文
2014/01/06 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
森林防火宣传标语
2014/06/27 职场文书
完整版商业计划书
2014/09/15 职场文书
教师工作决心书
2015/02/04 职场文书
党员评议自我评价
2015/03/03 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python