第十四课
DOM技术概述
1：DOM概述
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
DOM是一种与浏览器，平台及语言无关的接口，能够以编程方式
访问和操作文档
1、DOM是Document Object Model(文档对象模型)的简称
2、提供了访问，操作该模型的API
2:DOM的分层结构
在DOM中，文档的层次结构被表示为树形结构。树是倒立的，树根在上
树叶在下面，树的节点表示文档的内容
子节点： 在树形结构中，直接位于一个节点之下的节点被称为该节点的子节点
父节点： 直接位于一个节点之上的节点被称为该节点的父节点
兄弟节点： 具有相同父节点的节点是兄弟节点
后代： 一个节点的下一个层次的节点集合石该节点的后代
祖先： 一个节点的父节点，祖先节点以及其他所有位于它之上的节点都是该节点的祖先
3：HTML文档可以说由节点构成的集合，三种常见的DOM节点:
3.1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
3.2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3.3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。
案例代码如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>初识DOM</title> </head>
<body>
<p id="p1">我的第一段文字</p> <p id="p2">我的第二段文字</p>
<script language="javascript">
document.write("hello");
document.getElementById("p1").style.color="blue";
document.getElementById("p2").style.color="red";
</script>
</body>
</html>
案例运行结果如下
1：通过ID获取元素 document.getElementById();的用法
学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。
案例1源码如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>初识DOM</title> </head>
<body> <p id="p1">锄禾日当午，汗滴禾下土</p>
<script language="javascript">
var v=document.getElementById("p1");
document.write(v);
</script>
</body>
</html>
案例1运行结果如下
2：innerHTML 属性
语法 Object.innerHTML
innerHTML 属性用于获取或替换 HTML 元素的内容。
注意:
1.Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。
2.注意书写，innerHTML区分大小写。
案例如下（获取元素）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>初识DOM</title> </head>
<body> <p id="p1">锄禾日当午，汗滴禾下土</p>
<script language="javascript">
var v=document.getElementById("p1").innerHTML;
document.write(v);
</script>
</body>
</html>
案例代码运行如下
案例2源码如下（替换元素）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>初识DOM</title> </head>
<body> <p id="p1">锄禾日当午，汗滴禾下土</p>
<script language="javascript">
var v=document.getElementById("p1");
document.write("原始的元素:"+v.innerHTML+"<br/>");
v.innerHTML="窗前明月光，疑似地上霜";
document.write("替换后的元素:"+v.innerHTML+"<br/>");
</script>
</body>
</html>
案例2运行如下
3：改变 HTML 样式
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？
语法:
Object.style.property=new style;
注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
基本属性表（property）:
案例代码如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>初识DOM</title> </head>
<body> <p id="p1">锄禾日当午，汗滴禾下土</p>
<script language="javascript">
var v=document.getElementById("p1");
v.style.color="blue";
v.style.fontFamily="楷体";
v.style.fontSize=50;
v.style.backgroundColor="red";
</script>
</body>
</html>
案例运行如下
4：显示和隐藏（display属性）
网页中经常会看到显示和隐藏的效果，可通过display属性来设置。
语法：
Object.style.display = value
注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
value的取值
案例代码如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>初识DOM</title>
<script language="javascript">
function dis1(){
document.getElementById("p1").style.display="block";
}
function dis2(){
document.getElementById("p1").style.display="none";
} </script>
</head>
<body>
<p>显示和隐藏功能</p>
<p id="p1">锄禾日当午，汗滴禾下土,谁知盘中餐，粒粒皆辛苦</p>
<from>
<input type="button" value="显示内容" onclick="dis1()">
<input type="button" value="隐藏内容" onclick="dis2()">
</from>
</body>
</html>
案例运行结果如下
5:控制类名（className 属性）
className 属性设置或返回元素的class 属性。
语法：
object.className = classname
作用:
1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观
案例代码如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>初识DOM</title>
<style type="text/css">
.one{
border:1px solid red;
width:300px;
height:100px;
background:blue;
color:green;
}
.two{
border:2px solid blink;
width:300px;
height:100px;
background:green;
color:blue;
}
</style>
</head>
<p id="p1" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p> <form>
<input type="button" value="更改样式" onclick="modify()"/>
</form> <p id="p2">JavaScript使网页显示动态效果并实现与用户交互功能。</p> <form>
<input type="button" value="添加样式" onclick="add()"/>
</form>
<script language="javascript">
function modify(){
var v1=document.getElementById("p1");
v1.className="two";
}
function add(){
var v2=document.getElementById("p2");
v2.className="two";
}
</script>
</html>
案例运行结果如下
综合练习源码如下
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title> <style type="text/css">
body{font-size:12px;}
#txt{
height:400px;
width:600px;
border:#333 solid 1px;
padding:5px;}
p{
line-height:18px;
text-indent:2em;}
</style>
</head>
<body>
<h2 id="con">JavaScript课程</H2> <div id="txt">
<h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
<p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
<p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
<p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
</div> <form>
<!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
<input type="button" value="改变颜色" onclick="changeColor()">
<input type="button" value="改变宽高" onclick="changeHeight()">
<input type="button" value="隐藏内容" onclick="changeNone()">
<input type="button" value="显示内容" onclick="changeDisplay()">
<input type="button" value="取消设置" onclick="changeStart()">
</form> <script type="text/javascript">
//定义"改变颜色"的函数
function changeColor()
{
var mychar=document.getElementById("txt");
mychar.style.color="red";
} //定义"改变宽高"的函数
function changeHeight()
{
var mychar=document.getElementById("txt");
mychar.style.height="150px";
} //定义"隐藏内容"的函数
function changeNone()
{
var mychar=document.getElementById("txt");
mychar.style.display="none";
} //定义"显示内容"的函数
function changeDisplay()
{
var mychar=document.getElementById("txt");
mychar.style.display="block";
} //定义"取消设置"的函数
function changeStart()
{
var start=confirm("你是否取消设置?");
if(start==true){
var start=document.getElementById("txt");
start.style.color="";
start.style.width="600px";
start.style.height="400px";
start.style.background="";
}else{
alert("你没有取消设置");
}
} </script>
</body>
</html>
综合练习运行结果如下
Javascript中DOM技术的的简单学习的更多相关文章
-
Javascript中String对象的的简单学习
第十一课String对象介绍1:属性 在javascript中可以用单引号,或者双引号括起来的一个字符当作 一个字符对象的实例,所以可以在某个字符串后再加上.去调用String 对象 ...
-
在JavaScript中闭包的作用和简单的用法
在JavaScript中闭包的作用和简单的用法 一.闭包的简介 作用域链:在js中只有函数有作用域的概念,由于函数内能访问函数外部的数据,而函数外部不能访问函数内部的数据,由上述形成一种作用域访问的链 ...
-
day29—JavaScript中DOM的基础知识应用
转行学开发,代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...
-
js学习笔记----JavaScript中DOM扩展的那些事
什么都不说,先上总结的图~ Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...
-
Android与javascript中事件分发机制的简单比较
在前面两篇博客中,我们讨论了Android中的事件分发的相关内容,那么在本篇博客当中,我们就简单探讨一下html或javascript中的事件分发机制,并进行简单的对比. 在前端中,对事件进行绑定有三 ...
-
JavaScript中DOM的层次节点(一)
DOM是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.修改.删除节点的一部分. DOM将HTML和XML文档描绘成一个有多个节点构成的结构,节点分为12种不同的节点 ...
-
Javascript中几个看起来简单，却不一定会做的题
Javascript作为前端开发必须掌握的一门语言,因为语言的灵活性,有些知识点看起来简单,在真正遇到的时候,却不一定会直接做出来,今天我们就一起来看看几道题目吧 题目1 var val = 'smt ...
-
关于Javascript中页面动态钟表的简单实现
1.问题并不繁琐,在于HTML中 DOM(文档对象模型)方法的掌握,我的钟表实现重点用到了三个函数和一个事件 A)setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式.s ...
-
JAVAScript中DOM与BOM的差异分析
JAVAScript 有三部分构成,ECMAScript,DOM和BOM,根据浏览器的不同,具体的表现形式也不尽相同.我们今天来谈一谈DOM和BOM这俩者之间的差异. 用百科上的来说: 1. DOM是 ...
随机推荐
-
[转载]Linux Bond的原理及其不足
本文转自http://www.yunweipai.com/archives/1969.html 支持原创.尊重原创,分享知识! 在企业及电信Linux服务器环境上,网络配置都会使用Bonding技术做 ...
-
SQL Server安全（10/11）：行级别安全（Row-Level Security）
在保密你的服务器和数据,防备当前复杂的攻击,SQL Server有你需要的一切.但在你能有效使用这些安全功能前,你需要理解你面对的威胁和一些基本的安全概念.这篇文章提供了基础,因此你可以对SQL Se ...
-
mac上如何卸载oracle jdk 1.7
目前mac上有一些软件还不支持jdk1.7,只能卸载1.7,恢复到1.6,下面二个链接是官网给出的卸载方法: http://www.java.com/zh_CN/download/help/mac_u ...
-
一个简单的零配置命令行HTTP服务器 - http-server (nodeJs)
http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 安装 (全局安装加 -g) ...
-
设计模式之Composite（组合）模式
1.出现原因 1.在面向对象系统中,我们常会遇到一类具有“容器”特征的对象——即它们在充当对象的同时,又是其他对象的容器. 如何将“客户代码与复杂的对象容器结构”解耦(将这种组合容器对象设计成树形结构 ...
-
bjfu1109 最小公倍数和
这题真是过了n年才a.最早是在2010年北大培训比赛上看到的这题,当时我不会,竹教主也不会,但他记下来了,研究一段时间后就会了,还把这题加到我校oj上.过了这么多年,我上网搜,关于这个问题的解题报告还 ...
-
#include <;stdbool.h>;
可以使用bool和true.false 输出是1或者0 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdb ...
-
SSH实现无密码验证登录
http://blog.csdn.net/houqd2012/article/details/8544517
-
Arcmap连接数据库需管理员获取许可——创建ArcSDE连接文件
一.在装有server的服务器上创建ArcSDE连接文件 1.打开ArcMap<<ArcToolBox<<数据管理工具<<工作空间<<创建ArcSDE连 ...
-
Android学习总结——INSTALL_FAILED_CONFLICTING_PROVIDER
在写个小demo的时候出现了这个问题: 排除手机内存不足.以及没用安装过这个应用的问题之后,发现是android:authorities="..."出了问题,可能还有其他应用程序和 ...