DOM编程 学习笔记（一）
PS:虽然自己JS基本语法算是掌握了，但是其实在JS掌握的只是远远还不够，网页上有太多好看的动态效果都是用JS
做出来的，自己也就仅仅会那么一两个动态的效果，学的只是皮毛。。。等有空的时候一定要好好的研究那些动态效果
的制作，实在是太炫酷了。。。先开始DOM的基本语法吧。。。等DOM和JQuery的基本语法和用法搞定后就去深入的研究
研究那些动态效果的制作。。。
DOM编程
学习内容
1.DOM简单介绍
2.DOM解析方式
3.在网页中使用DOM编程
4.DOM window对象以及Loaction对象的使用...
1.为什么使用DOM编程？DOM编程的使用可以增强界面的动态效果。。起初的时候是没有DOM编程的...
由于HTML语言以及JS的出现，JS的建立与HTML的建立并非是一个人，那么我们在使用JS操作HTML的时候
就需要一个规定，规定JS如何去操作HTML文档，因此W3School为此制定了规范，同时W3school也制定了
一套XML的DOM编程的规范。。。。
DOM的解析方式：
/*dom解析将按照标签的层次关系体现出标签的所属，形成一个树状结构-DOM树
树中标签以及文本甚至属性称为节点，节点也成对象，标签通常也成为页面中的元素*/
将标记型文档解析一颗DOM树，并将树中的内存封装成对象
好处：可以对树中的节点进行任意操作，(增删改查)
缺点：这种解析需要将整个标记型文档加载进内容，意味着如果标记型文档的体积很大，会浪费内存空间
另一种解析：SAX，非W3C标准
基于事件驱动的解析，获取数据的速度很快，但是，不能进行增删改查
DOM和SAX解析方法的区别：
dom解析方式优点：对文档的增删改查比较方便，缺点是占用内存比较大
SAx解析优点：占用内存比较少，缺点是只适合做文档的读取，不适合做文档的增删改查crud
html：负责提供标签，对数据进行封装，目的是便于对标签中的数据进行解析
简单说：html是用标签封装属性
css：负责提供样式属性，对标签中的数据进行样式的定义
简单说：对数据进行样式定义
DOM：负责将标签型文档以及文档中所有内容进行解析，并封装成对象，在对象中定义了更多的属性和行为，便于对对象进行操作。
简单说：将文档和标签以及其他内容变成对象
JS：负责提供程序设计语言，对页面中的对象进行逻辑操作。
简单说：负责页面的行为定义,也就是页面的动态效果，所以Js是动态效果的主力编程语言
DHTML + XMLhttpRequest = AJAX 通讯服务端
BOM ， Navigator，History对象
BOM：Browser Object Model：浏览器对象模型
这个模型方便于操作浏览器
而浏览器对应的对象就是window对象，API文档查看Window
<!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=utf-8" />
<script language="javascript" type="text/javascript">
function test()
{
alert("HELLO");
var name=window.navigator.appName;//浏览器的名称
var version=window.navigator.appVersion;//平台版本
document.write(name);
document.write(version);
history.back();//回到上一个界面
}
function goback()
{
window.history.back();
}
</script>
</head>
<body>
<input type="button" value="演示Window" onclick="test()" />
<input type="button" value="back" onclick="goback()" />
</body>
</html>
上面的代码定义了两个按钮来触发window事件..
1.window对象的使用：
confirm（）；
<script type="text/javascript" language="javascript">
function test()//网页上用来删除的对话框
{
var res=window.confirm("删除");
if(res)
{
window.alert("ok!");
}else
{
window.alert("no");
}
}
</script>
setInterval（"要执行的内容或者函数"，"设置执行的时间"）；
clearInterval（"setInterval的函数名"）；
setTimeout（"要执行的函数或者内容"，"设置执行的时间"）；
clearTimeout（setTimeout的函数名）；
<script language="javascript" type="text/javascript">
var num=0;
function say()
{
if(num==5)
{
clearInterval(say);//终止setInterval的执行...
}else{
window.alert("hello world");
num++;
}
}
function test()
{
setInterval(say,1000);//每隔一秒输出一次,使用按钮触发即可
}
function test1()
{
setTimeout(say1,1000);//设置一个函数，是这个函数在指定的时间后执行,使用按钮触发即可..
}
var num1=0;
function say1()
{
if(num1==2)
{
clearTimeout(say1);//终止了setTimeout函数的执行...
}else{
window.alert("你好");
num1++;
}
}
</script>
moveTo（x,y）；
moveBy（x,y）；
resizeto（x,y）；
resizeby（x,y）； -->这几种方法都可以使用按钮来触发完成
<script language="javascript" type="text/javascript">
function test()
{
window.moveTo(100,100);//相对于屏幕的左上角移动100 100像素
}
function test1()
{
window.moveBy(100,100);//相对于当前窗口的左上角移动100 100像素
}
function test2()
{
window.resizeTo(100,100);//把窗口调整为100*100个像素
}
function test3()
{
window.resizeBy(100,100);//把窗口增加100 *100 个像素
}
</script>
来个综合例子：
<script type="text/javascript">
var timeid;
function windowMethod(){
// var flag = window.confirm("确定退出？");//弹出一个窗口，确定/取消
// alert(flag);
//window.setTimeout("alert('time out run')",4000);//4秒后弹出
timeid = window.setInterval("alert('time out run')",2000);//每两秒弹出
//关闭，对应的clearInteval
}
//window.open(...);//流氓广告的原理
function windowopen(){
window.open("Adventor.html","_blank","height=500","width=500","status=yes",
"toolbar=yes","menubar=yes","location=yes");//放外面，不用点直接打开
/* window.open("","_blacnk","height=200","width=200","status=no",
"toolbar=no","menubar=no","location=no");传说中的广告*/
//close();当前窗口，执行close关闭，会有提示，因为当前窗口是你打开，close执行的是，自动打开的窗
}
function windowclose(){
window.close();
}
function Stop(){
clearInterval(timeid);
}
function windowMove(){
// moveBy(10,10);//点一下横坐标移到10,纵坐标移到10，指的是整个窗口
// moveTo(20,20);//移到指定的坐标点
//resizeBy()调整窗口尺寸
//resizeTo()
/*for(var x = 1;x<50;x++){
moveBy(10,0);
moveBy(0,10);
moveBy(-10,0);
moveBy(0,-10);
}//QQ抖动窗口，就是这个原理，返回一个程序，使对方的窗口执行
*/
// scrollBy(10,10);//将窗口滚动x和y的偏移量
// scrollTo();
}
</script>
<input type="button" value="window方法" onclick="windowMethod()" />
<input type="button" value="窗口移到" onclick="windowMove()" />
<input type="button" value="窗口打开" onclick="windowopen()" />
<input type="button" value="停止" onclick="Stop()" />
2.Location（）对象的使用
<body>
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
function WindowLacation(){
//var pro = location.protocol;
var text = location.href;
//alert(text);
//给Location的href属性设置一个值,并对其值进行解析，如果是http，进行链接访问
location.href = "http://www.sina.com.cn";
}
</script>
<!--定义事件源，注册事件相关联的动作-->
<input type="button" value="演示Lacation" onclick="WindowLacation()"/>
</body>
3.DOM的常见事件
<script type="text/javascript">
/*//事件的使用：
//定义好 事件 = 处理方式
onunload = function(){// 对象卸载完触发 3
alert("onunload run");
}
onload = function(){//浏览器打开，对象一加载完触发 1
alert("onload run");
}
onbeforeunload = function(){
alert("onbeforeunload run");//对象卸载前触发 2
}*/ onload = function(){
window.status("加载完啦");//状态栏，状态栏中的文字，可以使用JS
每隔一秒显示一个字
} </script>
来个小的练习：弹出广告...
<script type="text/javascript">
//演示弹窗，页面一加载，就执行
//在当前页面中定义广告页面脚本，在onload事件中完成广告的弹窗 onload = function(){
window.open("Adventor.html","_blacnk","height=200","width=200","status=no",
"toolbar=no","menubar=no","location=no");
}
</script>
<body>
<h1>广告</h1>
<h2>打广告</h2>
<script type="text/javascript" >
//setTimeout("close()",3000);
onunload = function(){//关掉就弹
window.open("Adventor.html","_blacnk","height=200","width=200","status=no",
"toolbar=no","menubar=no","location=no");
}
setInterval("focus()",1000);//focus()，使焦点放在当前广告窗口，管不了，也不能最小化
</script>
</body>
DOM编程 学习笔记（一）的更多相关文章
- DOM编程 学习笔记（二）
学习内容: 1.document对象 2.event对象 该对象将标记型文档进行封装 该对象的作用,是对可标记型文档进行操作 常见操作,想要实现动态效果,需要对节点操作,那么先获取到这个节点,想获取节 ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- HTML DOM（学习笔记二）
嗯,在HTML DOM(学习笔记一)中简单描述了一下HTML DOM 是什么,这一篇将记录下来有关HTML DOM的内容! 1:DOM节点 首先,再来看一下HTML DOM的树状结构,如下图所示: 这 ...
- Linux Shell编程学习笔记——目录（附笔记资源下载)
LinuxShell编程学习笔记目录附笔记资源下载 目录(?)[-] 写在前面 第一部分 Shell基础编程 第二部分 Linux Shell高级编程技巧 资源下载 写在前面 最近花了些时间学习She ...
- DirectX 11游戏编程学习笔记之8: 第6章Drawing in Direct3D(在Direct3D中绘制)(习题解答)
本文由哈利_蜘蛛侠原创,转载请注明出处.有问题欢迎联系2024958085@qq.com 注:我给的电子版是700多页,而实体书是800多页,所以我在提到相关概念的时候 ...
- 多线程编程学习笔记——async和await（一）
接上文 多线程编程学习笔记——任务并行库(一) 接上文 多线程编程学习笔记——任务并行库(二) 接上文 多线程编程学习笔记——任务并行库(三) 接上文 多线程编程学习笔记——任务并行库(四) 通过前面 ...
- 多线程编程学习笔记——async和await（二）
接上文 多线程编程学习笔记——async和await(一) 三. 对连续的异步任务使用await操作符 本示例学习如何阅读有多个await方法方法时,程序的实际流程是怎么样的,理解await的异步 ...
- 多线程编程学习笔记——async和await（三）
接上文 多线程编程学习笔记——async和await(一) 接上文 多线程编程学习笔记——async和await(二) 五. 处理异步操作中的异常 本示例学习如何在异步函数中处理异常,学习如何对多 ...
- 多线程编程学习笔记——使用异步IO（一）
接上文 多线程编程学习笔记——使用并发集合(一) 接上文 多线程编程学习笔记——使用并发集合(二) 接上文 多线程编程学习笔记——使用并发集合(三) 假设以下场景,如果在客户端运行程序,最的事情之一是 ...
随机推荐
- [转] 禁止ultraedit自动检查更新的方法
菜单栏: 高级->配置->应用程序布局->其他 取消勾选“自动检查更新” (原文地址:http://blog.csdn.net/redeyerabbit/article/deta ...
- js 去掉前后空格
前后去空格 return str.replace(/(^\s*)|(\s*$)/g, ""); 全部去空格 $("#panelbody").text().rep ...
- jenkins 执行远程linux命令
在Jenkins中进行构建时,可能需要首先SSH登录到一个远程服务器以执行必要的脚本,然后再执行构建.这时,需要安装SSH Plugin,并进行如下配置.1.在Jenkins界面,系统管理->管 ...
- 使用国内镜像源安装npm包报错
1 使用命令安装 npm install webpack --save-dev 可能是版本太高,国内没有更新. 通过设置镜像源 npm config set registry http://regis ...
- mysqlbackup 重建带有gtid特性的slave
一.mysqlbackup简介: mysqlbackup是mysql的一个企业级备份工具,优点就是牛逼,缺点就是这东西要钱买. 二.gtid 特性简介: gtid 的中文名叫全局事务ID,也就是说每一 ...
- Visual Studio 中突出显示的引用
有时候代码中处理的变量多了,看起代码来就比较的费劲,有时想看一个变量都在哪里用到了,还要一个一个的去仔细分辨. 一.VS2012本身就提供了选中提示功能 但是本身带的这个选中提示功能颜色比较浅,不过这 ...
- Linux写时拷贝技术（copy-on-write）
1.传统的fork()函数创建一个子进程,子进程和父进程共享正文段,复制数据段,堆,栈到子进程示意图如下: 2.Linux的fork()函数-写时复制(copy-on-write)创建一个子进程,内核 ...
- Oracle PLSQL Demo - 04.数字FOR LOOP循环[NUMBERABLE (FOR) LOOP]
declare v_display ); begin .. loop .. loop dbms_output.put_line(i || ' - ' || j); end loop; end loop ...
- 索引长度过长 ERROR 1071 (42000): Specified key was too long; max key length is 767 bytes
1.发现问题 今天在修改innodb表的某个列的长度时,报如下错误: alter table test2 modify column id varchar(500); ERROR 1071 (4200 ...
- WPF学习之X名称空间详解
X名称空间里面的成员(如X:Name,X:Class)都是写给XAML编译器看的.用来引导XAML代码将XAML代码编译为CLR代码. 4.1X名称空间里面到底都有些什么? x名称空间映射的是:htt ...