1.浏览器对象

最新推荐文章于 2023-04-20 16:58:07 发布

本宝宝不开心

最新推荐文章于 2023-04-20 16:58:07 发布

阅读量69

点赞数

分类专栏： js学习笔记

本文链接：https://blog.csdn.net/zh_cn1/article/details/119334872

版权

js学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JS对象

Javascript可获取浏览器提供的很多对象，并进行操作

window

window对象不但充当全局作用域，而且表示浏览器窗口。

window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。

console.log("浏览器的内部宽度:"+window.innerWidth+";  浏览器的内部高度:"+window.innerHeight);

在这里插入图片描述

navigator

navigator表示浏览器的信息

<script type="text/javascript">
	console.log("浏览器的名称"+navigator.appName);
	console.log("浏览器的版本"+navigator.appVersion);
	console.log("浏览器设置的语言"+navigator.language);
	console.log("操作系统类型"+navigator.platform);
	console.log("浏览器设定的User-Agent字符串"+navigator.userAgent);
</script>

在这里插入图片描述

screen

表示屏幕对象

<script type="text/javascript">
	console.log("屏幕宽度："+screen.width);
	console.log("屏幕高度："+screen.height);
</script>

在这里插入图片描述

location

location表示当前页面的url信息

<script type="text/javascript">
	console.log("当前url的协议： "+location.protocol);
	console.log("当前请求的主机名称： "+location.host);
	console.log("当前请求的端口: "+location.port);
	console.log("当前请求的路径名称: "+location.pathname);
	console.log("当前请求的查询参数: "+location.search);
	console.log("当前请求的锚点: "+location.hash);
</script>

在这里插入图片描述

document

document表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。
getElementById
按ID获取节点内容
getElementsByTagName
按标签获取节点内容

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>javascript学习</title>
</head>
<body>
<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
    <dt>摩卡</dt>
    <dd>热摩卡咖啡</dd>
    <dt>酸奶</dt>
    <dd>北京老酸奶</dd>
    <dt>果汁</dt>
    <dd>鲜榨苹果汁</dd>
    <dd>来自廖雪峰老师的教程</dd>
</dl>

<script type="text/javascript">
	document.title="标题被我替换了";
	window.alert("由于本页面没有cookie，所以cookie弹出为空"+document.cookie);
	var menu = document.getElementById("drink-menu");
	var drinks = document.getElementsByTagName("dt");
	console.log("获取id的HTML内容："+menu.innerHTML);
	console.log("获取id的文本内容："+menu.innerText);
	console.log("获取相同标签的第一个HTML内容: "+drinks[0].innerHTML);
	console.log("获取相同标签的第一个文本内容: "+drinks[0].innerText);
	console.log("获取相同标签的第二个HTML内容: "+drinks[1].innerHTML);
	console.log("获取相同标签的第二个文本内容: "+drinks[1].innerText);


</script>
</body>
</html>