客户端JavaScript（window、document、element）

2022-11-05 21:41:40

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

码农公寓