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 设计模式 推荐
Oct 28 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 Javascript
12 种使用Vue 的最佳做法
Mar 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
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
各种快递查询--Api接口
2016/04/26 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
python多线程之事件Event的使用详解
2018/04/27 Python
Python列表解析配合if else的方法
2018/06/23 Python
python 接收处理外带的参数方法
2018/12/03 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
详解Python_shutil模块
2019/03/15 Python
python实现接口并发测试脚本
2019/06/25 Python
python分数表示方式和写法
2019/06/26 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
Java多态性的定义以及类型
2014/09/16 面试题
2015毕业实习推荐信
2015/03/23 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL