网页由标签将信息组织起来,而标签的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获取元素的更多相关文章

  1. JavaScript通过ID获取元素坐标

    JavaScript通过ID获取元素坐标 function getElementPos(elementId) {    var ua = navigator.userAgent.toLowerCase ...

  2. js中用tagname和id获取元素的3种方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. javascript querySelector和getElementById通过id获取元素的区别

    querySelector和getElementById通过id获取元素的区别 <!DOCTYPE html> <html> <head> <meta cha ...

  4. 通过ID获取元素 注:获取的元素是一个对象,如想对元素进行操作,我们要通过它的属性或方法。

    通过ID获取元素 学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人.那么在网页中,我们通过id ...

  5. js之checkbox的代码全选/全不选,使用id获取元素,而不是name

    每当有多个选项的时候,都会有一种想法是:全选,全不选,如果子选项有被选,父选项也得被选. 注意:这里是根据id来获取元素的,但是不能直接用getElementById,因为那只能返回一个,而不是集合. ...

  6. JavaScript通过元素id和name直接获取元素的方法

    概览: 偶然的机会,我在JavaScript中直接用HTML元素的id属性来获取该元素,并设置该元素的其他属性值,竟然能够正确解析不报错!于是我去查阅相关资料,也有其他同行这么用. 虽然说这种用法不是 ...

  7. 根据id设置、获取元素的文本和value

    /** * 根据id获取元素文本 * @param {String} id|元素id * return {Integer || String} text */function getText(id){ ...

  8. 跟随标准与Webkit源码探究DOM -- 获取元素之getElementById

    按照ID获取元素 -- getElementById 标准 DOM 1,定义在HTMLDocument Interface 中,原型Element getElementById(in DOMStrin ...

  9. JavaScript中的获取元素的方法

    通过id获取元素 document.getElementById(id名字) 通过标签获取元素 document/元素.getElementsByTagName(标签名) 通过css选择器获取元素 d ...

随机推荐

  1. react+antd引入 阿里图标

    import iconfont from '../../../../assets/fonts/iconfont.js' const Iconfont = Icon.createFromIconfont ...

  2. SpringBoot static修饰的字段/方法如何获取application.yml配置

    SpringBoot的application.yml一种特殊的应用场景,一般我们获取application.yml的配置文件只要@Value就可以获取到值了,但是如果是static修饰的字段肯定就不能 ...

  3. PKGSRC

    PKGSRC简介 pkgsrc: The NetBSD Packages Collection The NetBSD Packages Collection (pkgsrc) 是在NetBSD系统以及 ...

  4. 0、CentOS7系统root密码丢失找回方法

    第一步 1.重新启动或开启CentOS7.6系统,在选择进入系统的Grub菜单界面如下图1-1,根据提示按"e"小写字母进入编辑界面,如下图1-2所示: 图1-1 CentOS7. ...

  5. 目标检测之车辆行人(darknet版yolov3)

    序言      自动驾驶是目前非常有前景的行业,而视觉感知作为自动驾驶中的“眼睛”,有着非常重要的地位和作用.为了能有效地识别到行驶在路上的动态目标,如汽车.行人等,我们需要提前对这些目标的进行训练, ...

  6. Kaggle_泰坦尼克乘客存活预测

    转载 逻辑回归应用之Kaggle泰坦尼克之灾 此转载只为保存!!! ————————————————版权声明:本文为CSDN博主「寒小阳」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附 ...

  7. WebRTC的带宽估计[转载]

    带宽估计(BWE)模块的任务是决定你可以发送多大的视频流且不会造成网络拥塞,以此来保证不会降低视频质量. 在以前的带宽估计算法还是十分基础的,大体上是基于丢包而设计的.通常我们在开始慢慢的增加视频的比 ...

  8. 访问网络资源的方式--application/json和x-www-form-urlencoded

    以Jsoup为例,x-www-form-urlencoded方式 Map<String,Object> map = new HashMap<>(); map.put(" ...

  9. Httpd总结 :HTTPD的基本概念

    这是一篇为初学者准备的文章,所以作者会尽量从基础出发,尽量细致的描述每一个细节,以求让初学者不会一头雾水,有一定基础的同学就不用看了,以免浪费你的时间.   假设博主今天春心荡漾,想要访问一些不可描述 ...

  10. zeromq实践

    zeromq简介 zeroMQ不是TCP,不是socket,也不是消息队列,而是这些的综合体. ZeroMQ以嵌入式网络编程库的形式实现了一个并行开发框架(concurrency framework) ...