客户端JavaScript(window、document、element)

时间:2022-11-22 03:02:37

一、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等