网页由标签将信息组织起来,而标签的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. ubuntu18.04安装fcitx

    fcitx安装比较麻烦,我每次安装都要费不少劲,每次装安之后都没有写日志记录下来,导致下次装的时候又手忙脚乱,所以这次一定要记录下来. 前因: 我本来用的是ibus,但是这个输入法好像有bug,我在编 ...

  2. linux wireless 基础知识 MAC80211 CFG80211

    转:http://blog.csdn.net/liuxd3000/article/details/23761663 1. 基本概念   • cfg80211:  用于对无线设备进行配置管理.与Full ...

  3. 百度云直线在线解析+xdown

    一:在浏览器打开百度云分享链接(推荐Google)百度云分享的链接:https://pan.baidu.com/s/17YQ2x--kOAa_hpapaTcq8Q第二步:打开直线在线解析:https: ...

  4. js常用阻止冒泡事件

    原文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html 防止冒泡 w3c的方法是e.stopPropagat ...

  5. vim复制到剪切板

    作者:whinc链接:https://www.zhihu.com/question/19863631/answer/89354508来源:知乎 转载文章 Vim 中的复制.删除的内容都会被存放到默认( ...

  6. want

    2-SAT POJ3683 操作树 仙人掌 HDU3594 平衡树 916D 可持久化Trie https://www.cnblogs.com/jszkc/p/7309468.html Lindstr ...

  7. 【转】关于 Ruby 解释器:一些你需要知道的

    关于 Ruby 解释器:一些你需要知道的 原文:Ruby Interpreters: What You Need to Know 使用正确的 Ruby 解释器来运行程序可以发挥重要作用,不幸的是很难找 ...

  8. JS 函数基础

    函数简介 函数 函数也是一个对象 函数中可以封装一些功能(代码),在需要时可以指向这些功能(代码) 函数中可以保存一些代码在需要时调用 使用typeof检查一个函数对象时,会返回function 创建 ...

  9. 去除IntelliJ IDEA中重复代码报灰黄色的下划波浪线

    最近写Java在用IntelliJ IDEA这款传说中的神器IDE,看群里的大神们都在用,也耐不住寂寞想向大神们看齐一下.刚开始用,很多地方也不是很熟,今天遇到一个问题,导入一个项目后,看有些类里的代 ...

  10. Maven 安装 与 使用

    下载地址:http://maven.apache.org/download.cgi 下载完成后,配置环境变量 (前提 已经安装JDK  )后才能使用. 进入 bin 目录 复制 路径 添加到环境变量中 ...