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文档 <! ...
随机推荐
- IE6鼠标悬停Bug
当鼠标放置于某个文字链接之上,文字或文字背景改变为其他颜色或样式的效果是我们最经常见到的鼠标悬停效果.在CSS中,这个效果靠伪元素:hover来实现,只不过在文字链接中:hover被应用在了锚点元素& ...
- 自定义View -- 柱状图 我也来自定义个柱状图来玩玩
遇到要用到图的时候总是再找第三方开源,但有时这个图非常简单,用第三方开源来用的话有点得不偿失,所以我就自己撸了个柱状图出来 当然你如果觉得需求很复杂,那么你可以去使用这些开源 MPAndroidCha ...
- CSS3之body背景图平铺
你再也不需要因为屏幕大小不同而去选择多张图片作为背景图了,css3教你做人: body { background: url('xx.jpg')top center no-repeat; backgro ...
- 我的消灭复杂password之行
近期几天.网易一直提示邮箱账号异常.特意去查看了一下,发现须要改动password.可是经常使用的password又不让反复使用.于是无奈之下.就想办法消灭这些复杂password,由于实在是太难(g ...
- Cobbler简介
Cobbler is a Linux provisioning server that facilitates and automates the network-based system insta ...
- 操作XML-dom4j
首先是到dom4j的官网dom4j文件包,下载之后解压如下所示. 在根目录中,找到dom4j-1.6.1jar包,加入到eclipse中的lib文件下,最后build path一下,即可使用相关的方法 ...
- 10道mysql查询语句面试题
1.https://www.yanxurui.cc/posts/mysql/10-sql-interview-questions/ 2.http://mm.fancymore.com/reading/ ...
- PowerDesigner之设置(3)——根据Name首字母生成Code
SQL版本:2000 PowerDesigner版本:16 网上有不少介绍 PowerDesigner Name/Code自动调整 的文章,但基本如出一辙. 这里,我就介绍下如何根据输入的Name根据 ...
- 【转】linux 中fork()函数详解
在看多线程的时候看到了这个函数,于是学习了下,下面文章写的通俗易懂,于是就开心的看完了,最后还是很愉快的算出了他最后一个问题. linux 中fork()函数详解 一.fork入门知识 一个进程,包括 ...
- IntelliJ IDEA使用手册
开发工具现在转到IDEA了,看到关于该工具很好的入门文档,于是记录一下: IntelliJ IDEA 使用教程