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编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
各种常用的JS函数整理
Oct 25 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
JS监听事件的叠加和移除功能
Nov 19 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
JavaScript编写开发动态时钟
Jul 29 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 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
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
CI框架中$this-&gt;load-&gt;library()用法分析
2016/05/18 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
jcrop基本参数一览
2013/07/16 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
Python实现批量压缩图片
2018/01/25 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
Python批量启动多线程代码实例
2020/02/18 Python
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
SQL中where和having的区别
2012/06/17 面试题
爱心募捐通知范文
2015/04/27 职场文书
吃通javascript正则表达式
2021/04/21 Javascript
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL