Dom学习笔记
今天老师出了一道面试题目：取到表单里面的textbox的值，两种方法。知道一种，老师说的什么dom，我竟然不知道。
以前学html的时候，老师也重来没有提到dom的概念。javaScript只是学了一些语法，对于javaScript还是很模糊，只是知道这样写函数，调用那些函数，没有dom的概念；
知耻后勇，赶紧补一补---杨中科。net视频第八季--dom视频：
1.使用javascript操作dom进行dhtml开发；
2.dom就是html页面的模型，将每个便签都作为一个对象，javascript通过调用dom中的
属性方法就可以对网页中的文本框，层等元素进行编程控制。比如通过操作文本框的
dom对象就可以读取文本框中的值、设置文本框中的值。
dom也像winform一样，通过事件、属性、方法进行编程。
3.css+javascript+dom=dhtml
4.动态设置事件
<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
<meta charset="utf-8"/>
<script type="text/javascript">
function f1(){
alert("nima");
}
function f2(){
alert("wowo");
}
</script>
</head>
<body>
<br>
<!--双击document.ondblclick=f1-->
<input type="button" onclick="document.ondblclick=f1" value="事件
1"/>
<!--单击document.onclick=f2-->
<input type="button" onclick="document.onclick=f2" value="事件2"/>
</body>
</html>
5.windows对象：
windows对象代表当前浏览器窗口，使用window对象的属性、方法的时候可以省略
window，比如window。alert（‘a’）可以省略成alert('aa');
（1）alert方法弹出消息对话框；
（2）confirm方法，显示“确定”、“取消”对话框，如果按了【确定】按钮，就返回
true，否则据false，通常用在删除操作；
if(confirm("是否继续？")){
alert("确定");
}
else{
alert("取消");
}
（3）重新导航到指定的地址：navigate("http://www.rupent.com");
首先说明的是 window.navigate 与 window.location.href 都是实现页面链接跳转的
，下面将介绍它们的区别。
window.navigate("http://jb51.net/") 这个方法是只针对IE的，不适用于火狐等其他
浏览器，在HTML DOM Window Object中，根本没有列出window.navigate这个方法，所
以这个方法尽量少用，遗忘最好。
location 属性是兼容所有浏览器的。因此在实现页面跳转的时候还是使用这个比较靠
谱，比如：
<a onclick="javascript:window.location.href='http://jb51.net/'">脚本之家</a>
详细出处参考：http://www.jb51.net/article/41497.htm
（4）setInterval每隔一段时间执行指定代码，第一个参数为代码的字符串，第二个为
间隔时间（单位毫秒），返回值为定时器的标识：setInterval("alert
('hello')",5000);
(5)clearInterval取消setInterval的定时执行，相当于Timer中的Enabled=false。因
为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，
即setInterval的返回值。
var interval=setInterval("alert('hello')",5000);
clearInterval(interval);
(6)setTimeout也是定时执行，但是不像setInterval那样是重复的定时执行，只执行一
次，clearTimerout也是清除定时，区分：interval(间隔)，timeout：（超时）。
var timeout=setTimerout("alert('hello')",2000);
<!--走马灯效果-->
function scroll(){
var title=document.title;
var firstch=title.charAt(0);
var leftstr=title.substring(1,title.length);
document.title=leftstr+firstch;
}
setInterval("scroll()",500);
6.body,document对象的事件：
（1）onload:网页加载完毕触发，浏览器是一边下载文档、一边解析执行，可能会出现
javascript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代
码放到onload事件中，或者可以把javascript放到元素之后；元素的onload事件是元素
自己的加载完毕时触发，body onload才是全部加载完成。
（2）onunload：网页关闭或者离开后触发；
（3）onbeforeunload:在网页准备关闭（或者离开）后触发。在事件中为
window.event.returnValue赋值（要显示的警告消息），这样窗口离开（比如前进、后
退、关闭）就会弹出确认消息<body onbeforeunload="window.event.returnValue='退
出吗？'">
（4）通用的html事件
onclick\ondblclick\onkeydown\onkeypress\onkeyup\onmousedown\onmousemove
\onmouseout\onmouseover\onmouseup等；
7.window对象的属性：
（1）window.location.href='http://www.baidu.com',重新导向新的地址，和
navigation方法效果一样，window.location.reload()刷新页面；
<script type="text/javascript">
function ff(){
location.href="http://www.baidu.com";
}
</script>
（2）window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于
window对象的事件，所有元素的事件都可以通过event属性取得到相关信息。
altKey属性，bool类型，表示发生事件时的alt键是否被按下，类似的还有
ctrlKey\shiftKey属性，例子:
function myClick1(){
if(event.altKey)
{
alert("alt点击");
}
else
{
alert("普通点击");
}
}
clientX,clientY发生事件时鼠标在客户区的坐标；screenX,screenY发生事件
时鼠标在屏幕上的坐标；offsetX、offsetY发生事件时鼠标相对于事件源（比如点击按
钮是触发onclick）的坐标；
returnValue属性，如果将returnValue设置为false，就会取消默认事件的处
理。在超链接的onclick里面禁止fangwenhref的页面。在表单校验的时候禁止提交表单到服务器。
srcElement,获得事件源对象；
keyCode发生时间时的按键值；
button发生时间时鼠标按键，1为左键，2为右键，3为左右键同时按
<body onmousedown="if(event.button==2){alert('禁止复制');}">
（3）
8.
9.
Dom学习笔记的更多相关文章
- JS DOM学习笔记
1.window对象代表当前浏览器窗口 2.使用window对象的属性.方法的时候可以省略window.例如:window.alert("hello")一般写成alert(&quo ...
- Dom学习笔记-（一）
一.概述 DOM(文档对象模型)是针对HTML和XML文档的一个API,其脱胎于DHTML. DOM可以将任意HTML和XML文档描绘成一个由多层节点构成的结构. 每一个文档包含一个根节点-文档节点, ...
- BOM、DOM学习笔记——JavaScript
1.BOM的概述 browser object modal :浏览器对象模型. 浏览器对象:window对象. Window 对象会在 <body> 或 <fram ...
- DOM学习笔记--入门1
HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准. 首先节点有很多种,不仅仅HTML元素是节点,尤其 要注意文本节点的存在. 根据 W3C 的 HTML DOM 标准,HTML ...
- HTML DOM 学习笔记
一.HTML DOM定义了所有HTML元素的对象和属性,以及访问他们的方法即:HTML DOM是关于如何获取,修改,添加,删除HTML元素的标准二.DOM节点1.分类整个文档是一个文档节点每个HTML ...
- DOM学习笔记（三）DOM元素的访问、修改与事件
访问 HTML 元素等同于访问节点,使用的是document对象下的数个getElement方法,然后再对返回的元素(或元素列表)进行具体内容的访问和修改,或者响应对应的事件是操作 一些 DOM 对象 ...
- DOM学习笔记（二）对象方法与属性
所有 HTML 元素被定义为对象,而编程接口(对象的访问)则是对象方法和对象属性. 事实上,常用的只用window对象及其子对象document对象,以及事件Event对象. Window 对象 Wi ...
- DOM学习笔记（一）DOM树
DOM 定义了访问和操作 HTML 文档的标准方法. HTML 文档中的所有内容都是节点,将 HTML 文档表达为树结构,称为节点树 HTML DOM 树 HTML DOM 是关于如何获取.修改.添加 ...
- DOM学习笔记（思维导图）
导图
随机推荐
- C# java MD5加密方不一致问题
说来惭愧,做开发几年了,一直在吸取,今天也写写自已关于技术的一点点理解,不正之处,请大家多多指点. 由于之前开发的项目使用的是C#,用户信息使用的C#的MD5加密码方式,而现在需要切换到Java平台下 ...
- 实验一 认识DOS
#include<stdio.h> #include<string.h> void main() { char cmd[20][20]={"dir&quo ...
- php 判断当前的操作系统的方法
因为windows 和 linux 下的标识符是不一样的,所以写了个方法来获取当前的标识符. /** * 对操作系统进行判断 * @return string */ static function j ...
- 【转】部分电脑安装升级 ubuntu 12.04 后无法挂起问题的解决(挂起无法唤醒同样有效)
原文地址:http://blog.csdn.net/longerzone/article/details/7860232 我的Ubuntu12.04是安装的windows桌面安装版(使用wubi安装) ...
- OO的五大原则是指SRP、OCP、LSP、DIP、ISP。
OO的高层原则,面向对象设计的基本原则 设计模式之六大原则--开闭原则(OCP) 设计模式之六大原则--迪米特法则(LoD,LKP) 设计模式之六大原则--接口隔离原则(ISP) 设计模式之六大原则- ...
- Python_Day4_函数
本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数 定义: 函数是指将一组语句的集合通过一个名字( ...
- Maven 手动添加 JAR 包到本地仓库
Maven 确确实实是个好东西,用来管理项目显得很方便,但是如果是通过 Maven 来远程下载 JAR 包的话,我宿舍的带宽是4兆的,4个人共用,有时候用 Maven 来远程下载 JAR 包会显得很慢 ...
- ActiveReports最终报表设计器本地化方法介绍
ActiveReports UI界面中的所有字符信息.错误提示信息.以及一些logo.图像资源,都能够通过运行batch文件来本地化.本文主要介绍资源本地化的具体步骤: 1. 资源目录 所有可本地化的 ...
- Neo4j 3.0 存储过程
Neo4j 3.0 提供一个新的功能“存储过程”,该功能并不是Neo4j-Server的扩展,而是可以直接运行的. 在写这篇文章的时候,只能通过预备好的语句去执行 1 CALL package.pro ...
- Java数组扩容算法及Java对它的应用
1)Java数组对象的大小是固定不变的,数组对象是不可扩容的.利用数组复制方法可以变通的实现数组扩容.System.arraycopy()可以复制数组.Arrays.copyOf()可以简便的创建数组 ...