JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)

时间:2022-09-02 07:56:44

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&lpar;DOM&rpar; 2&period;1 获取页面元素 &vert; 事件1 &vert; 属性操作 &vert; 节点 &vert; 创建元素 &vert; 事件2

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

  2. jQuery编程基础精华01(jQuery简介&comma;*对象&dollar;&comma;jQuery对象、Dom对象&comma;链式编程&comma;选择器)

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

  3. JavaScript DOM编程基础精华03(动态设置&comma;层的操作&comma;性能问题)

    代码是否需要放置到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,表单选择器,子元素过滤器&lpar;&ast;&rpar;,追加方法,节点,样式操作)

    属性.表单过滤器 属性过滤选择器: $("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&lpar;变量,语法,数据类型&rpar;

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

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

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

随机推荐

  1. LINUX:read、array、declare

    read:要读取来自键盘输入的变量 使用规则: read [-pt] variale 选项与参数: -p:后面接提示字符: -t:后面接等待的“秒数”: 如果read之后不加任何参数,直接加上变量名称 ...

  2. 关于Delphi中多线程传递参数的简单问题

    http://bbs.csdn.net/topics/390513469/ unit uThread; interface uses Classes; type Th = class(TThread) ...

  3. echo使用说明,参数详解

    简介 echo [OPTION]... [STRING]... 描述 -n 末尾不加换行 -e 开启输出字串中对反斜杠的转译 -E 禁用反斜杠转译 只有开启-e参数的时候,下面的命令才能起作用: \0 ...

  4. TCP&sol;IP capture&sol;analysis tools in Unix&sol;Linux

    There are some useful tools in Unix/Linux to check out how the system is going on. Here is a short s ...

  5. React 系列文章&lpar;1&rpar;: npm 手动搭建React 运行实例 &lpar;新手必看&rpar;

    摘 要 刚接触React 开发, 在摸索中构建react 运行环境,总会遇到各种坑:本文,将用最短时间解决webpack+react 环境搭建问题. 1.如果你还没有React基础 看这里. 2.如果 ...

  6. GC对象分配规则

    1.对象优先分配在Eden区,如果Eden区没有足够的空间时,虚拟机执行一次Minor GC. 2.大对象直接进入老年代(大对象是指需要大量连续内存空间的对象).这样做的目的是避免在Eden区和两个S ...

  7. SQL触发器批量删除数据库中的表

    以下通过触发器批量删除数据库中的表,SQL2008已验证 DECLARE @Table NVARCHAR() DECLARE @Count Int = DECLARE tmpCur CURSOR FO ...

  8. Linux CentOS7下安装Python3及其setuptools、pip

    CentOS 7系统自带Python2.7,我们尽量别去卸载它!!否则会出问题,比如yum无法使用等问题. 假若,在安装Python3时没有自动安装setuptools和pip,那么,如何在CentO ...

  9. CentOS 6&period;4 源码安装MySQL 5&period;6

    1.安装前准备工作 1.1 必备的包 gcc/g++ :MySQL 5.6开始,需要使用g++进行编译.cmake :MySQL 5.5开始,使用cmake进行工程管理,cmake需要2.8以上版本. ...

  10. 互联网校招面试必备——Java多线程

    本文首发于我的个人博客:尾尾部落 本文是我刷了几十篇一线互联网校招java后端开发岗位的面经后总结的多线程相关题目,虽然有点小长,但是面试前看一看,相信能帮你轻松啃下多线程这块大骨头. 什么是进程,什 ...