轻松学习JavaScript十八:DOM编程学习之DOM简单介绍
一DOM概述
DOM(文档对象模型)是HTML和XML的应用程序接口(API)。DOM将把整个页面规划成由节点层级构成的文档。
DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分。
HTML或XML页面的每一个部分都
是一个节点的衍生物。
通过DOM。可訪问HTML文档的全部元素。
当网页被载入时。浏览器会创建页面的文档对象模
型,DOM模型被构造为对象的树。
DOM是W3C(万维网联盟)的标准。DOM定义了訪问HTML和XML文档的标准。“W3C 文档对象模型(DOM)是中立
于平台和语言的接口,它同意程序和脚本动态地訪问和更新文档的内容、结构和样式。
”
W3C DOM 标准被分为 3 个不同的部分:
1核心 DOM - 针对不论什么结构化文档的标准模型
2XML DOM - 针对 XML 文档的标准模型
3HTML DOM - 针对 HTML 文档的标准模型
二DOM节点树与节点
(1)DOM节点
在DOM中,全部事物都是节点。
DOM是被视为节点树的HTML。
HTML文档中的全部内容都是节点:整个文档是
一个文档节点;每一个HTML元素是元素节点;HTML元素内的文本是文本节点;每一个HTML属性是属性节点。凝视是注
释节点。那么从实际出发看看:
- <span style="font-size:18px;"><!--div标签-->
- <div id="test">块级元素<div></span>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
(2)节点父,子和同胞
节点树中的节点彼此拥有层级关系。父(parent),子(child)和同胞(sibling)等术语用于描写叙述这些关系。父节点拥有子
节点。同级的子节点被称为同胞(兄弟或姐妹)。
1在节点树中,顶端节点被称为根(root)
2每一个节点都有父节点、除了根(它没有父节点)
3一个节点可拥有随意数量的子
4同胞是拥有同样父节点的节点
以下的图片展示了节点树的一部分。以及节点之间的关系:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
(3)节点树
看以下的代码组成的DOM树:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>标题</title>
- </head>
- <body>
- <h1>一级标题</h1>
- <a href="http:///www.baidu.com">百度一下,你就知道</a>
- </body>
- </html>
从上面的HTML中:
<html>节点没有父节点;它是根节点
<head>和<body>的父节点是<html>节点
文本节点 "一级标题" 的父节点是<h1>节点
而且:
<html>节点拥有两个子节点:<head>节点和<body>节点
<head>节点拥有一个子节点:<title>节点和<meta>节点
<title>节点也拥有一个子节点:文本节点 "一级标题"
<h1>和<a>节点是同胞节点,同一时候也是<body>的子节点
而且:
<head>元素是<html>元素的首个子节点
<body>元素是<html>元素的最后一个子节点
<h1>元素是<body>元素的首个子节点
<a>元素是<body>元素的最后一个子节点
载入HTML文档页面时。浏览器会自己主动生成一个树型结构。用来表示页面内部结构。DOM将这样的树结构称之为由
节点组成的节点树。
节点树图示:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
三DOM的作用
通过可编程的对象模型DOM,JavaScript获得了足够的能力来创建动态的 HTML。
(1)JavaScript的DOM可以改变页面中的HTML元素
- <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>DOM</title>
- </head>
- <body>
- <div id="div1">
- <p id="p1">这是已有的段落</p>
- </div>
- <script type="text/javascript">
- var para=document.createElement("p");// 创建一个的元素节点p标签
- var node=document.createTextNode("这是通过DOM加入的新元素的文本");//创建一个文本节点
- para.appendChild(node);//向p标签追加文本节点
- var element=document.getElementById("div1");//通过id属性查找div元素
- element.appendChild(para);//向div元素内追加一个新元素
- </script>
- </body>
- </html></span>
执行的结果为:
(2)JavaScript的DOM可以改变页面中的HTML内容
- <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>DOM</title>
- </head>
- <body>
- <p id="p1">Hello World!</p>
- <script type="text/javascript">
- document.getElementById("p1").innerHTML="New text!";
- </script>
- </body>
- </html></span>
执行的结果为:
(3)JavaScript的DOM可以改变页面中的CSS样式
- <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>DOM</title>
- </head>
- <body>
- <p id="p1">Hello world!</p>
- <p id="p2">Hello world!</p>
- <script type="text/javascript">
- document.getElementById("p2").style.color="blue";
- document.getElementById("p2").style.fontFamily="Arial";
- document.getElementById("p2").style.fontSize="larger";
- </script>
- </body>
- </html></span>
执行的结果为:
(4)JavaScript的DOM可以对页面中的事件做出反应
- <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>DOM</title>
- </head>
- <body>
- <p>点击按钮来运行<b>displayDate()</b>函数。</p>
- <button onclick="displayDate()">显示时间标准时间按钮</button>
- <p id="demo"></p>
- <script type="text/javascript">
- function displayDate()
- {
- document.getElementById("demo").innerHTML=Date();
- }
- </script>
- </body>
- </html></span>
执行的结果为:
在阐述为什么学习JavaScript的时候有的已经都涉及到。这里我们会学习更加复杂的东西来操作HTML元素和
CSS样式,这样会使得网页有动感,下拉菜单和图片无缝滚动等动态效果我们就能够实现了。这些都是后面要学习的
东西了。就不再多说,本篇知识概括一下。
假设想看效果的话能够參考:轻松学习JavaScript四:JS点击灯泡来点亮
轻松学习JavaScript十八:DOM编程学习之DOM简单介绍的更多相关文章
- python 学习笔记十八 django深入学习三 分页,自定义标签,权限机制
django Pagination(分页) django 自带的分页功能非常强大,我们来看一个简单的练习示例: #导入Paginator>>> from django.core.p ...
- 智能车学习(十八)——电机学习
一.C车电机选择 1.摘要: 因为C车模在四轮车的优势是有两个电机,可以进行主动差速,劣势是电机太弱了....所以如何选择电机,就是个钱的问题了,电机多一点,就比较好选,但是C车电机跑多了就 ...
- DOM编程 学习笔记(一)
PS:虽然自己JS基本语法算是掌握了,但是其实在JS掌握的只是远远还不够,网页上有太多好看的动态效果都是用JS 做出来的,自己也就仅仅会那么一两个动态的效果,学的只是皮毛...等有空的时候一定要好好的 ...
- python3.4学习笔记(十八) pycharm 安装使用、注册码、显示行号和字体大小等常用设置
python3.4学习笔记(十八) pycharm 安装使用.注册码.显示行号和字体大小等常用设置Download JetBrains Python IDE :: PyCharmhttp://www. ...
- 学习笔记:CentOS7学习之十八:Linux系统启动原理及故障排除
目录 学习笔记:CentOS7学习之十八:Linux系统启动原理及故障排除 18.1 centos6系统启动过程及相关配置文件 18.1.1 centos6系统启动过程 18.1.2 centos6启 ...
- 轻松学习JavaScript二十二:DOM编程学习之节点操作
DOM编程不只能够查找三种节点,也能够操作节点.那就是创建,插入,删除.替换和复制节点.先来看节点 操作方法: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...
- 轻松学习JavaScript十二:JavaScript基于面向对象之创建对象(一)
这一次我们深入的学习一下JavaScript面向对象技术,在学习之前,必要的说明一下一些面向对象的一些术语. 这也是全部面对对象语言所拥有的共同点.有这样几个面向对象术语: 对象 ECMA-262把对 ...
- Python学习二十八周(vue.js)
一.指令 1.一个例子简单实用vue: 下载vue.js(这里实用1.0.21版本) 编写html代码: <!DOCTYPE html> <html lang="en&qu ...
- (C/C++学习笔记) 十八. 继承和多态
十八. 继承和多态 ● 继承的概念 继承(inheritance): 以旧类为基础创建新类, 新类包含了旧类的数据成员和成员函数(除了构造函数和析构函数), 并且可以派生类中定义新成员. 形式: cl ...
随机推荐
- rocketmq事务消息入门介绍
说明 周五的时候发了篇:Rocketmq4.3支持事务啦!!!,趁着周末的时候把相关内容看了下,下面的主要内容就是关于RocketMQ事务相关内容介绍了. 说明: 今天这篇仅仅是入门介绍,并没有涉及到 ...
- 5. Spring Boot 拦截器
转自:https://blog.csdn.net/catoop/article/details/50501696
- 每日技术总结:encodeURI,encodeURIComponent,toFixed
1. encodeURI(URIstring) encodeURI()函数可把字符串作为URI进行编码 encodeURI("http://www.w3school.com.cn" ...
- Python中可避免读写乱码的一个强慷慨法
昨天在帮同学解析一批从网络上爬取的文件时,遇到一个奇葩的问题,文件本身的编码是gbk,Eclipse编辑环境的默认编码是utf8,使用常规的open方法批量打开文件时,某些文件里存在一些不可被gbk识 ...
- Lucy_Hedgehog techniques
在project euler 的第\(10\)题的 \(forum\) 中 Lucy Hedgehog 提到的这种方法. 求 \(n\) 以内素数个数以及求 \(n\) 以内素数和的算法. 定义\(S ...
- E11 css hack
E11 识别\0 { color:red; color:blue \0; } chrome下颜色是红色.IE11是蓝色
- log4j 2.x 版本的 properties 配置
#用于设置log4j2自身内部的信息输出,可以不设置,当设置成trace时,会看到log4j2内部各种详细输出status = debugdest = errname = PropertiesConf ...
- 6.5 Android硬件访问服务使用反射
1.前面的例子中App为了能够范问ILedService接口,把classes.jar导入到应用程序中,但是我们不想把classes编进apk包里面去,这样导致我们的apk程序会很大(解压缩apk会发 ...
- IOS基础:深入理解Objective-c中@class 和#import的区别
在面向对象objective-C语言中,当一个类使用到另一个类时,并且在类的头文件中需要创建被引用的指针时,可以#import方式引入,通过@class引入: 这两种的方式的区别在于: 1.运用#im ...
- 安装hadoop2.6.0伪分布式环境 分类: A1_HADOOP 2015-04-27 18:59 409人阅读 评论(0) 收藏
集群环境搭建请见:http://blog.csdn.net/jediael_lu/article/details/45145767 一.环境准备 1.安装linux.jdk 2.下载hadoop2.6 ...