13前端核心技术-JavaScript DOM和BOM对象

想踢球考研的java

于 2022-03-13 21:50:33 发布

阅读量124

点赞数

分类专栏： Web前端开发文章标签： javascript 前端开发语言 java-ee webstorm

本文链接：https://blog.csdn.net/weixin_43624810/article/details/123466758

版权

Web前端开发专栏收录该内容

16 篇文章 0 订阅

订阅专栏

JavaScript BOM对象

BOM(Browser Object Model) 是指浏览器对象模型

document	对 Document 对象的只读引用。
history	对 History 对象的只读引用。
navigator	对 Navigator 对象的只读引用。
screen	对 Screen 对象的只读引用。
location	用于窗口或框架的 Location 对象。
name	设置或返回窗口的名称。
innerHeight	返回窗口的文档显示区的高度。
innerWidth	返回窗口的文档显示区的宽度。
outerHeight	返回窗口的外部高度，包含工具条与滚动条。
outerWidth	返回窗口的外部宽度，包含工具条与滚动条。

Window 对象

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");
// 与此相同：
document.getElementById("header");

setInterval()

window.setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。

var label = setInterval(function, milliseconds, param1, param2, ...)

clearInterval()

window.clearInterval() 取消由 setInterval() 设置的 timeout。

clearInterval(label)

setTimeout()

window.setTimeout() 在指定的毫秒数后调用函数或计算表达式。

var label = setTimeout(function, milliseconds, param1, param2, ...)

clearTimeout()

window.clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

clearTimeout(label)

浏览器窗口的尺寸

有三种方法能够确定浏览器窗口的尺寸。

