通过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 ...
随机推荐
- JavaMaven【六、生命周期】
Maven有三个独立的生命周期,每个生命周期都不会出发别的生命周期的操作 若直接执行生命周期后面的操作,maven会默认执行前面的操作 如项目创建好后,直接执行mvn install,会默认依次执行c ...
- Oracle笔记(九) 表的创建及管理
对于数据库而言实际上每一张表都表示的是一个数据库的对象,而数据库对象指的就是DDL定义的所有操作,例如:表.视图.索引.序列.约束等等,都属于对象的操作,所以表的建立就是对象的建立,而对象的操作主要分 ...
- 关于MySQL服务无法正常启动问题
使用mysql的时候,突然查看服务列表也找不到mysql服务 解决办法: 一.首先打开CMD,切换到MySql安装目录的MySql Server →bin目录下 运行如下命令(具体试个人安装的MySq ...
- mysql服务脚本
#!/bin/bash #*************************** #* copyleft huihui 2015-08-11 #**************************** ...
- 自动化测试 selenium 测试软件安装
一.自动化测试优点 1.对程序的回归测试更方便.在程修改的比较平凡的时候,表现的更明显. 2.可以代替测试人员运行更繁琐的测试,也可以代替测试人员不可能完成的操作(比如连续点击50次) 3.更好的 ...
- zencart产品批量表上传后SEO三要素状态以及特价时间修改
', metatags_products_name_status ', metatags_model_status ', metatags_price_status ', metatags_title ...
- libusb_transfer
http://libusb.sourceforge.net/api-1.0/structlibusb__transfer.html int libusb_control_transfer(libusb ...
- vmware的32位和64位的问题
想安装一个vmware的64位版本,在网上下载了64位版本之后,安装目录仍然在C:\Program Files (x86)目录下,上网查询之后得知,vmware12的主程序是32位的,但是主要的系统服 ...
- 强大的Visual Studio插件CodeRush全新发布v19.2,助力VS开发
CodeRush是一个强大的Visual Studio .NET 插件,它利用整合技术,通过促进开发者和团队效率来提升开发者体验.CodeRush能帮助你以极高的效率创建和维护源代码.Consume- ...
- hive传递参数与调用
在运行hive命令时传入参数,使用-hivevar 和 -hiveconf 两种参数选项,来给此次的执行脚本传入参数 -hivevar : 传参数 ,专门提供给用户自定义变量. -hiveconf : ...