通过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. springcloud分布式事务TXLCN

    新增一个model,pom文件引入依赖 <dependency>     <groupId>org.springframework.boot</groupId>   ...

  2. 实现组件props双向绑定解决方案

    注意: 子组件不能直接修改prop过来的数据,会报错 方案一: 用data对象中创建一个props属性的副本 watch props属性 赋予data副本 来同步组件外对props的修改 watch ...

  3. c++ 枚举简单举例

    #include <iostream> enum Enumeration{ VAL1, VAL2, VAL3=100, VAL4 }; int main() { using namespa ...

  4. 自动化测试工具2-testcomplete

    今天来说说testcomplete的使用 录了一个简单案例视频,网址如下:https://v.qq.com/x/page/f05116a062y.html 第一步是创建一个工程: 输入工程名,和选择工 ...

  5. 20140415 HOG 不同继承方式的访问特性 虚函数工作原理

    1.HOG block重叠的好处 由于行人通常其形状可以视为柔体,人 的边缘位置不固定,而有一些移动,block 重叠后,一个边缘的梯度信息在两个相邻重叠的 block 中都能有所表达,这样即使边缘的 ...

  6. java 传入多个参数时报"Parameter 'XXX' not found. Available parameters are [arg1, arg0, param1,..." 解决方案

    @Select("SELECT id FROM ae_post ORDER BY id DESC LIMIT #{page},#{size}") List<Post> ...

  7. [Java]读取文件方法大全（转载）

    1.按字节读取文件内容2.按字符读取文件内容3.按行读取文件内容4.随机读取文件内容 public class ReadFromFile { /** * 以字节为单位读取文件,常用于读二进制文件,如图 ...

  8. 【python】collections的使用

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

  9. 在linux 或docker中使用 system.drawing.common

    在dockerfile 中添加 FROM microsoft/dotnet:2.1-aspnetcore-runtime RUN apt-get update RUN apt-get install ...

  10. Activiti学习笔记4 — 流程实例化

    1.创建流程引擎对象 private ProcessEngine processEngine = ProcessEngines.getDefaultProcessEngine(); 2.启动流程 流程 ...