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

news2024/11/20 9:15:58

JavaScript 操作浏览器和HTML文档

框架

  • 浏览器对象模型(BOM)
    • window
    • navigator
    • screen
    • location
  • 文档对象模型(DOM)
    • document

操作对象间的关系

  1. window对象是浏览器的顶层对象,它包含了浏览器窗口的各种属性和方法。window对象是全局作用域的,可以通过window对象访问其他对象。
  2. navigator对象是window对象的属性之一,它包含了浏览器的相关信息,如浏览器的名称、版本、用户代理等。
  3. screen对象是window对象的属性之一,它包含了用户的屏幕信息,如屏幕的宽度、高度、像素密度等。
  4. location对象是window对象的属性之一,它包含了当前文档的URL信息,可以用来获取或修改当前页面的URL。
  5. 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>
    

    image-20231019173940403

  • 获取窗口外部的长宽

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

    image-20231019173947556

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)

image-20231019174003574

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="改后的文本";

    image-20231019174530936

根据 class 属性
  • 选择 name 值符合的所有标签

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

    获取的对象数量

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

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

    image-20231019174906093

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

    <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>
    

根据 name 属性
  • document.getElementsByName("name")
根据 TagName 属性
  • document.getElementsByTagName("标签名")

更新节点

  • 直接赋值

  • 更改颜色

    document.getElementsByName("name").style.color"pink"

  • 更改文本

    document.getElementsByName("name").innerText='newStr'

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1112050.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据库表设计及优化初步——项目中的数据库表究竟怎么设计?如何提高查询效率?

前言 我们都知道数据库设计有以下三大范式&#xff0c;但实际应用中真的是按照这三大范式来设计吗&#xff1f; 本篇博客尝试阐述项目中数据库表的设计&#xff0c;以及查询优化的方法。 第一范式&#xff1a; 原子&#xff0c;列信息不可再分&#xff1b; 第二范式&#…

培训机构招生电子传单制作教程:突出核心竞争力的方法

随着科技的不断发展&#xff0c;现在的招生宣传也变得越来越电子化。其中&#xff0c;电子传单就是一种非常有效的宣传方式。下面就让我们来学习如何制作具有吸引力的培训机构招生电子传单。 首先&#xff0c;我们需要进入乔拓云后台&#xff0c;并登录。在登录后&#xff0c;我…

Python武器库开发-基础篇(四)

基础篇(四) Open 文件 Python open() 方法用于打开一个文件&#xff0c;并返回文件对象。 在对文件进行处理过程都需要使用到这个函数&#xff0c;如果该文件无法被打开&#xff0c;会抛出 OSError。 注意&#xff1a;使用 open() 方法一定要保证关闭文件对象&#xff0c;即…

Simple RPC - 02 通用高性能序列化和反序列化设计与实现

文章目录 概述设计实现通用的序列化接口通用的序列化实现【推荐】 vs 专用的序列化实现专用序列化接口定义序列化实现 概述 网络传输和序列化这两部分的功能相对来说是非常通用并且独立的&#xff0c;在设计的时候&#xff0c;只要能做到比较好的抽象&#xff0c;这两部的实现…

RHCE---shell 基本知识

文章目录 目录 文章目录 前言 一.shell 概述 如何编写shell脚本 脚本开头 脚本内容 执行脚本 bash shell 基本功能 echo打印命令 printf 命令 history历史命令 命令别名 总结 前言 在UNIX和类UNIX操作系统中&#xff0c;Shell是一个非常重要的组件&#xff0c;为用户提供…

Jmeter —— jmeter利用取样器中http发送请求

使用Jmeter发送HTTP请求 取样器是用来模拟用户操作&#xff0c;向服务器发送请求以及接收服务器的响应数 据的一类元件&#xff0c;其中HTTP请求取样器是用来模拟常用的http请求的 步骤如下&#xff1a; 步骤一&#xff1a;添加线程组 右击测试计划——添加——线程&#x…

大数据学习(13)-join优化详解

&&大数据学习&& &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 承认自己的无知&#xff0c;乃是开启智慧的大门 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一下博>主哦&#x…

工业自动化控制通信协议Profinet系列-1、了解Profinet协议及收集资料

工业自动化控制通信协议Profinet系列-1、了解Profinet协议及收集资料 文章目录 工业自动化控制通信协议Profinet系列-1、了解Profinet协议及收集资料一、前言二、Profinet了解及资料收集1. 资料2. PROFINET到底是什么&#xff1f;3. 网络模型4. 应用场景 三、接下来 一、前言 …

最详细的Keycloak教程(建议收藏):Keycloak实现手机号、验证码登陆——(二)Keycloak与SpringBoot的集成

上一篇已经介绍了keycloak的下载与使用: Keycloak的下载与使用 本文章和大家分享keycloak怎么去集成springboot项目&#xff0c;以及怎么去做接口权限的校验。 PS&#xff1a;根据红帽的公告&#xff0c;目前在springboot 3.x版本已经不支持keycloak适配器&#xff0c;所以本章…

