通过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. vue+webpack项目中px2rem的例子

    项目环境搭建此处省略,不再赘述,需要的请查阅相关资料. 本篇只介绍,如果在vue+webpack的项目中配置,把px自动转为rem 第一步安装   npm install   postcss-px2r ...

  2. APC注入DLL(win7下有问题)

    void APCKernelRoutine(PKAPC pKAPC, PKNORMAL_ROUTINE pUserAPC, PVOID pContext, PVOID pSysArg1, PVOID  ...

  3. centos7.4安装kubernetes1.6.0（开启TLS认证）

    目录 目录 前言 集群详情 环境说明 安装前准备 提醒 一.创建TLS证书和秘钥 安装CFSSL 创建 CA (Certificate Authority) 创建 CA 配置文件 创建 CA 证书签名 ...

  4. 拾遗：sed&vim

    一.sed查漏补缺 1.sed x,+y,从第x行的开始,向下连续y行(包含x行在内是y+1行!) f@z ~/testdir $ cat -n x.awk #!/usr/bin/awk -f BEG ...

  5. 【工具原则】5W2H法学习笔记

    目录 问题描述 事件(原因)描述 任务描述 方案决策 小结 5W2H法又叫七问分析法,是二战中美国陆军兵器修理部首创.按事务构成要素,从规范的七个方面思考,避免疏忽遗漏. 可以应用在:问题描述.事件描 ...

  6. JVM 与 Linux 的内存关系详解

    来源:美团技术团队 在一些物理内存为8g的服务器上,主要运行一个Java服务,系统内存分配如下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约 600m,Linux自身使用大约800m. ...

  7. C4D中python初探

    use_name = input('请输入账号') password = input('请输入密码') if use_name == 'alex' and password == 'alex3714' ...

  8. 1-电脑C盘（系统盘）清理

    推荐,亲测有效! 转自: https://baijiahao.baidu.com/s?id=1612762644229315967&wfr=spider&for=pc

  9. Mysql集群和主从

    1.Mysql cluster: share-nothing,分布式节点架构的存储方案,以便于提供容错性和高性能. 需要用到mysql cluster安装包,在集群中的每一个机器上安装. 有三个关键概 ...

  10. 【python】collections的使用

    老师布置了一个课后作业. 统计文本中字母出现的次数并找到最大的那一个 首先是读取文本吧.和c里的也差不多,打开,关闭,读取. path = f = f.close() 然后就用到了这个黑科技.coll ...