JavaScript HTML DOM


通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。


HTML DOM (文档对象模型)

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 模型被构造为对象的树:

HTML DOM 树

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常,通过 JavaScript,您需要操作 HTML 元素。

为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:

  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素

通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。

本例查找 id="intro" 元素:

实例

var x=document.getElementById("intro");

尝试一下 »

如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。

如果未找到该元素,则 x 将包含 null。


通过标签名查找 HTML 元素

本例查找 id="main" 的元素,然后查找 id="main" 元素中的所有 <p> 元素:

实例

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

尝试一下 »


通过类名找到 HTML 元素

本例通过 getElementsByClassName 函数来查找 class="intro" 的元素:

实例

var x=document.getElementsByClassName("intro");

JavaScript HTML DOM的更多相关文章

  1. javascript --- javascript与DOM

    javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...

  2. JavaScript与DOM

    文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和D ...

  3. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

  4. JavaScript与DOM的关系

    JavaScript与浏览器的工作 1.浏览器获取并加载你的页面,从上至下解析它的内容. 遇到JavaScript时,浏览器会解析代码,检查它的正确性,然后执行代码. 浏览器还会建立一个HTML页面的 ...

  5. JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素

    一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...

  6. JavaScript学习笔记(2)——JavaScript和DOM的关系

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...

  7. JavaScript HTML DOM 元素(节点)

    JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...

  8. JavaScript HTML DOM EventListener

    JavaScript HTML DOM EventListener addEventListener() 方法 实例 点用户点击按钮时触发监听事件: document.getElementById(& ...

  9. JavaScript HTML DOM 事件

    JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...

  10. JavaScript HTML DOM - 改变CSS

    JavaScript HTML DOM - 改变CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法 ...

随机推荐

  1. 大型系统OA--技术

    OA办公自动化系统--技术 1.由于涉及企业的流程控制与规则管理.所以系统对于规范要求的严谨性,导致在小型开发组在进行开发时必须基于成熟的技术架构.开源的lemon OA,采用了如下技术细节: mys ...

  2. 用GPUImage开启相机并且开启滤镜效果

    GPUImage提供了GPUImageVideoCamera这么一个类,它的对象能够调用摄像头,并且加上滤镜的效果.     //init VideoCamera     //这里的两个参数可以设定拍 ...

  3. Axure初体验:简单交互、通过按钮切换图片

    前言: 之前是一直用processon的UI原型设计,后来感觉只能完成静态页面的processon满足不了原型设计的需求,断网时候也不方便修改.展示.最终还是决定学习动态页面的制作,所选工具为原型设计 ...

  4. lightoj 1036 dp

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1036 #include <cstdio> #include <cst ...

  5. Wall - POJ 1113(求凸包)

    题目大意:给N个点,然后要修建一个围墙把所有的点都包裹起来,但是要求围墙距离所有的点的最小距离是L,求出来围墙的长度. 分析:如果没有最小距离这个条件那么很容易看出来是一个凸包,然后在加上一个最小距离 ...

  6. java通过解析文件获取apk版本等信息

    import java.io.ByteArrayInputStream; import java.io.IOException; import java.io.InputStream; import ...

  7. 在Windows上安装私有GitHub的开源替代-GitLab

    在我之前的一篇博客中介绍过GitLab: 开源免费的git管理工具,今天说一下怎么在windows安装GitLab. BitNami可以很容易的帮助你安装开源应用,和Helicon Zoo类似,我之前 ...

  8. tl;drLegal ——开源软件license的搜索引擎

    TLDRLegal - Open Source Licenses Explained in Plain English可以很方便查询各个开源license的总结(能做什么,不能做什么),还能比较不同的 ...

  9. MySQL基础 (DML)

    DML语句             DML操作是指对数据库中表记录的操作,主要包括表记录的插入(insert).更新(update).删除(delete)和查询(select) 1.插入记录 插入一条 ...

  10. 使用PDO连接数据库 查询和插入乱码的解决方法

    问题:PDO连接数据库后,查询和插入中文到数据库,出现乱码,如图: 解决方法: 法1: try{ $opts_values = array(PDO::MYSQL_ATTR_INIT_COMMAND=& ...