（二） DOM编程和Window对象

最新推荐文章于 2025-04-28 16:50:59 发布

原创最新推荐文章于 2025-04-28 16:50:59 发布 · 439 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#编程 #dom #对象

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了DOM模型及其在HTML文档中的应用，包括Document对象的属性和方法，如getElementById等。同时，还详细讲解了Window对象及其常用属性与方法，如alert、confirm等，并提供了全选效果的具体实现。

（二） DOM编程和Window对象

HTML文档结构

DOM模型

DOM----Document Object Model,它是W3C国际组织的一套Web标准，它定义了访问HTML文档对象的一套属性、方法、事件。

BOM模型

window窗口对象

document文档对象

location地址对象

history

BOM模型的范围更广

document对象

Document对象时浏览器中的文档页面对象，用来浏览器中的HTML文档。

属性：bgColor

方法：getElementById

getElementsByName 根据name属性获取页面中的一组对象

getElementsByTagName 根据标签名称来获取（慎用）

实现全选效果

<a href="javascript:selectAll(true)">全选</a>&nbsp;|&nbsp;<a href="javascript:selectAll(false)">全不选</a><hr />
<input type="checkbox" name="course" value="java" />Java
<input type="checkbox" name="course" value="html" />HTML
<input type="checkbox" name="course" value="oracle" />Oracle
<input type="checkbox" name="course" value="javascript" />JavaScript<br />

<script>
//根据name获取所有的复选框
var chks = document.getElementsByName("course");
function selectAll(state){
	for(var i = 0; i < chks.length; i++){
		//改变每个复选框的选中状态
		chks[i].checked	= state;
	}
}
</script>

<input type="button" value="press" id="btnPress" />

//使用弹出框弹出选中的信息
<script>
//获取按钮
var btn = document.getElementById("btnPress");
btn.onclick = function(){
	var str = "";
	//遍历复选框
	for(var i = 0; i <  chks.length; i++){
		//判断复选框是否选中
		if(chks[i].checked){
			str+=chks[i].value+"\n"
		}	
	}
	alert(str);
}
</script>

window对象

常用属性

status 浏览器中的状态栏信息

screen 客户端屏幕相关信息

history 浏览器的URL信息

location 当前URL信息

document 浏览器中的HTML文档

常用的方法

alert 弹出对话框

confirm 弹出确认框

open 打开新窗口

close 关闭当前窗口

showModalDIalog大开模式对话框

setTimeout 延迟执行方法

setInterVal 间隔执行方法

status 该属性的值为string类型

window.status = "hello niit!";

screen 获取屏幕信息

window.screen.width+"*"+window.screen.height

confirm的返回值为boolean类型