JS获取html对象的几种方式介绍


Posted in Javascript onDecember 05, 2013

document.getElementById("zx");

通过ID获取html元素对象,ID号在html文档当中应该是唯一的。返回的是唯一element对象。并且所有浏览器都兼容。

document.getElementsByTagName("span")[0];

通过标签查找html对象,由于html标签在一个页面中可能重复很多次,所以当前页面返回的是一个数组。可以根据标签出现的位置定位元素的对象。所有浏览器都兼容。

document.getElementsByName("hh")[0];

通过name属性来定位html对象,但是并不是所有标签都有name属性,但是我们可以人为的加上name属性,这样也可以定位到,由于name属性可能有多个,不唯一。所以这个方法返回的也是一个数组,同样我们也可以根据html当中name的位置,进行对name的定位。IE系列不兼容,不推荐使用。

innerHTML:这个方法是获取该html元素的具体html代码

document.getElementById("zx").innerHTML;

还可以更新元素的html代码:

document.getElementById("zx").innerHTML="<b>我们约会吧~</b>";

Javascript 相关文章推荐
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
JS获取URL中的参数数据
Dec 05 #Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 #Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 #Javascript
浅析JavaScript中的隐式类型转换
Dec 05 #Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 #Javascript
完美解决IE低版本不支持call与apply的问题
Dec 05 #Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 #Javascript
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
Python实现的快速排序算法详解
2017/08/01 Python
详解Python学习之安装pandas
2019/04/16 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
以下的初始化有什么区别
2013/12/16 面试题
Delphi CS笔试题
2014/01/04 面试题
大学军训感言
2014/01/10 职场文书
安踏广告词改编版
2014/03/21 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
负责人任命书范本
2014/06/04 职场文书
高一作文之乐趣
2019/11/21 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python
mysql查找连续出现n次以上的数字
2022/05/11 MySQL