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 相关文章推荐
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
js倒计时简单实现代码
Aug 11 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
vue自定义全局共用函数详解
Sep 18 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
吃通javascript正则表达式
Apr 21 Javascript
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
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
JS Array对象入门分析
2008/10/30 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
vue实现购物车列表
2020/06/30 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
python原始套接字编程示例分享
2014/02/21 Python
Django开发的简易留言板案例详解
2018/12/04 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
python框架django项目部署相关知识详解
2019/11/04 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
Python如何定义一个函数
2015/09/01 面试题
2016大学生社会实践心得体会范文
2016/01/14 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
Django实现聊天机器人
2021/05/31 Python