JavaScript教程
教程
JavaScript 简介
JavaScript 用法
JavaScript 输出
JavaScript 语法
JavaScript 语句
JavaScript 注释
JavaScript 变量
JavaScript 数据类型
JavaScript 对象
JavaScript 函数
JavaScript 作用域
JavaScript 事件
JavaScript 字符串
JavaScript 运算符
JavaScript 比较
JavaScript 条件语句
JavaScript switch 语句
JavaScript for 循环
JavaScript while 循环
JavaScript Break 和 Continue 语句
JavaScript typeof
JavaScript 类型转换
JavaScript 正则表达式
JavaScript 错误
JavaScript 调试
JavaScript 表单验证
JavaScript 保留关键字
JavaScript JSON
JavaScript void
JS函数
JavaScript 函数定义
JavaScript 函数参数
JavaScript 函数调用
JavaScript 闭包
JS HTML DOM
DOM HTML
DOM CSS
DOM 事件
DOM EventListener
DOM 元素
JS高级教程
JavaScript 对象
JavaScript Number 对象
JavaScript String
JavaScript Date(日期)
JavaScript Array(数组)
JavaScript Boolean(布尔)
JavaScript Math(算数)
JavaScript RegExp 对象
JS浏览器BOM
JavaScript Window
JavaScript Window Screen
JavaScript Window Location
JavaScript Window History
JavaScript Navigator
JavaScript 弹窗
JavaScript 计时事件
JavaScript Cookies
JS库
JavaScript 库
JavaScript 测试 jQuery
JavaScript 测试 Prototype
JS参考手册
JavaScript Array 对象
JavaScript Boolean 对象
JavaScript Date 对象
JavaScript Math 对象
JavaScript Number 对象
JavaScript String 对象
JavaScript RegExp 对象
JavaScript 全局属性/函数
JavaScript 运算符
Window 对象
Navigator 对象
Screen 对象
History 对象
Location 对象
HTML DOM Document 对象
HTML DOM 元素对象
HTML DOM 属性对象
HTML DOM 事件对象
 

DOM 简介

阅读:871      收藏:0      [点我收藏+]

JavaScriptHTML DOM


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


HTML DOM (文档对象模型)

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

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

HTML DOM 树

DOM HTML tree

通过可编程的对象模型,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 函数来查找 的元素:

实例

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



HTML DOM 教程

在本教程接下来的篇幅中,您将学到:

  • 如何改变 HTML 元素的内容 (innerHTML)
  • 如何改变 HTML 元素的样式 (CSS)
  • 如何对 HTML DOM 事件对出反应
  • 如何添加或删除 HTML 元素
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号