通过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. web音乐播放器

    今天闲暇时间,花了2小时,写了个简单音乐播放器.欢迎大家来吐糟 先看下界面截图 大体实现:播放,停止,上一曲,下一曲,循环播放功能. 知识点:1.html 中audio 2.css 位置fixed 其 ...

  2. 兼容火狐浏览器的select下拉框样式

    经常遇到这样的问题,在使用bootstrap框架的时候select选择框的样式在火狐浏览器上继承的是浏览器本身的样式,跟谷歌等其他的浏览器样式对比很难看,并且很难调整,但是! 好东西来了,现在能调成跟 ...

  3. LUOGU P1501 [国家集训队]Tree II (lct)

    传送门 解题思路 \(lct\),比较模板的一道题,路径加和乘的维护标记与线段树\(2\)差不多,然后剩下就没啥了.但调了我将近一下午.. 代码 #include<iostream> #i ...

  4. （转）在Struts 2.0中国际化(i18n)您的应用程序 + 本人拓展备注

    转:http://www.blogjava.net/max/archive/2006/11/01/78536.html 国际化是商业系统中不可或缺的一部分,所以无论您学习的是什么Web框架,它都是必须 ...

  5. 扩展BSGS-传送门

    很好的讲解:ZigZagK 好的讲解:mjtcn 某个模板:here 模板题: BSGS:ZigZagK的poj2417 exBSGS:ZigZagK的poj3243 — AC_Gibson 一般的板 ...

  6. ## jvm知识点零碎整理

    1.初始化VM options配置 idea安装目录\bin\idea.exe.vmoptions 和 idea64.exe.vmoptions可以看到初始配置: -Xms128m  (设置初始化堆内 ...

  7. <Django>一些小知识

    ''' ORM import pymysql pymysql.connect( ... ... ) 1.不同的程序员写的SQL水平参差不齐 2.执行效率也参差不齐 python语法 --自动翻译 -- ...

  8. Unity中销毁游戏对象的方式

    销毁方式 销毁物体的方式有两种:Destroy和DestroyImmediate两种,那两者有什么区别呢?细听分说. 两种方式都能达到销毁物体的目的,有以下区别: Destroy销毁场景中的物体但是内 ...

  9. C#下面的次幂表达

    嗯,一个错误.不能用x^y表达,要用math.pow(x,y).

  10. myeclipe 中配置maven

    1.配置maven 2. 2