网页由标签将信息组织起来,而标签的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. 面向对象相关概念与在python中的面向对象知识(魔法方法+反射+元类+鸭子类型)

    面向对象知识 封装 封装的原理是,其成员变量代表对象的属性,方法代表这个对象的动作真正的封装是,经过深入的思考,做出良好的抽象(设计属性时用到),给出“完整且最小”的接口,并使得内部细节可以对外透明( ...

  2. raise与raise······from

    在python中,如果想手动引发一个异常,我们一般都会使用raise # -*- coding:utf-8 -*- # @Author: WanMingZhu # @Date: 2019/10/22 ...

  3. 【网络协议】动态主机配置协议DHCP

    动态主机配置协议DHCP 当某组织获得一块地址后,就可以为本组织内的主机或者路由器分配IP地址.这个分配工作可以由系统管理员手动通过网络管理工具来完成.也可以由动态主机配置协议(Dynamic Hos ...

  4. Linux系统组成和获取命令帮助4

    Linux文件系统:        1.文件名名称严格区分字符大小写        2.文件可以使用除/以外任意字符        3.文件名长度不能超过255字符        4.以.开头的文件为 ...

  5. Hdu 1564 1*2矩阵覆盖棋局博弈

    n*n的矩阵如果n为偶数 则可被1*2的矩形完全覆盖 如果n为奇数 则除起点外 其他各自可被1*2矩形完全覆盖 所以当n为偶数 先手赢 n为奇数 后手赢 #include<bits/stdc++ ...

  6. 实际应用脚本备份1——Ubuntu下应用升级脚本与执行方法

    程序自动更新脚本,命名为makefile: build:run run: killall java /webapps/‘应用目录名’/ /webapps/ ‘应用目录名’/ cd /opt/apach ...

  7. runnerw.exe: CreateProcess failed with error 216 (no message available)

    看描述,创建进程失败,应该是main这个入口文件的问题. 检查包名.发现问题,IDE自动将包名导成了当前的目录名(模块) 上图两者不一致导致 解决: 修改包名为main 注:一个model下只能有一个 ...

  8. servlet 如何处理多请求访问以及线程讲解

    servlet 如何处理多请求访问以及线程讲解 场景:js循环500次请求同一个后台接口,接口内部逻辑:1.查询商品数量,2.扣减商品数量 ,那么该接口是否需要考虑多线程并发安全问题? 分析: 1.先 ...

  9. 【洛谷P2387】魔法森林

    题目大意:给定一个 N 个点,M 条边的无向图,边有两个边权 a, b,求从 1 号节点到 N 号节点路径的两个权值和的最大值最小是多少. 题解: 对于有两个属性的结构的最优化问题,可以考虑先按照其中 ...

  10. keep running

     一个人的心态,会支撑你一路的发展:一个人的眼界,会决定选择的方向:一个人的格局,会意味着你成就多大的规模:一个人的毅力,会支持你能够走多远:一个人的用心,会注定你做出多好的成效!你变好了,一切就变好 ...