1.对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度(不包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(不包括滚动条)

2.对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

3.常规

document.body.clientHeight
document.body.clientWidth

获取浏览器宽高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		var w = window.innerWidth ||
			document.documentElement.clientWidth ||
			document.body.clientWidth;
			
		var h = window.innerHeight ||
			document.documentElement.clientHeight ||
			document.body.clientHeight;
			
		document.write("浏览器window宽度: " + w + ", 高度: " + h + "。");
	</script>
</html>

显示器尺寸

window.scren对象用户获取显示器的各种参数：

scren.width - 返回屏幕的总宽度，（包括Windows底部任务栏）
screen.height - 返回屏幕的总高度，（包括Windows底部任务栏）
screen.availWidth - 返回屏幕的高度（不包括Windows底部任务栏）
screen.availHeight - 返回屏幕的宽度（不包括Windows底部任务栏）
screen.colorDepth - 色彩深度
screen.pixelDepth - 色彩分辨率

获取屏幕参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		document.write("总宽度/高度: "+screen.width + "*" + screen.height);
		document.write("<br>");
		document.write("可用宽度/高度: "+screen.availWidth + "*" + screen.availHeight);
		document.write("<br>");
		document.write("色彩深度: "+screen.colorDepth);
		document.write("<br>");
		document.write("色彩分辨率: "+screen.pixelDepth);
	</script>
</html>

Location对象

window.location 对象可以获取url的各部分参数、跳转、重定向等

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.href返回完整的 URL（http://127.0.0.1:8020 /demo02/index.html）
location.hash 返回一个URL的锚部分
location.assign(url) 跳转到新文档【location.assign("http://www.baidu.com")】，可返回
location.replace(url) 用新文档取代当前文【location.replace("http://www.baidu.com")】
location.reload() 刷新（重新加载）当前文档【location.reload()】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="location.assign('http://www.baidu.com')">
			assign：跳转到新文档（百度），可以返回前地址
		</button>
		<br/>
		<button onclick="location.replace('http://www.baidu.com')">
			replace：用新文档（百度）替换，不可以返回前地址
		</button>
		<br/>
		<button onclick="location.reload()">
			reload：重新加载当前文档（刷新）
		</button>
		<br/>
	</body>
	<script>
		location.href = 'http://127.0.0.1/JS/014-JS/demo03/index.html?id=1$class=c#test'
		document.write("完整地址: "+location.href);
		document.write("<br>");
		document.write("协议: "+location.protocol);
		document.write("<br>");
		document.write("主机和端口: "+ location.host);
		document.write("<br>");
		document.write("主机地址: "+ location.hostname);
		document.write("<br>");
		document.write("端口: "+location.port);
		document.write("<br>");
		document.write("当前文件路径: "+location.pathname);
		document.write("<br>");
		document.write("搜索（参数）: "+location.search);
		document.write("<br>");
		document.write("锚点: "+location.hash);
		document.write("<br>");
	</script>
</html>

历史记录对象

window.history对象可以操作历史记录，前进后退等

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同
history.go(number|URL) - 加载某个具体页面（正数：向前；负数：向后）

浏览器对象

Window.navigator对象用户获取当前浏览器的各种参数

navigator.appCodeName - 返回浏览器的代码名
navigator.appName - 返回浏览器的名称
navigator.appVersion - 返回浏览器的平台和版本信息
navigator.cookieEnabled - 返回指明浏览器中是否启用 cookie 的布尔值
navigator.platform - 返回运行浏览器的操作系统平台
navigator.userAgent - 返回由客户机发送服务器的user-agent 头部的值
navigator.javaEnabled() - 指定是否在浏览器中启用Java
navigator.taintEnabled() - 规定浏览器是否启用数据污点(data tainting)

JavaScript DOM对象

文档对象模型 (DOM)，将 web 页面与到脚本或编程语言连接起来

Document 对象

属性 / 方法	描述
document.addEventListener()	向文档添加事件句柄
document.removeEventListener()	移除文档中的事件句柄(由 addEventListener() 方法添加)

document.body	返回文档的body元素
document.cookie	设置或返回与当前文档有关的所有 cookie。
document.createAttribute()	创建一个属性节点
document.createComment()	createComment() 方法可创建注释节点。
document.createElement()	创建元素节点。
document.createTextNode(xxxx)	创建文本节点。

document.getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.getElementById()	返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()	返回带有指定名称的对象集合。
document.getElementsByTagName()	返回带有指定标签名的对象集合。
document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表

document.write()	向文档写 HTML 表达式或 JavaScript 代码。
document.writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

Element对象

属性 / 方法	描述
element.addEventListener()	向指定元素添加事件句柄
element.removeEventListener()	移除由 addEventListener() 方法添加的事件句柄

element.appendChild(node)	为元素添加一个新的子元素
element.removeChild(node)	删除一个子元素
element.insertBefore(node,newnode)	现有的子元素之前插入一个新的子元素

element.classList	返回元素的类数组，可用add(class1, class2, ...)、contains(class)、item(index)、remove(class1, class2, ...)、toggle(class)
element.className	设置或返回元素的class属性值
element.id	设置或者返回元素的 id。

element.attributes	返回一个元素的属性数组
element.innerHTML	设置或者返回元素的内容。
element.getAttribute(name)	返回指定元素的属性值
element.getAttributeNode(name)	返回指定属性节点对象，name：属性名；value：属性值
element.hasAttribute(name)	判断元素中是否存在指定的属性返回 true，否则返回false。
element.hasAttributes()	判断元素是否有任何属性返回true，否则返回false。
element.hasChildNodes()	判断元素是否具有任何子元素
element.removeAttribute()	从元素中删除指定的属性
element.removeAttributeNode()	删除指定属性节点并返回移除后的节点。
element.setAttribute()	设置或者改变指定属性并指定值。
element.setAttributeNode()	设置或者改变指定属性节点。

element.clientHeight	在页面上返回内容的可视高度（不包括边框，边距或滚动条）
element.clientWidth	在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
element.offsetHeight	返回，任何一个元素的高度包括边框和填充，但不是边距
element.offsetWidth	返回元素的宽度，包括边框和填充，但不是边距
element.scrollHeight	返回整个元素的高度（包括带滚动条的隐蔽的地方）
element.offsetTop	返回元素距离顶部的高度
element.offsetLeft	返回元素距离左边的宽度
element.scrollLeft	返回当前视图中的实际元素的左边缘和左边缘之间的距离
element.scrollTop	返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离
element.scrollWidth	返回元素的整个宽度（包括带滚动条的隐蔽的地方）

element.cloneNode(boolean)	克隆某个元素，true：克隆子元素；false：不包括子元素
element.childNodes	返回元素的一个子节点的数组，包括空文字节点
element.children	返回元素的一个子节点的数组，不包括空文字节点
element.firstChild	返回元素的第一个子节点
element.lastChild	返回的最后一个子元素
element.nextSibling	返回该元素紧跟的一个节点
element.parentNode	返回元素的父节点element.parentElement
element.previousSibling	返回某个元素紧接之前元素
element.querySelector()	返回匹配指定 CSS 选择器元素的第一个子元素

Event对象

属性	此事件发生在何时...
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onresize	窗口或框架被重新调整大小。
onunload	用户退出页面。
onscroll	页面滚动

鼠标 / 键盘属性

属性	描述
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。

标准 Event 方法

方法	描述
preventDefault()	不执行与事件关联的默认事件。
stopPropagation()	不再向上（子元素）传递事件

想踢球考研的java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
13前端核心技术-JavaScript DOM和BOM对象

目录JavaScript BOM对象Window 对象显示器尺寸Location对象历史记录对象浏览器对象JavaScript DOM对象Document 对象Element对象Event对象JavaScript BOM对象BOM(Browser Object Model) 是指浏览器对象模型document 对 Document 对象的只读引用。 history 对 History 对象的只读引用。 navigator 对
复制链接

扫一扫

专栏目录