DOM入门
DOM就是Html页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。 JavaScript→DOM就是C#→.Net Framwork。没有.net，C#只能for、while，连WriteLine、MessageBox都不行。DOM就是一些让JavaScript能操作Html页面控件的类、函数。
DOM也像WinForm一样，通过事件、属性、方法进行编程。

CSS+JavaScript+DOM=DHtml

DOM模型和获取页面元素

window.id

document.getElementById()

整个页面或者说窗口就是一个window对象---------------window是顶级对象
Document相当于window下面的大将,是整个页面
window.txt1.value = ‘哈哈’;这种情况放在表单中就有问题了
window.document.getElementById('txt1').value = '哈哈看我';

使用window对象的属性、方法的时候可以省略window。
比如：
•window.alert(‘hello');可以省略成alert(‘hello');
•window.document可以直接写document
l能不写window就不要写，这样可以减少js文件的字节数。

事件
在DOM中有很多事件。演示：
1.<body onmousedown=“alert(‘别点我！’);”>//注意body的范围。
2.有时事件的响应代码比较多，就要放到一个函数中：
<script type="text/javascript">
        function UserMouseDown() {
            alert('网页被你点坏了>_<~~,赔吧！');
            alert('逗你玩呢~~');
        }
 </script>
<input type="button" value="按钮" onmousedown="UserMouseDown();" />
onmousedown=“UserMouseDown();”中，UserMouseDown后的括号不能丢（不能写成onmousedown=“UserMouseDown” ），带()表示调用函数，直接写函数名表示设置事件的处理函数为UserMouseDown。

window对象的方法1
window.alert(‘大家好！’);//弹出警告对话框
window.confirm(‘确定要删除吗？’);//确定、取消对话框，返回true或false;

window对象的方法2
window.setInterval(code,delay)//每隔一段时间执行指定的代码（类似于winForm中的Timer控件。）
第一个参数：指定的代码字符串
第二个参数：时间间隔（毫秒数）
var intervalId=setInterval(“alert(‘hello’);”,1000);
window.clearInterval(intervalId);//停止计时器
clearInterval()取消setInterval的定时执行，相当于Timer中的Enabled=False。因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，即setInterval的返回值。

window对象的方法3
setTimeout也是定时执行，但是不像setInterval那样是重复的定时执行，只执行一次，clearTimeout也是清除定时。很好区分：Interval：间隔；timeout：超时。
var timeoutId = setTimeout("alert('hello')", 2000);

body、document对象的事件
onload（页面加载后触发）
window.控件Id（不建议使用）
document.getElementById(“控件Id”);(推荐)
onunload（页面卸载后触发）
网页关闭（或者离开）后触发。//刷新页面的时候、关闭选项卡的时候（多个选项卡）
onbeforeunload（页面卸载前触发）
在网页准备关闭（或者离开）前触发。//注意浏览器缓存

其他事件
除了属性之外，当然还有通用的HTML元素的事件：onclick（单击）、ondblclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、onmousedown（鼠标按下）、onmousemove（鼠标移动）、onmouseout（鼠标离开元素范围）、onmouseover（鼠标移动到元素范围）、onmouseup（鼠标按键释放）、oncontextmenu（在浏览器中单击鼠标右键显示”右键菜单”时触发）等。

JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）的更多相关文章

  1. webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2

    js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...

  2. jQuery编程基础精华01（jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器）

    jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...

  3. JavaScript DOM编程基础精华03（动态设置,层的操作,性能问题）

    代码是否需要放置到onload中  //如果js代码需要操作页面上的元素,则将该代码放到onload里面.         //因为当页面加载完毕之后页面上才会有相关的元素 //如果js代码中没有操作 ...

  4. JavaScript DOM编程基础精华02（window对象的属性，事件中的this，动态创建DOM，innerText和innerHTML）

    window对象的属性1 window.location对象: window.location.href=‘’;//重新导航到新页面,可以取值,也可以赋值. window.location.reloa ...

  5. jQuery编程基础精华02（属性、表单过滤器，元素的each，表单选择器，子元素过滤器(*)，追加方法，节点，样式操作）

    属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...

  6. 用javaScript获取页面元素值

    用JavaScript获取页面元素常见的三种方法:                                                           getElementById() ...

  7. JavaScript获取页面元素的常用方法

    1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...

  8. JavaScript基础精华01(变量，语法，数据类型)

    JavaScript是一种脚本语言. 脚本,一条条的文字命令.执行时由系统的一个解释器,将其一条条的翻译成机器可识别的指令,然后执行 JavaScript基本组成 1.基本语法(浏览器基本都支持,有统 ...

  9. Javascript高级编程学习笔记（36）—— DOM（2）Document

    Documet类型 了解了基础的Node类型过后,我们来聊聊Node中的Document类型 我们知道所有的节点都继承自Node类型 所以除了Node类型公有的方法和类型之外,Document类型还有 ...

随机推荐

  1. Sublime Text 前端开发常用扩展插件推荐

    Sublime Text 前端开发常用扩展插件推荐 Sublime Text Sublime Text 是程序员们公认的编码神奇,拥有漂亮的用户界面和强大的功能 更重要的是,Sublime Text ...

  2. WPF中ListBox的项ListBoxItem被选中的时候Background变化

    使用WPF 中ListBox,点击ListBoxItem的时候,自定义它的背景色,曾经在网上找了一些方法, 不是很理想,后来在StackOverflow上找到了,贴出代码和效果图: 效果图:

  3. 查看leapmotion的frame信息

    leapmotion的SDK里有个c#实例,很详细,其中的frame类已经把这些封装的很完善了.可惜是控制台的,运行时很难去找那些动作对应的哪些数据.我今天做的就是把它们在窗体控件里分别显示出来,这样 ...

  4. .NET序员的成长之路

  5. C#模拟键盘鼠标事件 SendKeys 的特殊键代码表（转）

    使用 SendKeys 将键击和组合键击发送到活动应用程序.此类无法实例化.若要发送一个键击给某个类并立即继续程序流,请使用 Send.若要等待键击启动的任何进程,请使用 SendWait. 每个键都 ...

  6. Spring4新特性简述

    Spring是一个java世界中极其流行 的开源框架.Spring的初衷是降低企业级开发的复杂性,并试图通过POJO对象实现之前EJB这类重型框架才能实现的功能.Spring不仅仅对服务 端开发有用, ...

  7. thinkphp对数据库操作有哪些内置函数

    getModelName() 获取当前Model的名称 getTableName() 获取当前Model的数据表名称 switchModel(type,vars=array()) 动态切换模型 tab ...

  8. 微软职位内部推荐-SDE2 (Windows - Audio)

    微软近期Open的职位: SDE2 (Windows - Audio) Windows Partner Enablement team in Operating System Group is loo ...

  9. 微软职位内部推荐-Android Developer

    微软近期Open的职位: Position: SDE II or Senior SDE -- Mobile Products Android/WP Contact Person: Winnie Wei ...

  10. python学习小结6：模块

    模块:在Python中有一个概念叫做模块(module),简单地说,模块就是一个保存了Python代码的文件.          模块能定义函数,类和变量,模块里也能包含可执行的代码.         ...