网页由标签将信息组织起来,而标签的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. SpringBoot整合MongoDB JPA,测试MongoRepository与MongoTemplate用法,简单增删改查+高级聚合

    源码 地址 -> https://github.com/TaoPanfeng/case/tree/master/04-mongo/springboot-mongo 一 引入依赖 <depe ...

  2. ActiveMQ入门操作示例

    1. Queue 1.1 Producer 生产者:生产消息,发送端. 把jar包添加到工程中. 第一步:创建ConnectionFactory对象,需要指定服务端ip及端口号. 第二步:使用Conn ...

  3. GDI+ 绘图教程 验证码

    使用的 C# winform using System; using System.Collections.Generic; using System.ComponentModel; using Sy ...

  4. Odoo的菜单项

    用户界面的入口是菜单项,菜单项形成一个层级结构,最顶级项为应用,其下一级为每个应用的主菜单.还可以添加更深的子菜单.可操作菜单与窗口操作关联,它告诉客户端在点击了菜单项后应执行什么操作. 菜单项存储在 ...

  5. source命令用法:

    命令格式 source FileName 作用 在当前bash环境下读取并执行FileName中的命令. 注意 该命令通常用命令"."来替代.如:source .bash_rc 与 ...

  6. 开源Android 恶意软件Radio Balouch

    安全研究机构 ESET 首次发现了开源 Android 间谍软件在 Google Play  上的恶意信息窃取行为,并且在被删除后仍在Google Play 重复出现.据悉,第一个间谍软件是基于开源间 ...

  7. mysql数据库:mysql初识

      1.什么是数据库 *****    存放数据的仓库    已学习的文件操作的缺陷        1.IO操作 效率问题        2.多用户竞争数据        3.网络访问        ...

  8. CentOS下安装软件

    CentOS下安装软件,要看下载的软件安装包的后缀名是什么,一般为了方便安装,推荐下载以 rpm 结尾的软件包. 比如以下截图,有多种下载方式,推荐下载圈起来的链接. rpm包安装方式步骤: 找到相应 ...

  9. CSS基础学习-11.CSS伸缩盒(新版本)

  10. mysql 模拟oracle中的序列

    因业务需要,把oracle 数据据转成mysql,同时oracle中程序本来一直在用 序列, mysql中没有,所以需要在mysql中新建一个表进行模拟, CREATE TABLE `sequence ...