概述
1.1DOM
DOM：全称Document Object Model，即文档对象模型。DOM用于将标记型文档封装成对象，并将标记型文档中的所有内容（标签，文本，属性等）都封装成对象。封装成对象的目的是为了更方便的操作这些文档以及文档中的所有内容（因为对象的出现就可以有属性和行为被调用）。
文档：标记型文档。
对象：封装了属性和行为的实例，可以被直接调用。
模型：所有标记型文档都具备一些共性特征的一个体现。
标记型文档（标签，属性，标签中封装的数据）。
只要是标记型文档，DOM这种技术都可以对其进行操作。
常见的标记型文档：HTML XML
DOM这种技术是如何标记型文档进行操作的：必须对其进行解析。
DOM技术的解析方式：将标记型文档解析成一颗DOM树，并将树中的内容都封装成节点对象。
DOM解析将按照标签的层次关系体现出标签的所属，形成一个树状结构。（DOM树）
节点：树中的标签以及文本甚至属性称为节点，这个节点也称为对象。
标签通常也称为页面中的元素。
DOM解析方式的好处：可以对树中的节点进行任意操作，比如增删改查。
DOM解析方式的弊端：这种解析需要将整个标记型文档加载进内存，意味着如果标记型文档的体积较大，较为浪费内存空间。
简介另外一种解析方式：SAX.sax是由一些组织定义的一种民间常用的解析方式，并不是w3c标准。DOM才是w3c标准。
SAX解析方式：基于事件驱动的解析。获取数据的速度很快，但是不能对标记进行增删改的动作。
DOM模型有三种：
DOM level 1：将HTML文档封装成对象。
DOM level 2：在level1基础上加入了新功能，比如解析名称空间。
DOM level 3：将XML文档封装成了对象。
1.2 DHTML
DHTML：动态的HTML。不是一门语言，是多项技术综合体的简称。其中包含了HTML，css，DOM，JavaScript。
这四个技术在动态HTML页面效果定义时，负责的职责：
HTML：负责提供标签，对数据进行封装，目的是便于对该标签中的数据进行操作
即：用标签封装数据
CSS:负责提供样式属性，对标签中的数据进行样式的定义。
即：对数据进行样式定义
DOM：将标签型文档以及文档中的所有内容进行解析，并封装成对象。在对象中定义了更多的属性和行为，便于对对象操作。
将文档和标签以及其他内容变成对象。
JavaScript：负责提供程序设计语言，对页面中的对象进行逻辑操作
即：负责页面的行为定义。就是页面的动态效果。
所以JavaScript是动态效果的主力变成语言。
dhtml+XMLhttpRequest=AJAX
1.3 BOM
BOM：browser Object Model 浏览器对象模型，这个模型方便于操作浏览器。
浏览器对应的对象就是window对象。这个可以查询dhtml的api获得。
1.4window 对象
Window 对象是 JavaScript 层级中的顶层对象。
Window 对象代表一个浏览器窗口或一个框架。
Window 对象会在 或 每次出现时被自动创建。
window中的方法:
document：对 Document 对象的只读引用 。
location：用于窗口或框架的 Location 对象
history：对 History 对象的只读引用。
document.tilte： 设置网页的标题
moveto()：将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
moveby()： 相对于目前的位置移动。
resizeTo()：调整当前浏览器的窗口。
open()：打开新窗口显示指定的URL（有的浏览器中是打一个新的选项卡）
setTimeout(vCode, iMilliSeconds)：超时后执行代码。
setInterval(vCode, iMilliSeconds)：定时执行代码，第一次也是先待，到时再执行。
location 对象
Location 对象是由 JavaScript runtime engine 自动创建的，包含有关当前 URL 的信息。
location中的重要方法：
href属性 设置或获取整个 URL 为字符串。
reload() 重新装入当前页面。
screen 对象
Screen 对象是由 JavaScript runtime engine 自动创建的，包含有关客户机显示屏幕的信息。
属性：
availHeight 获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。
availWidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。
width 获取屏幕的水平分辨率。
示例：
document.write("屏幕工作区: " + screen.availHeight + ", " + screen.availWidth + "<br>");
document.write("屏幕分辨率: " + screen.height + ", " + screen.width + "<br>");
document对象
document对象对象代表整个文档页面。
对象的集合：
all 获取页面所有元素对象
forms 获取页面所有表单对象
images 获取页面所有图片对象
links 获取所有超链接或area对象
事件
基本上所有的HTML元素中都可以指定事件属性。
每个元素支持什么样事件应查询文档。
所有的事件属性都是以on开头，后面的是事件的触发方式。
常用的事件类型：
鼠标点击相关：
onclick 在用户用鼠标左键单击对象时触发。
ondblclick 当用户双击对象时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
鼠标移动相关：
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。
焦点相关的：
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。
其他：
onchange 当对象或选中区的内容改变时触发。
onload 在浏览器完成对象的装载后立即触发。
onsubmit 当表单将要被提交时触发。
代码实现
window对象常见方法演示1
<!DOCTYPE html>
<html>
<head>
<title>bom_window_object.html</title>
<meta name="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<script src="out.js" type="text/javascript" charset="utf-8"></script>
<!--
为了演示方便，定义了一个事件源。通过对事件源的触发，获取想要的结果。
比如让用户通过点击按钮就可以知道浏览器的一些信息
-->
<!--定义按钮onclick事件的处理方式-->
<script type="text/javascript" charset="utf-8">
//定义函数
function windowObjectDemo(){
//想要知道这个浏览器的信息，就要使用到window对象中的navigator
var name=window.navigator.appName;
var version=window.navigator.appVersion;
println(name+":"+version);
}
//演示location
function windowObjectDemo2(){
var pro=location.protocol;
var text=location.href;
alert(pro);
alert(text);
//给location的href属性设置一个值。改变了地址栏的值，并对其值进行了解析。如果是http协议，还进行连接访问。
location.href="http://www.baidu.com";
}
</script>
<!--定义事件源，注册事件关联的动作-->
<input type="button" value="演示window中的对象" onclick="windowObjectDemo2()" />
</body>
</html>
window常见方法演示2
<body>
<!--演示window中的常见方法-->
<script src="out.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var timeid;
function windowMethodDemo(){
// var b=confirm("你真的确定要点击吗？");
// alert("b="+b);
// setTimeout("alert('time run out')",4000);
timeid=setInterval("alert('time run out')",3000);
}
function stopTime(){
clearInterval(timeid);
}
function windowMove(){
// moveBy(10,10);
// moveTo(40,40);
for(var x=0;x<700;x++){
moveBy(20,0);
moveBy(0,20);
moveBy(-20,0);
moveBy(0,-20);
}
}
function windowOpen(){
open("ad.html","_blank","height=200,width=400,status=yes,toolbar=yes,menubar=yes,location=yes");
}
</script>
<input type="button" value="演示window对象的方法" onclick="windowOpen()"/>
<input type="button" value="停止" onclick="stopTime()"/>
</body>window对象常见事件演示
<body>
<!--演示window中的常见事件-->
<script type="text/javascript" charset="utf-8">
/*
onunload=function(){
alert("onunload run");
};
onload=function(){//window.可以被省略
alert("onload run");
};
onbeforeunload=function(){
alert("onbeforeunload run");
};
*/
onload=function(){
window.status="hahahahaha!over!";
};
</script>
</body>其中，out.js代码如下：
/**
* 打印指定参数数据到页面上并换行
* */
function println(param){
document.write(param+"<br/>");
}
/**
* 打印指定参数数据到页面上
* */
function print(param){
document.write(param);
}弹窗广告练习
<body>
<script type="text/javascript" charset="utf-8">
/*
演示弹窗广告效果
页面一加载完就执行
在当前页面定义脚本。可以在onload事件中完成广告的弹窗
*
* */
onload=function(){
open("ad.html","_blank","height=400,status=no,toolbar=no,menubar=no,location=no");
};
</script>
</body>ad.html代码如下：
<body>
<h1>Sale!</h1>
<h2>sale!!</h2>
<h3>sale!!!</h3>
<script type="text/javascript" charset="utf-8">
// setTimeout("close()",3000);
// onunload=function(){
// open("ad.html","_blank","height=400,status=no,toolbar=no,menubar=no,location=no");
// };
// setInterval("focus()",1000);
</script>document对象演示
document对象将标记型文档进行封装。该对象的作用是对可以标记型文档进行操作。
document对象最常见的操作是，想要实现动态效果需要对节点进行操作，那么要先获取到这个节点。要想获得节点，必须要先获取到节点所属文档对象document。
所以document对象最常见的操作就是获取页面中的节点。
获取节点的方法体现：
1.getElementById()：通过标签的id属性获取该标签节点，返回该标签节点
2.getElementsByName()：通过标签的name属性获取节点，因为name有相同，所以返回一个数组
3.getElementsByTagName()：通过标签名获取节点。因为标签名会重复，所以返回的是数组
凡是方法里是带有elements（带复数s），返回的都是数组。
<body>
<!--
document对象的演示
-->
<script type="text/javascript" charset="utf-8">
function getNodeDemo(){
/*
需求：获取页面中的div节点
思路：通过document对象完成。因为div节点有id属性，所以可以通过id属性来完成获取
* */
var divNode=document.getElementById("divid");
//节点都具有三个必备的属性:节点名称，节点类型，节点值
alert(divNode.nodeName+":"+divNode.nodeType+":"+divNode.nodeValue);
/*
常见节点有三种：
1.标签型节点：类型 1
2.属性节点： 类型 2
3.文本节点： 类型 3
标签型节点是没有值的，属性节点和文本节点是可以有值的
* */
//获取div节点中的文本
var text=divNode.innerHTML;
alert(text);
//改掉div中的文本
divNode.innerHTML="OH!娜娜子！！！".fontcolor("green");
}
//获取文本框节点 演示getElementByName方法
function getNodeDemo2(){
// var nodes=document.getElementsByName("user");
// alert(nodes[0].nodeName+":"+nodes[0].type+":"+nodes[0].value);
var userNode=document.getElementsByName("user")[0];
alert(userNode.value);
}
//获取超链接节点对象。演示getElementsByTagName方法
function getNodeDemo3(){
//直接用标签名获取
var nodes=document.getElementsByTagName("a");
// alert(nodes.length);
// alert(nodes[0].innerHTML);
for(var x=0;x<nodes.length;x++){
// alert(nodes[x].innerHTML);
nodes[x].target="_blank";//新窗口打开
}
}
/*
对于页面中的超链接，新闻链接通过新窗口打开，门户网站链接在当前页面打开
当然是要获取其中被操作的超链接对象。
可是通过document获取超链接拿到的是页面中所有的超链接。
只想获取一部分超链接，只有获取到被操作的超链接所属的节点即可。
再通过这个节点获取到它里面的所有的超链接节点
* */
function getNodeDemo4(){
//获取超链接所属的div节点
var divNode=document.getElementById("newslink");
//通过对div对象方法的查找发现它也具备getElementsByTagName方法
//注意：所有的容器型标签都具备这个方法。在该标签范围内获取指定名称的标签
var aNodes=divNode.getElementsByTagName("a");
for(var x=0;x<aNodes.length;x++){
// alert(aNodes[x].innerHTML);
aNodes[x].target="_blank";
}
}
</script>
<input type="button" value="演示document对象获取节点" onclick="getNodeDemo4()"/>
<div id="divid">这是一个div区域</div>
<input type="text" name="user" value="oh~xiaokui"/>
<a href="http://www.sina.com.cn">新浪</a>
<a href="http://www.baidu.com">百度</a>
<div id="newslink">
<a href="http://www.xinhuanet.com/fortune/">财经新闻</a>
<a href="http://education.news.cn/">教育新闻</a>
<a href="http://www.xinhuanet.com/tech/index.htm">科技新闻</a>
</div>
</body>节点层次
HTML网页是可以看做是一个树状的结构，如下：
html
|-- head
| |-- title
| |-- meta
| ...
|-- body
| |-- div
| |-- form
| | |-- input
| | |-- textarea
... ... ...
这是一颗树，是由多个节点（Node）组成的，节点的类型有很多种。
节点最多有一个父节点，可以有多个子节点。
通过节点关系查找节点
从一个节点出发开始查找：
parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素。
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点。
nextSibling 获取当前节点的下一个节点。（兄节点）
previousSibling 获取当前节点的上一个节点。（弟节点）
<body>
<!--
通过节点的层次关系获取节点对象
关系：
1. 父节点：parentNode 对应一个节点对象
2. 子节点：childNodes 对应一个节点集合
3. 兄弟节点：
上一个兄弟节点 ：previousSibling
下一个兄弟节点：nextSibling
-->
<script type="text/javascript" charset="utf-8">
function getNodeByLevel(){
//获取页面中的表格节点
var tabNode=document.getElementById("tabid");
//
// //获取父节点 parentNode
// var node=tabNode.parentNode;
// alert(node.nodeName);//BODY
// // //获取子节点 childNodes
// var nodes=tabNode.childNodes;
// alert(nodes[0].nodeName);//TBODY 表格体 表格里默认是TBODY
// // alert(nodes[0].childNodes[0].nodeName);//TR
//获取兄弟节点
//上一个
// var node=tabNode.previousSibling;
// alert(node.nodeName);//div
//下一个
var node=tabNode.nextSibling;
alert(node.nodeName);//span(ie) #text(火狐)
//尽量少用兄弟节点，因为在解析的时候会出现浏览器不同解析不一致，会解析出标签间的空白文本节点
}
</script>
<input type="button" value="通过节点层次关系获取节点" onclick="getNodeByLevel()"/>
<div>div区域</div>
<table id="tabid">
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
</table>
<span>span区域</span>
<dl>
<dt>上层项目</dt>
<dd>下层项目</dd>
</dl>
<a href=''>一个连接</a>
</body>节点操作
<!DOCTYPE html>
<html>
<head>
<title>dom_node_curd.html</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<style type="text/css" media="screen">
div{
border:#00ccff 1px solid;
width:200px;
padding:30px;
margin:10px;
}
#div_1{
background-color: #88aafd;
}
#div_2{
background-color: #ffccff;
}
#div_3{
background-color: #ccffff;
}
#div_4{
background-color: #22eeaa;
}
</style>
</head>
<body>
<script type="text/javascript" charset="utf-8">
//创建并添加节点
//需求：在div_4节点中添加一个文本节点
function creAndAdd(){
/*
1. 创建一个文本节点
2. 获取div_4节点
3. 将文本节点添加到div_4节点中
* */
//1.创建节点，使用document中的createTextNode方法
var oTextNode=document.createTextNode("这是一个新的div文本");
//2.获取div_4节点
var oDivNode=document.getElementById("div_4");
//3.将文本节点添加到div_4节点中
oDivNode.appendChild(oTextNode);
}
//需求：在div_4中创建并添加一个按钮节点
function creAndAdd2(){
//1.创建一个按钮节点
var oButNode=document.createElement("input");
oButNode.type="button";
oButNode.value="一个按钮";
//2.获取div_4节点
var oDivNode=document.getElementById("div_4");
//3.将按钮节点添加到div_4节点中
oDivNode.appendChild(oButNode);
}
//通过另一种方式完成添加节点
function creAndAdd3(){
/*
其实是使用了容器型标签中的一个属性 innerHTML
这个属性可以设置HTML文本
因为这是设置 ，要是再按一次，会把之前的覆盖，再设置一次
* */
//1.获取div_4节点
var oDivNode=document.getElementById("div_4");
// oDivNode.innerHTML="EMMMMMMM";
//oDivNode.innerHTML="<input type='button' value='按钮'/>";
oDivNode.innerHTML="<a href='http://www.163.com'>超链接</a>";
}
// ==================================================
//需求：将div_1节点中删除
function delNode(){
//1.获取div_1节点
var oDivNode=document.getElementById("div_1");
//2. 使用div节点的removeNode方法删除
// oDivNode.removeNode(true);//较少用
//一般使用removeChild方法删除子节点
//获取div_2的父节点，然后再用父节点的removeChild将div_2删除
oDivNode.parentNode.removeChild(oDivNode);
}
//需求：用div_2替换div_4节点
function updateNode(){
/*
获取div_2和div_4节点
使用replaceNode方法进行替换
* */
var oDivNode_2=document.getElementById("div_2");
var oDivNode_4=document.getElementById("div_4");
// oDivNode_4.replaceNode(oDivNode_2);
//建议使用replaceChild方法
oDivNode_4.parentNode.replaceChild(oDivNode_2,oDivNode_4);
}
//需求 希望用div_3替换div_4,并保留div_3节点
//其实就是对div_3进行克隆
function cloneDemo(){
var oDivNode_3=document.getElementById("div_3");
var oDivNode_4=document.getElementById("div_4");
var oCopyDiv_3=oDivNode_3.cloneNode(true);
oDivNode_4.parentNode.replaceChild(oCopyDiv_3,oDivNode_4);
}
</script>
<input type="button" value="创建并添加节点" onclick="creAndAdd3()"/>
<input type="button" value="删除节点" onclick="delNode()"/>
<input type="button" value="修改节点" onclick="updateNode()"/>
<input type="button" value="克隆节点" onclick="cloneDemo()"/>
<hr/>
<div id="div_1">
这是div区域一
</div>
<div id="div_2">
div区域演示文字
</div>
<div id="div_3">
节点的增删改查
</div>
<div id="div_4">
</div>
</body>
</html>
扫一扫
1536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