44岁的「老板」想变年轻

作者 | 辰纹 来源 | 洞见新研社 从村办集体企业余杭县红星五金厂起家&#xff0c;到生产贴牌油烟机&#xff0c;再到注册“老板”商标&#xff0c;改制有限公司&#xff0c;老板电器已经走过了44个春秋。 在这44年中&#xff0c;老板电器是首家登陆资本市场的高端厨电企业&am…

Java总结的question

Java 数据类型 Q1:基本类型和包装类型的区别&#xff1f; 用途&#xff1a;在对象属性中一般用包装类型&#xff0c;包装类型可用于泛型&#xff0c;基本类型不可以存储方式&#xff1a;包装类型一般放在堆&#xff0c;基本数据类型的局部变量一般放在栈中的局部变量表&…

页表置换算法之最佳置换算法(OPT),先进先出置换算法(FIFO),最近最久未使用置换算法(LRU),时钟置换算法(CLOCK)

请求分页存储管理与基本分页存储管理的主要区别: 在程序执行过程中&#xff0c;当所访问的信息不在内存时&#xff0c;由操作系统负责将所需信息从外存调入内存&#xff0c;然后继续执行程序。若内存空间不够&#xff0c;由操作系统负责将内存中暂时用不到的信息换出到外存。页…

22-数据结构-内部排序-选择排序

简介&#xff1a;每一趟选择最小或最大的一个&#xff0c;排在前面或后面。主要右简单选择排序和堆排序 一、简单选择排序 1.1简介&#xff1a; 每趟选择最小的&#xff0c;放在前面&#xff0c;一次类推&#xff0c;代码思想&#xff1a;两个循环&#xff0c;外循环是趟数&a…

IDEA提高工作效率的实用技巧

IDEA是一款备受开发者喜爱的集成开发环境&#xff0c;它提供了许多实用的功能&#xff0c;可以帮助我们更快速、更高效地编写代码。本文将介绍一些IDEA的使用技巧提高工作效率的实用技巧。 验证正则表达式 要验证编写的正则表达式是否正确&#xff0c;只需将光标放在要检查的…

【单片机毕业设计】【hj-006-6】天然气、有害混合气体检测 | 空气质量检测 | 有害气体检测

一、基本介绍 项目名&#xff1a; 基于单片机的天然气、有害混合气体检测系统设计 基于单片机的空气质量检测系统设计 基于单片机的 有害气体检测系统设计 项目编号&#xff1a;mcuclub-hj-006-6 单片机类型&#xff1a;STC89C52 具体功能&#xff1a; 1、通过MQ-5检测天然气…

C语言——二周目——输入输出辨析

一、对输入输出的理解 1.明确输入的意义 以往的输入为默认形式&#xff08;标准输入流——stdin——键盘&#xff09;。但是输入的形式不止此一种。可以从键盘上敲出输入的数据&#xff0c;同时也可以将文件中、某个字符串甚至结构体的数据作为输入内容进行输入。 输入&#x…

Spring boot 集成 xxl-job

文章目录 xxl-job 简介引入xxl-job依赖配置xxl-job config添加properties文件配置BEAN模式&#xff08;方法形式&#xff09;步骤一&#xff1a;执行器项目中&#xff0c;开发Job方法&#xff1a;步骤二&#xff1a;调度中心&#xff0c;新建调度任务 xxl-job 简介 官网:https:…

【虹科干货】Redis Enterprise vs ElastiCache——如何选择缓存解决方案?

使用Redis 或 Amazon ElastiCache 来作为缓存加速已经是业界主流的解决方案&#xff0c;二者各有什么优势&#xff1f;又有哪些区别呢&#xff1f; 文况速览&#xff1a; - Redis 是什么&#xff1f; - Redis Enterprise 是什么&#xff1f; - Amazon ElastiCache 是什么&…

阿里云高庆瑞:高弹性、高可用、低成本的云上资源管理最佳实践

云布道师 为了更好地帮助用户在借助 DevOps 工具缩短开发周期、提升业务效率的同时&#xff0c;也能让业务保持稳定、安全、可靠&#xff0c;且低成本地持续运营&#xff0c;阿里云弹性计算团队独家出品的【弹性计算技术公开课_CloudOps 云上运维季】正式启动。阿里云弹性计算团…

提升服装门店管理效率与顾客体验的RFID智慧门店解决方案

随着科技的不断进步&#xff0c;传统的服装门店在管理过程中面临着一些瓶颈和挑战&#xff0c;条码管理费时费力&#xff0c;服装查找耗时长&#xff0c;库存盘点不准确&#xff0c;销售管理不科学&#xff0c;顾客体验性较差等问题已经成为制约门店发展的难题&#xff0c;为了…