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文档 <! ...
随机推荐
- 大数据实战centos 6.7安装mysql5.7
https://www.cnblogs.com/jr1260/p/6590232.html
- pip依赖安装与记录
pip freeze requirements.txt是一个常常被许多Flask应用用于列出它所依赖的包的文本文件.它是通过pip freeze > requirements.txt生成的. 使 ...
- OpenCV中Kinect的使用（3）
接OpenCV中Kinect的使用(2),下面内容主要讲述使用OpenNI 控制Kinect 的马达,实现摄像头的上下摆动. 下面是透过OpenNI比较低阶的USB控制介面(XnUSB.h),来做到马 ...
- Android 混淆完全解析
1.http://blog.csdn.net/jddkdd2/article/details/8858909
- Spring MVC集成Log4j
以下示例显示如何使用Spring Web MVC框架集成LOG4J.首先使用Eclipse IDE,并按照以下步骤使用Spring Web Framework开发基于动态表单的Web应用程序: 创建一 ...
- python 集合set remove update add
1. 集合(set):把不同的元素组成一起形成集合,是python基本的数据类型. 集合对象是一组无序排列hashable value:集合成员可以做字典的键. 集合就像是 list 和 dict 的 ...
- winform 的 checklistbox动态绑定并选中值
绑定的代码:这里绑定的是一个泛型 BLL.PowerBLL powerbll = new BLL.PowerBLL(); checkpower.DataSource = powerbll.GetAll ...
- 使用神器MobaXterm连接远程mysql和redis
https://mobaxterm.mobatek.net/download-home-edition.html mysql redis 连接测试 mysql 127.0.0.1 3307 密码使用线 ...
- 简单的c语言小程序 回光返照
主函数 int main(int argc,char * argv[]) -- arg代表英文的参数缩写 c代表count计数 argc { return 0; -- 0返还给系统,代表程序正确运行 ...
- Retrofit学习笔记(一)
github上的介绍,简单明了 Type-safe HTTP client for Android and Java by Square, Inc. http://square.github.io/r ...