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. 标量子查询优化(用group by 代替distinct)

    标量子查询优化 当使用另外一个SELECT 语句来产生结果中的一列的值的时候,这个查询必须只能返回一行一列的值.这种类型的子查询被称为标量子查询 在某些情况下可以进行优化以减少标量子查询的重复执行,但 ...

  2. struts1 工作原理

    struts1的原理和工作流程 struts1的工作原理或者说工作流程: 1.在web应用程序启动就会加载ActionServlet,ActionServlet从配置文件struts-config.x ...

  3. AD域设置

    一.安装条件 · 安装者必须具有本地管理员权限 · 操作系统版本必须满足条件(windows server 2003 除WEB版外都满足) · 本地磁盘至少有一个NTFS文件系统 · 有TCP/IP设 ...

  4. Unity Kajiya Hair Shader Mod by Normals

    Shader "HairShader" { Properties { _MainTex ("Diffuse (RGB) Alpha (A)", 2D) = &q ...

  5. Google改变生活

    前言 前天,在图书馆,无意之中,发现这本书,特写博客来与各位前来下榻本园的博友们,分享和学习!  本博文的主要内容有: 参考此书.感谢韩梅编者,出于此,我写本博文为了方便日后自己的查阅使用和来我园的共 ...

  6. nyoj 67 三角形面积【三角形面积公式】

    三角形面积 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 给你三个点,表示一个三角形的三个顶点,现你的任务是求出该三角形的面积   输入 每行是一组测试数据,有6个 ...

  7. [转]PHP100视频教程(2012-2013版)下载地址及密码

    [转] PHP100视频教程(2012-2013版)  下载地址及其密码 先记起来,不用再到处找密码了. NO 名称 下载地址 密码 1 [第01讲]开启PHP学习之路,融入新互联网时代 http:/ ...

  8. windows 下删除.svn文件

    Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\DeleteSVN] @= ...

  9. Android 颜色渲染(五) LinearGradient线性渲染

    版权声明:本文为博主原创文章,未经博主允许不得转载. Android 颜色处理(五) LinearGradient线性渲染 相信很多人都看过歌词同步的效果, 一是竖直方向的滚动,另一方面是水平方面的歌 ...

  10. mybatis0208 缓存

    查询缓存 1.1缓存的意义 数据在磁盘会有一个IO,高并发读取效率就很低,将用户经常查询的数据放在缓存(内存)中,用户去查询数据就不用从磁盘上(关系型数据库数据文件)查询,从缓存中查询,从而提高查询效 ...