今天老师出了一道面试题目:取到表单里面的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学习笔记的更多相关文章

  1. JS DOM学习笔记

    1.window对象代表当前浏览器窗口 2.使用window对象的属性.方法的时候可以省略window.例如:window.alert("hello")一般写成alert(&quo ...

  2. Dom学习笔记-(一)

    一.概述 DOM(文档对象模型)是针对HTML和XML文档的一个API,其脱胎于DHTML. DOM可以将任意HTML和XML文档描绘成一个由多层节点构成的结构. 每一个文档包含一个根节点-文档节点, ...

  3. BOM、DOM学习笔记——JavaScript

    1.BOM的概述    browser object modal :浏览器对象模型.    浏览器对象:window对象.    Window 对象会在 <body> 或 <fram ...

  4. DOM学习笔记--入门1

    HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准. 首先节点有很多种,不仅仅HTML元素是节点,尤其 要注意文本节点的存在. 根据 W3C 的 HTML DOM 标准,HTML ...

  5. HTML DOM 学习笔记

    一.HTML DOM定义了所有HTML元素的对象和属性,以及访问他们的方法即:HTML DOM是关于如何获取,修改,添加,删除HTML元素的标准二.DOM节点1.分类整个文档是一个文档节点每个HTML ...

  6. DOM学习笔记(三)DOM元素的访问、修改与事件

    访问 HTML 元素等同于访问节点,使用的是document对象下的数个getElement方法,然后再对返回的元素(或元素列表)进行具体内容的访问和修改,或者响应对应的事件是操作 一些 DOM 对象 ...

  7. DOM学习笔记(二)对象方法与属性

    所有 HTML 元素被定义为对象,而编程接口(对象的访问)则是对象方法和对象属性. 事实上,常用的只用window对象及其子对象document对象,以及事件Event对象. Window 对象 Wi ...

  8. DOM学习笔记(一)DOM树

    DOM 定义了访问和操作 HTML 文档的标准方法. HTML 文档中的所有内容都是节点,将 HTML 文档表达为树结构,称为节点树 HTML DOM 树 HTML DOM 是关于如何获取.修改.添加 ...

  9. DOM学习笔记(思维导图)

    导图

随机推荐

  1. 如何把 Callback 接口包装成 Promise 接口

    最近一段时间一直在看Node.js,在开发过程中经常要调用一些异步接口,通常在接口的最后一个参数会传入一个回调函数,可以用来处理异常,非异常情况.大致模式如下: var fs = require(“f ...

  2. Kinect外包团队(长年承接微软Kinect体感项目外包,有大型Kinect案例)

    承接Kinect体感企业项目.游戏项目外包 北京公司.专业团队,成员为专业WPF产品公司一线开发人员,有大型产品开发经验: 提供优质的售后服务,保证产品质量,轻量级产品可以提供规范清晰的源代码,有业务 ...

  3. 使用phpmailer发送smtp邮件时提示 SMTP Error: Could not authenticate 错误

    使用phpmailer发送smtp邮件时提示 SMTP Error: Could not authenticate 错误 这个错误是验证出现错误, $mail->Port = 25; //SMT ...

  4. Hadoop 集群搭建

    Hadoop 集群搭建 2016-09-24 杜亦舒 目标 在3台服务器上搭建 Hadoop2.7.3 集群,然后测试验证,要能够向 HDFS 上传文件,并成功运行 mapreduce 示例程序 搭建 ...

  5. #define宏定义形式的"函数"导致的bug

    定义了一个宏定义形式的"函数": #define  SUM8(YY)\ {\ int Y = YY>>2;\ ...\ } 然后使用的时候,传入了一个同名的变量Y: i ...

  6. SQL Server Reporting Service(SSRS) 第一篇 我的第一个SSRS例子

    很早就知道SQL SERVER自带的报表工具SSRS,但一直没有用过,最近终于需要在工作中一展身手了,于是我特地按照自己的理解做了以下总结: 1. 安装软件结构 SSRS全称SQL Server Re ...

  7. CI 3.0.6 控制器打印base_url 地址不为 localhost的解决方法

    1.在application\config\autoload.php 第92行 加载url    $autoload['helper'] = array('url'); 2.application\c ...

  8. ireport5.6+jasperreport6.3开发(三)--以javabean为基准的报表开发(javabean)

    这里只有ireport的开发没有web侧的程序. ireport的数据源可以说是多种多样,大致可以通过文件 数据库 bean类这三种方式,这里只介绍bean类 (数据库比较简单可参考其他的网站,文件没 ...

  9. Numpy Study 1

    Numpy 使用1 1.Numpy创建数组 import numpy as np 创建数组有以下方式: (1).arange numpy.arange([start, ]stop, [step, ]d ...

  10. 7 -- Spring的基本用法 -- 1...2

    7.1 Spring简介和Spring4.0的变化 7.1.1 Spring 简介 当使用Spring框架时,必须使用Spring Core Container(即Spring容器),它代表了Spri ...