JavaScript中window和document用法详解

让我来详细讲解一下“JavaScript中window和document用法详解”的完整攻略。

一、window对象

1. 窗口的大小和位置

方法名	说明
window.innerWidth	返回窗口的文档显示区的宽度
window.innerHeight	返回窗口的文档显示区的高度
window.outerWidth	返回窗口的外部宽度
window.outerHeight	返回窗口的外部高度
window.screenLeft	返回窗口相对于屏幕左侧的距离
window.screenTop	返回窗口相对于屏幕顶部的距离

以window.innerWidht为例，我们可以通过在控制台输入以下代码来获取窗口宽度：

console.log(window.innerWidth);

2. 窗口操作

方法名	说明
window.close()	关闭当前窗口
window.open(url, name, features)	打开一个新的窗口
window.moveTo(x, y)	移动当前窗口到屏幕上的某个位置
window.resizeTo(width, height)	将当前窗口的大小调整到指定的宽度和高度

以下是一个打开新窗口的例子：

window.open('http://www.baidu.com', '_blank', 'width=500,height=500');

二、document对象

1. DOM元素获取

方法名	返回值	说明
document.getElementById(id)	Element	返回具有指定ID属性的元素
document.getElementsByTagName(name)	NodeList	返回具有指定标签名的元素集合
document.getElementsByClassName(name)	NodeList	返回具有指定类名的元素集合
document.querySelector(selector)	Element	返回指定CSS选择器匹配的第一个元素
document.querySelectorAll(selector)	NodeList	返回指定CSS选择器匹配的所有元素集合

以document.getElementById()为例，我们可以通过以下代码获取具有指定ID属性的元素：

var elem = document.getElementById('myDiv');

2. DOM元素操作

方法名	返回值	说明
element.innerHTML	String	获取或设置元素的HTML内容
element.className	String	获取或设置元素的class属性
element.style	CSSStyleDeclaration	获取或设置元素的样式
element.appendChild(node)	Node	将一个节点添加到元素的子节点列表的末尾
element.removeChild(node)	Node	从元素的子节点列表中删除一个节点
element.setAttribute(name, value)	null	设置元素的属性值
element.getAttribute(name)	string	获取元素的属性值

以下是一个修改元素属性的例子：

var elem = document.getElementById('myDiv');
elem.setAttribute('class', 'highlight');

以上就是“JavaScript中window和document用法详解”的完整攻略。