客户端JavaScript(window、document、element)
一、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)的更多相关文章
- JavaScript 客户端JavaScript之Document对象中的表单和表单元素
Form对象 代表一个HTML表单(document可以有多个表单元素) 表单访问 document.form[document.forms.length-1] 访问表单元素 document.for ...
- JavaScript Window.document对象
一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunment.getElementById(&qu ...
- (function($, window, document) {}) jQuery 调用解决与其他javascript库冲突的写法
将函数包在红色字体内部,可以解决$符号与其他插件的冲突. <script type="text/javascript"> (function($, window, do ...
- javascript中window,document,body的解释
解释javascript中window,document,body的区别: window对象表示浏览器中打开的窗口,即是一个浏览器窗口只有一个window对象. document对象是载入浏览器的ht ...
- JavaScript的DOM操作。Window.document对象
间隔执行一段代码:window.setlnteval("需要执行的代码",间隔毫秒数) 例 : window.setlnteval("alert("你 ...
- javascript匿名函数自执行 (function(window,document,undefined){})(window,document);
使用匿名自执行函数的作用: (function(window,document,undefined){})(window,document); 1.首先匿名函数 (function(){}) (); ...
- 【JavaScript权威指南(第五版)】笔记之第二部分 客户端JavaScript 第13章~第23章
第十三章 Web浏览器中的javascript ① eg:下面两行代码实际上执行的是相同的功能 var answer = 42; window.answer = 42; ③每个window对象 ...
- JavaScript 客户端JavaScript之事件(DOM API 提供模块之一)
具有交互性的JavaScript程序使用的是事件驱动的程序设计模型. 目前使用的有3种完全不同的不兼容的事件处理模型. 1.原始事件模型 (一种简单的事件处理模式) 一般把它看作0级DOM API ...
- JavaScript 客户端JavaScript之 脚本化文档
客户端JavaScript的存在把静态HTML转变为交互式的Web应用程序,脚本化Web页面的内容正是JavaScript存在的理由. 一个文档对象模型或者说DOM就是一个API,它定义了如何访问 ...
随机推荐
- UILabel的size根据文字的长短变化
UILabel *label = [[UILabel alloc] init]; label.backgroundColor = [UIColor blackColor]; [self.view a ...
- UOJ 217 奇怪的线段树
http://uoj.ac/problem/217 题意就不X了,思路在这: 居然一开始把sap里面的mn设置为inf了,我是傻逼.. #include<cstdio> #include& ...
- 重新定义malloc和free 防止内存泄漏
1, 定义供应用程序使用的头文件//libmem.h#ifndef _LIBMEM_H_#define _LIBMEM_H_ //声明自定义malloc及free函数extern void *my_m ...
- 所有语言的Awesome
Awesome Awesomeness A curated list of amazingly awesome awesomeness. Also available on: Awesome-Awes ...
- SSE及相关技术(web sockets, long polling等)
server-sent events--One Way Messaging 允许网页获得来自服务器的更新,并且自动更新 Server-Sent Events: allow a web page to ...
- JVM探索(一)
JVM测试的样例代码: import java.lang.management.ManagementFactory; /** * @author zhailzh * * @Date 2015年 ...
- Android新浪微博客户端(七)——ListView中的图片异步加载、缓存
原文出自:方杰|http://fangjie.info/?p=193转载请注明出处 最终效果演示:http://fangjie.sinaapp.com/?page_id=54 该项目代码已经放到git ...
- Perl时间处理函数
官方网址:http://search.cpan.org/~stbey/Date-Calc-6.3/lib/Date/Calc.pod#___top use Date::Calc qw( Days_in ...
- java笔记8之选择结构IF
注意1 A比较表达式无论简单还是复杂,结果必须是boolean类型 B:if语句控制的语句体如果是一条语句,大括号可以省略: 如果是多条语句,就不能省略.建议永远不要省 ...
- 解决display: inline-block; 4px间隙的全兼容做法
就拿ul, li标签做例,关键代码如下: ul{ font-size: 0; letter-spacing: -4px; word-spacing: -4px; //解决4px间隙的全兼容做法 } l ...