通过ID获取元素
网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人。那么在网页中,我们通过id先找到标签,然后进行操作。
语法:
document.getElementById(“id”)
注:获取的元素是一个对象,如想对元素进行操作,我们要通过它的属性或方法。
例如:

运行结果为:

理解:输出为null,是因为代码是顺序执行的,先调用了JavaScript代码,但是这个时候还没有ID为“con”的元素,得到空


理解:document.getElementById('con')获取的只是P标签,返回的是[object HTMLParagraphElement],
document.getElementById('con').innerHTML获取的才是P标签里的内容,返回的是JavaScript
innerHTML 属性
innerHTML 属性用于获取或替换 HTML 元素的内容。
语法:
Object.innerHTML
注意:
1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。
2.注意书写,innerHTML区分大小写。

运行结果为:

网上对于此形象的解释:
con 和 mychar 都是名字,随便怎么取是我们的自由。getElementById就像是个抓手,把h2这个元素抓到了,但是getElementById只会抓人,不会做思想工作,没能力改变它抓来的人,这时候就要靠innerHTML,它的作用就是从改变抓来的人。
通过ID获取元素的更多相关文章
- JavaScript通过ID获取元素坐标
JavaScript通过ID获取元素坐标 function getElementPos(elementId) { var ua = navigator.userAgent.toLowerCase ...
- js中用tagname和id获取元素的3种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript querySelector和getElementById通过id获取元素的区别
querySelector和getElementById通过id获取元素的区别 <!DOCTYPE html> <html> <head> <meta cha ...
- 通过ID获取元素 注:获取的元素是一个对象,如想对元素进行操作,我们要通过它的属性或方法。
通过ID获取元素 学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人.那么在网页中,我们通过id ...
- js之checkbox的代码全选/全不选,使用id获取元素,而不是name
每当有多个选项的时候,都会有一种想法是:全选,全不选,如果子选项有被选,父选项也得被选. 注意:这里是根据id来获取元素的,但是不能直接用getElementById,因为那只能返回一个,而不是集合. ...
- JavaScript通过元素id和name直接获取元素的方法
概览: 偶然的机会,我在JavaScript中直接用HTML元素的id属性来获取该元素,并设置该元素的其他属性值,竟然能够正确解析不报错!于是我去查阅相关资料,也有其他同行这么用. 虽然说这种用法不是 ...
- 根据id设置、获取元素的文本和value
/** * 根据id获取元素文本 * @param {String} id|元素id * return {Integer || String} text */function getText(id){ ...
- 跟随标准与Webkit源码探究DOM -- 获取元素之getElementById
按照ID获取元素 -- getElementById 标准 DOM 1,定义在HTMLDocument Interface 中,原型Element getElementById(in DOMStrin ...
- JavaScript中的获取元素的方法
通过id获取元素 document.getElementById(id名字) 通过标签获取元素 document/元素.getElementsByTagName(标签名) 通过css选择器获取元素 d ...
随机推荐
- sql分页查询(2005以后的数据库)和access分页查询
sql分页查询: select * from ( select ROW_NUMBER() over(order by 排序条件) as rowNumber,* from [表名] where 条件 ) ...
- PKGSRC
PKGSRC简介 pkgsrc: The NetBSD Packages Collection The NetBSD Packages Collection (pkgsrc) 是在NetBSD系统以及 ...
- 针对西门子PLC蠕虫的实现
研究背景 随着“互联网+”.“中国智能制造2025“.“工业4.0”等概念的提出,为了提高生产率,独立.隔离的传统工控领域将迎来了新的互联网时代,越来越多的工控设备(如控制器.机器人.数控机床)将被暴 ...
- 【转】Qt 资源图片删除后,错误 needed by `debug/qrc_image.cpp'. Stop. 的终极解决办法
@2019-06-13 [小记] Qt项目做完了把资源文件夹下已经不用的图片文件删掉,运行时报错(编译不报错):No rule to make target `images/图片文件名', neede ...
- storcli/percli的使用场景
目录 storcli/percli常用场景 storcli/percli常用场景 查看帮助信息 storcli64 help 查看控制器数量 storcli64 show ctrlcount [roo ...
- mysql数据库:mysql增删改、单表、多表及子查询
一.数据增删改 二.单表查询 三.正表达式匹配 四.多表查询 五.子查询 一..数据增删改 增加 insert [into] 表名[(可选字段名)] values(一堆值1),( ...
- 8.5.zookeeper应用案例_分布式应用HA
1.实现分布式应用(主节点HA)及客户端动态更新主节点状态 需求:某分布式系统中,主节点可以有多台,服务器可以动态(变化)上下线,任意一台客户端都能实时感知到主节点服务器的上下线 思路:架设Zooke ...
- Keepalived + Haproxy + PXC 理论篇
最终模型: 将Kp1 + Kp2 分别和Ha1和Ha2部署在一起,同时绑定VIP ip,对外提供访问,同时监控本机的Haproxy的可用性 通过Ha1 + Ha2 为PXC提供负载均衡,分发请求到后端 ...
- 浅谈ROW_NUMBER() OVER()函数的使用
语法格式:row_number() over(partition by 分组列 order by 排序列 desc) row_number() over 具有分组排 ...
- QTP(14)
练习1.Flight4a 要求: a.录制Flight4a登录+退出业务流程 b.使用自定义检查结合Exist属性验证登录是否成功 c.为用户名实现参数化 用户名 Jack 正确 Rose 正确 12 ...