JavaScript笔记03——文档对象模型（Document Object Model，简称DOM）：获取HTML元素、操作HTML元素
Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。[1]
DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。
通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
树木和树枝
HTML是一个类似XML的结构，因为元素形成了一个带有子节点的父节点的结构，就像树的分支一样。有一个根元素（html）中包含的分支head和body，每个都有自己的分支机构。因此，DOM也称为DOM树。
通过选择一个元素并改变某些元素来修改DOM是JavaScript中经常做的。要从JavaScript访问DOM，使用该document对象。它由浏览器提供，并允许页面上的代码与内容进行交互。
我们可以通过各种途径获取HTML元素，例如id、标签名、类名、css选择器等，
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> /* css 选择器示例 */
.important { } #myHeader { } </style>
</head> <body>
<!-- id 示例 -->
<h1 id="myHeader">Hello World!</h1> <!-- 下面是 3 个 h2 标签 -->
<h2>HeaderOne</h1>
<h2>HeaderTwo</h2>
<h2>HeaderTree</h3> <!-- class 示例 -->
<p class="important">Note that this is an important paragraph.</p> <!-- JavaScript 代码 -->
<script type="text/javascript">
// 获取DOM元素
var myHeader = document.getElementById('myHeader'); // 单引号
var headers = document.getElementsByTagName('h2');
var importants = document.getElementsByClassName('important'); //返回一个DOM元素组成的Arrays
var myHeader2 = document.querySelector('#myHeader'); // 只返回一个元素
var importants2 = document.queryAll(.important); // 操作DOM元素 </script>
</body> </html>
然后通过JS代码来操作它们，实现动态网页。
内容来源：http://htmldog.com/guides/javascript/intermediate/thedom/
JavaScript笔记03——文档对象模型（Document Object Model，简称DOM）：获取HTML元素、操作HTML元素的更多相关文章
- DOM （文档对象模型(Document Object Model)
DOM(文档对象模型(Document Object Model) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上 ...
- DOM （文档对象模型(Document Object Model)）
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象 ...
- 文本对象模型（Document Object Model）
本文内容: 1. 概述 2. DOM中的节点类型 3. DOM节点的选取 4. 存取元素属性 5.DOM元素的增删 6.小结 ★ 概述 文本对象模型(DOM)是一个能够让程序和脚本动态访问和更新文档内 ...
- （3）选择元素——（2）文档对象模型（The Document Object Model）
One of the most powerful aspects of jQuery is its ability to make selecting elements in the DOM easy ...
- Eloquent JavaScript #11# The Document Object Model
索引 Notes js与html DOM 在DOM树中移动 在DOM中寻找元素 改变Document 创建节点 html元素属性 布局 style CSS选择器 动画 Exercises Build ...
- javascript之DOM(Document Object Model) 文档对象模型
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- JS--dom对象：document object model文档对象模型
dom对象:document object model文档对象模型 文档:超文本标记文档 html xml 对象:提供了属性和方法 模型:使用属性和方法操作超文本标记性文档 可以使用js里面的DOM提 ...
- DOM---文档对象模型(Document Object Model)的基本使用
一.DOM简介 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口.它是一种与平台和语言无关的应用程序接口(API),它可以动态 ...
- Document Object Model
什么是DOM W3C制定的书写HTML分析器的标准接口规范 全称 Document Object Model 文档对象模型DOM为HTML文档提供的一个API(接口) 可以操作HTML文档 <! ...
随机推荐
- 服务器操作系统应该选择Debian/Ubuntu还是CentOS？
任何 Linux 发行版本,在理论上都是一样的.只不过操作有的方便,有的麻烦!yum 是比 apt 弱(这就是企业维护和社区维护的区别,企业自己维护不需要这么多功能)但是任何能在 A 发行版本上实现的 ...
- python dict转json并保存文件
import json f = open("index.html", "wb") json.dump(response.data, f) f.close() d ...
- 给linux操作系统安装中文环境
如果设置的默认环境是英文,需要安装中文环境.最简答的方法如下: sudo apt-get install language-pack-zh-hant sudo apt-get install lang ...
- 通知：spark meetup 第六次会议在北京举行
通知: Spark北京Meetup第六次活动(机器学习专题) 将于北京时间3月21日 下午14:00-18:00 在微软亚太研发集团总部大厦1号楼举行,主题包括: Julien Pierre Pr ...
- Eclipse 内置浏览器
Web 浏览器 Eclipse 系统内部自带了浏览器,该浏览器可以通过点击 Window 菜单并选择 Show View > Other,在弹出来的对话框的搜索栏中输入 "browse ...
- Eclipse 浏览(Navigate)菜单
浏览 Eclipse 工作空间 浏览(Navigate)菜单提供了多个菜单可以让你快速定位到指定资源. 上图中 Open Type, Open Type in Hierarchy 和 Open Res ...
- python 案例：使用BeautifuSoup4的爬虫
我们以腾讯社招页面来做演示:http://hr.tencent.com/position.php?&start=10#a 使用BeautifuSoup4解析器,将招聘网页上的职位名称.职位类别 ...
- Yii GridView::widget
GridView::widget文档 http://demos.krajee.com/grid GridView::widget([ 'dataProvider' => $dataProvide ...
- Python如何利用多核处理器
Python中,如果想使程序充分利用多核处理器,有以下几个方案: l 使用threading模块,然后将程序运行在IronPython或Jython之上. l 使用Python自带的multiproc ...
- 在其他app里预览文档
本文转载至 http://www.cocoachina.com/newbie/basic/2013/0515/6212.html iOS中的沙盒可以让平台更加的安全,这也是沙盒给用户带来的最主要好处. ...