JavaScript 操作浏览器和HTML文档/JavaScript 操作对象

gjl_

于 2023-10-19 17:50:25 发布

阅读量188

点赞数

文章标签： javascript html 开发语言

本文链接：https://blog.csdn.net/weixin_51559599/article/details/133931751

版权

JavaScript 操作浏览器和HTML文档

框架

浏览器对象模型（BOM）
- window
- navigator
- screen
- location
文档对象模型（DOM）
- document

操作对象间的关系

window对象是浏览器的顶层对象，它包含了浏览器窗口的各种属性和方法。window对象是全局作用域的，可以通过window对象访问其他对象。
navigator对象是window对象的属性之一，它包含了浏览器的相关信息，如浏览器的名称、版本、用户代理等。
screen对象是window对象的属性之一，它包含了用户的屏幕信息，如屏幕的宽度、高度、像素密度等。
location对象是window对象的属性之一，它包含了当前文档的URL信息，可以用来获取或修改当前页面的URL。
document对象是window对象的属性之一，它表示当前文档，可以用来操作文档的内容、结构和样式。document对象是HTML DOM的一部分，提供了许多方法和属性来操作HTML元素。

总结起来，window对象是浏览器的顶层对象，包含了其他对象：navigator、screen、location、document。这些对象分别提供了浏览器、屏幕、URL和文档的相关信息和操作方法。

window(BOM)

window.loaction 用于获取当前页面的 url 地址，并把浏览器重新定向到新的页面
```
<script>
    window.location="http://www.baidu.com";
</script>
```

获取浏览器内部的长宽

<script>
    var width = window.innerWidth;
    var heigh = window.innerHeight;
    console.log(width);
    console.log(heigh);
</script>

获取窗口外部的长宽

<script>
    var width = window.outerHeight;
    var heigh = window.outerWidth;
    console.log(width);
    console.log(heigh);
</script>

navigator(BOM)

获取浏览器的名称

navigator.appName
//直接控制台输入，返回 'Netscape'

获取浏览器版本

navigator.appVersion
// 返回 '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 Edg/116.0.1938.54'

获得浏览器语言
```
navigator.language
// 返回 'zh-CN'
```
获取浏览器操作系统类型
```
navigator.platform
// 返回 'Win32'
```

浏览器设置的USER-agent字符串

navigator.userAgent
//USER-agent字符串包含操作系统信息，浏览器内核，浏览器版本等信息
//返回 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 Edg/116.0.1938.54'

screen(BOM)

屏幕宽高

screen.width
// 返回 1549
screen.height
// 返回 872

颜色位数

screen.colorDepth
//颜色位数
//返回 24

location(BOM)

url 一般语法为
```
protocol://host[:port]/path/[?query]#fragment

http://www.baidu.com/index.html?name=andy&age=18#link
```
protocol : 通信协议常用的http, ftp, maito等
host : 主机 (域名)
port : 端口号可选.
path : 路径由零或多个 ‘/’ 符号隔开的字符串, 一般用来表示主机上的一个目录或文件地址
query : 参数, 以键值对的形式, 通过&符号分隔开来
fragment : 片段. #后面的内容

location

location
// Location {ancestorOrigins: DOMStringList, href: 'http://www.baidu.com/index.html?name=andy&age=18#link', origin: 'http://www.baidu.com', protocol: 'http:', host: 'www.baidu.com', …}

location.href : 获取或者设置整个URl

location.href
// 'http://www.baidu.com/index.html?name=andy&age=18#link'

location.host : 返回主机 (域名)
```
location.host
// 'www.baidu.com'
```
location.port : 返回端口号
```
location.port
```
location.pathname : 返回路径
```
location.pathname
// '/index.html'
```
location.search : 返回参数
```
location.search
// '?name=andy&age=18'
```
location.hash : 返回片段(锚点)
```
location.hash
// '#link'
```

location.protocol

location.protocol
//返回当前为 http: 或 https;
// 'https:'

要加载一个新页面，进行页面跳转，可以调用location.assign()
```
location.assign("http://www.baidu.com")
```
如果要重新加载当前页面，调用location.reload()

document(DOM)

DOM(Document Object Model),文档对象模型，定义了访问和操作HTML文档的标准方法。

更改页面标题

document.title="标题"
//更改页面的标题

获取cookie

cookie 是由服务器发送的key-value标示符。因为 Http 协议是无状态的，但是服务器要区分到底是哪个用户发过来的请求，就可以用Cookie来区分。当一个用户成功登录后，服务器发送一个cookie 给浏览器，例如user=ABC123xXYz(加密的字符串)
此后，浏览器访问该网站时，会在请求头附上这个cookie，服务器根据cookie即可区分出用户。

在控制台中直接输入 document.cookie

JavaScript 中 DOM节点

概述

DOM 文档对象模型

定义了访问和操作 html 的标准
文档节点操作
- 更新
- 遍历
- 添加
- 删除

选择 DOM 节点的方法


选择DOM 节点的方法	说明
document.getElementById()	通过节点（标签）的ID 属性值，选择节点。
document.getElementsByClassName()	通过节点（标签）的Class 属性值，选择节点。
document.getElementsByName()	通过节点（标签）的Name 属性值，选择节点。
document.getElementsByTagName()	通过节点（标签）名字，选择节点。
document.getElementsByTagNameNS()

根据 id 属性

精准选择单个
document.getElementByID("ID名")
更改文本

document.getElementByID("ID名").innerText="改后的文本";

根据 class 属性

选择 name 值符合的所有标签

document.getElementsByClassName("class名")[索引值]

获取的对象数量

document.getElementsByClassName("对象名").length;

获取所有对象，要进行单独设置需要加参数

更改全部同类型的需要使用循环

<html>
<body>
	<p class="news">news1</p>
	<p class="news">news2</p>
	<p class="news">news3</p>
	<p class="news">news4</p>
	<p class="news">news5</p>
</body>
<script>
	var z=document.getElementsByClassName("news");
	console.log(z.length);
    // 获取参数的个数
	for(var i=0;i<z.length;i++){
		j=i+1;
		z[i].innerHTML="gjl"+ (i+1);
	}
</script>
</html>