一、window对象是所有客户端JavaScript特性和API的主要接入点,用window来引用它。

属性:location属性(引用Location对象,当前显示在窗口的URL)、document属性(引用Document对象,表示显示在窗口中的文档)

window.location="https://www.baidu.com";

方法:alert方法(弹出对话框)、setTimeout方法(给定一个时间之后触发一个回调)

alert("hello world!");
setTimeout(function(){alert("hello world!")});

二、Document对象是显示在窗口中的文档,其实Document对象是通过Window对象的document属性引用的对象

方法:getElementByID()(可以基于元素的id属性的值返回单一的文档元素,返回的文档元素是一个Element对象)

var a=document.getElementById("a");  //查找id为a的元素 返回的变量a是一个Element对象

三、Element对象有重要的属性和方法,比如允许脚本获取它的内容,设置对象属性的值

方法:查询、遍历和修改文档内容等

if (a.firstChild==null)
{
a.appendChild(document.createTextNode(new Date().toString()));
}
//如果a对象的元素内容为空,往里面插入当前的日期和时间

  由上面的例子可以看出

  1、Element对象存在appendChild()方法

  2、Document对象存在createTextNode()方法

属性:style属性(设置文档元素的CSS样式)、className属性(修改元素的CSS类名)

a.style.backgroundColor="yellow";  //修改元素的背景颜色
a.className="b";    //改变类名,进而修改元素的样式

四、Window、Document、Element对象还有一个重要的属性集合就是事件处理程序相关的属性,在实际运用中,可以为一个对象绑定一个事件处理函数,当某个事件发生后,会触发这个函数以异步的方式调用处理程序。

注意:事件处理程序的属性名是以单词on开始的例如onClick、onload等

客户端JavaScript(window、document、element)的更多相关文章

  1. JavaScript 客户端JavaScript之Document对象中的表单和表单元素

    Form对象 代表一个HTML表单(document可以有多个表单元素) 表单访问 document.form[document.forms.length-1] 访问表单元素 document.for ...

  2. JavaScript Window.document对象

    一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunment.getElementById(&qu ...

  3. (function($, window, document) {}) jQuery 调用解决与其他javascript库冲突的写法

    将函数包在红色字体内部,可以解决$符号与其他插件的冲突. <script type="text/javascript"> (function($, window, do ...

  4. javascript中window,document,body的解释

    解释javascript中window,document,body的区别: window对象表示浏览器中打开的窗口,即是一个浏览器窗口只有一个window对象. document对象是载入浏览器的ht ...

  5. JavaScript的DOM操作。Window.document对象

    间隔执行一段代码:window.setlnteval("需要执行的代码",间隔毫秒数) 例 :      window.setlnteval("alert("你 ...

  6. javascript匿名函数自执行 (function(window,document,undefined){})(window,document);

    使用匿名自执行函数的作用: (function(window,document,undefined){})(window,document); 1.首先匿名函数 (function(){}) (); ...

  7. 【JavaScript权威指南(第五版)】笔记之第二部分 客户端JavaScript 第13章~第23章

    第十三章 Web浏览器中的javascript ①   eg:下面两行代码实际上执行的是相同的功能 var answer = 42; window.answer = 42;   ③每个window对象 ...

  8. JavaScript 客户端JavaScript之事件(DOM API 提供模块之一)

    具有交互性的JavaScript程序使用的是事件驱动的程序设计模型.   目前使用的有3种完全不同的不兼容的事件处理模型. 1.原始事件模型 (一种简单的事件处理模式) 一般把它看作0级DOM API ...

  9. JavaScript 客户端JavaScript之 脚本化文档

    客户端JavaScript的存在把静态HTML转变为交互式的Web应用程序,脚本化Web页面的内容正是JavaScript存在的理由.   一个文档对象模型或者说DOM就是一个API,它定义了如何访问 ...

随机推荐

  1. UILabel的size根据文字的长短变化

     UILabel *label = [[UILabel alloc] init]; label.backgroundColor = [UIColor blackColor]; [self.view a ...

  2. UOJ 217 奇怪的线段树

    http://uoj.ac/problem/217 题意就不X了,思路在这: 居然一开始把sap里面的mn设置为inf了,我是傻逼.. #include<cstdio> #include& ...

  3. 重新定义malloc和free 防止内存泄漏

    1, 定义供应用程序使用的头文件//libmem.h#ifndef _LIBMEM_H_#define _LIBMEM_H_ //声明自定义malloc及free函数extern void *my_m ...

  4. 所有语言的Awesome

    Awesome Awesomeness A curated list of amazingly awesome awesomeness. Also available on: Awesome-Awes ...

  5. SSE及相关技术(web sockets, long polling等)

    server-sent events--One Way Messaging 允许网页获得来自服务器的更新,并且自动更新 Server-Sent Events: allow a web page to ...

  6. JVM探索(一)

    JVM测试的样例代码: import java.lang.management.ManagementFactory; /**  * @author zhailzh  *   * @Date 2015年 ...

  7. Android新浪微博客户端(七)——ListView中的图片异步加载、缓存

    原文出自:方杰|http://fangjie.info/?p=193转载请注明出处 最终效果演示:http://fangjie.sinaapp.com/?page_id=54 该项目代码已经放到git ...

  8. Perl时间处理函数

    官方网址:http://search.cpan.org/~stbey/Date-Calc-6.3/lib/Date/Calc.pod#___top use Date::Calc qw( Days_in ...

  9. java笔记8之选择结构IF

    注意1 A比较表达式无论简单还是复杂,结果必须是boolean类型        B:if语句控制的语句体如果是一条语句,大括号可以省略:          如果是多条语句,就不能省略.建议永远不要省 ...

  10. 解决display: inline-block; 4px间隙的全兼容做法

    就拿ul, li标签做例,关键代码如下: ul{ font-size: 0; letter-spacing: -4px; word-spacing: -4px; //解决4px间隙的全兼容做法 } l ...