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. TClientDataSet中关于TField、TFieldDef动态创立字段的应用

    //使用 TFieldDef 建表: begin with ClientDataSet1.FieldDefs do begin Add('Name' , ftString, 12, True); { ...

  2. 为什么C/C++语言使用指针

    这是参加面试时,面试官问的一道开放性题目. 问题是:为什么C/C++语言使用指针? 这个问题一问出来,直接被面试官秒杀了,面试官大神,你怎么不按套路出牌啊? 说好的malloc和new的区别呢?说好的 ...

  3. Struts 2简单配置分析

    要配置Struts 2,首先先要有Struts 2的Jar包,可以去Struts的官网下载(http://struts.apache.org/),这里有3个GA版本可以选择下载,我选择的是最新的2.2 ...

  4. 2016 系统设计第一期 （档案一）jQuery radio 取值赋值

    MVC代码: <div class="form-group"> <label for="Gender" class="col-sm- ...

  5. easyui的datagrid和panel如何让标题动态改变？

    解决方法: 用$(this).datagrid("getPanel").panel("setTitle","new title").$(th ...

  6. 复习JS和jQuery

    复习JS和jQuery 近些时日,以前学过的东西忘了好多.今天且写一点复习一下JS和jQuery.希冀与某年某月某日,忘却的时候,能看一下自己写的博文,尚可记起一二. 现在有需求如下:有两个按钮,一个 ...

  7. Linux环境下的Nodejs

    最近在学习Node.js,在window下总是觉得不那么爽快.最简单而且环保的方法是在虚拟机中安装一个Linux. { 1.Linux:家中的Linux为Centos. 2.VirtuallyBox: ...

  8. 移动端material风格日期时间选择器

    原文 好多时候在移动端需要一个的日期选择器,由于在应用上有可能应用各种框架库(Vue.js, React.js, zepto.js等):所以说一个无依赖的,这样易于上层进行封装.直接开门见山,先来张动 ...

  9. js函数：setInterval()/clearInterval()——js网页计时器

    一.setInterval()/clearInterval()技术学习 都是window对象的方法,可以直接使用. setInterval(function(){},1000);:每1000毫秒执行一 ...

  10. 【系统Configmachine.config与自己的应用程序的App.config/Web.Config配置节点重复】解决方法

    自己的应用程序的App.config或Web.Config文件中与系统的C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Configmachine.co ...