通过ID获取元素

学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。

语法:

 document.getElementById(“id”)

看看下面代码:

结果:null或[object HTMLParagraphElement]

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

任务

在右边编辑器中，补充第10行代码，通过document.getElementById获取id为con的p标签。

第11行为输出获取的元素，看看结果是什么。

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>document.getElementById</title>

</head>

<body>

<p id="con">JavaScript</p>

<script type="text/javascript">

  var mychar=document.getElementById("con")        ;

  document.write("结果:"+mychar); //输出获取的P标签。

</script>

</body>

</html>

通过ID获取元素 注:获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。的更多相关文章

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

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

  2. Python+Selenium之断言对应的元素是否获取以及基础知识回顾

    # coding=utf-8 from selenium import webdriver driver = webdriver.Firefox() driver.maximize_window () ...

  3. 转：jquery 父、子页面之间页面元素的获取，方法的调用

    一.jQuery 父.子页面之间页面元素的获取,方法的调用: 1. 父页面获取子页面元素: 格式:$("#iframe的ID").contents().find("#if ...

  4. jquery 父、子页面之间页面元素的获取，方法的调用

    一.jquery 父.子页面之间页面元素的获取,方法的调用: 1. 父页面获取子页面元素: 格式:$("#iframe的ID").contents().find("#if ...

  5. Robotium源码解读-native控件/webview元素的获取和操作

    目前比较有名的Uitest框架有Uiautomator/Robotium/Appium,由于一直对webview元素的获取和操作比较好奇,另外Robotium代码量也不是很大,因此打算学习一下. 一. ...

  6. selenium常用命令--操作页面元素及获取元素内容整理

    selenium常用命令之操作页面元素及获取元素内容的事件整理 例子:  /**id <input type="text" id="phone" name ...

  7. 弹框内画echarts图dom元素无法获取的问题

    弹框内画echarts图dom元素无法获取的问题? 什么意思呢?就是当我们打开弹框之后,此时要画eachars图,可是echarts图的容器dom此时为null, 因此我们需要做的就是在dom元素获取 ...

  8. selenium常用操作，查找元素，操作Cookie，获取截图，获取窗口信息，切换，执行js代码

    目录: 1. 常用操作 2. 查找元素 3. 操作Cookie 4. 获取截图 5. 获取窗口信息 6. 切换 7. 执行JS代码 简介 selenium.webdriver.remote.webdr ...

  9. jquery获取元素坐标获取鼠标坐标

    获取页面某一元素的绝对X,Y坐标,可以用offset()方法: var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; ...

随机推荐

  1. tesseract-ocr,tesseract,pytesseract在windows下怎么安装

    废话不多说,直接介绍如何下载安装tesseract-OCR以及pytesseract和PIL资源 文末百度网盘都有Tesseract是一个开源的OCR引擎,能识别100多种语言(中,英,韩,日,德,法 ...

  2. 用pytorch进行CIFAR-10数据集分类

    CIFAR-10.(Canadian Institute for Advanced Research)是由 Alex Krizhevsky.Vinod Nair 与 Geoffrey Hinton 收 ...

  3. NX二次开发-UFUN计算两点距离UF_VEC3_distance

    NX11+VS2013 #include <uf.h> #include <uf_curve.h> #include <uf_vec.h> UF_initializ ...

  4. Delphi 中的哈希表: THashedStringList

    转自万一博客 Delphi 中的哈希表: THashedStringList unit Unit1; interface uses   Windows, Messages, SysUtils, Var ...

  5. due to a StackOverflowError. Possible root causes include a too low setting for -Xss and illegal cyclic inheritance dependencies. The class hierarchy being processed was [org.jaxen.util.AncestorAxisIt

    七月 31, 2019 4:39:01 下午 org.apache.catalina.startup.VersionLoggerListener log信息: Server version: Apac ...

  6. Git及github使用（三）更新自己的github代码

    如果之前上传的代码到目前有所改动,想要更新github上的代码文件.希望本篇对你有所帮助. 1.拉取代码本地修改后上传代码 提交成功后的效果如下: 2.更新展示在github首页的readme内容 上 ...

  7. 20140421 常量指针与指针常量； const指针； reinterpret_cast ；const_cast作用

    1.reinterpret_cast<type_id>(表达式)的作用: type-id 必须是一个指针.引用.算术类型.函数指针或者成员指针.它可以把一个指针转换成一个整数,也可以把一个 ...

  8. 纯CSS3制作的“Ribbons”效果

    在看具体每个demo之前,我们一起来看下面一个截图: 上图是一个典型的“Ribbons”各部位的示意图,但每一个“Ribbons”并不会都使用上图示意的各个部分,在下面的实例中大家可以明显的看 到或者 ...

  9. python学习7—函数定义、参数、递归、作用域、匿名函数以及函数式编程

    python学习7—函数定义.参数.递归.作用域.匿名函数以及函数式编程 1. 函数定义 def test(x) # discription y = 2 * x return y 返回一个值,则返回原 ...

  10. Poi设置列样式

    最近做的项目中用到Poi导出Excel文件做模板,其中有的列需要设置为文本格式,查资料发现都是给单元格设置样式,由于是模板单元格都没内容,所以不能通过设置单元格式样式的方式操作,网上有说法是不能设置列 ...