JavaScript 入门指南(三)BOM 对象和 DOM 对象

news2025/1/14 1:22:55

BOM 对象

BOM 简介

  • BOM(browser Object Model)即浏览器对象模型
  • BOM 由一系列对象组成,是访问、控制、修改浏览器的属性的方法
  • BOM 没有统一的标准(每种客户端都可以自定标准)。
  • BOM 的顶层是 window 对象

window 对象

window 对象表示浏览器中打开的窗口。

使用 window 对象中的属性和方法,可以省略对象名,直接写方法名和对象名

  • 属性

    • location :当前 URL 的信息
    • history :客户访问过的 URL 的信息
    • screen :客户端的屏幕信息
    • navigator :浏览器基本信息
    • document :文档对象
  • 函数

    弹框

    // 提示框(显示带有一段消息和一个确认按钮的警告框)
    alert(提示信息);
    // 确认框(显示带有一段消息以及确认按钮和取消按钮的对话框)。点击确定,返回true;点击取消,返回false
    confirm(提示信息);
    // 输入框(显示可提示用户输入的对话框)。点击确定,返回输入的内容;点击取消,返回null
    prompt(提示信息);
    

    浏览器窗口

    // 打开一个新的浏览器窗口或查找一个已命名的窗口
    open(网址)
    // 关闭浏览器窗口
    close()
    

    定时器

    // 执行一次的定时器
    setTimeout(函数, 毫秒值); 
    // 反复执行的定时器
    setInterval(函数, 毫秒值); 
    // 参数:
    //    函数:定义一个有名函数,传递函数名字,或者使用匿名函数
    //    毫秒值:设置定时器的时间,在指定的时间结束之后,会执行传递的函数
    //    返回值:返回的是定时器的 id 值,可以用于取消定时器使用
    
    // 取消执行一次的定时器
    clearTimeout(定时器的id值);
    // 取消反复执行的定时器
    clearInterval(定时器的id值);
    

    示例:

    var timeId = setTimeout(function () {
        alert("c4爆炸了!");
    }, 5000);
    //alert(timeId);	// 2
    
    function butOnclick() {
        // 取消执行一次的定时器
        cl
    }
    

location 对象

Location 对象包含有关当前 URL(浏览器的地址)的信息。

  • 属性:

    • href :获取当前浏览器的url地址

      href = “新的url地址” : 跳转页面,相当于在浏览器地址栏中输入了地址,并且敲击回车(打开页面)

    • hostname :主机名

    • port :端口名
    • host :主机名+端口名
  • 方法

    • reload() :重新加载当前文档。 刷新页面

web 存储

  • HTML5 为 JS 增加了两个可以存储数据的对象

    • localStorage :本地存储,永久存储数据,作用域:所有页面永久访问
    • sessionStorage :会话存储,临时存储数据,作用域:一次会话(连续跳转的几个页面)
  • 不管是 localStorage,还是 sessionStorage,可使用的 API 都相同

    常用函数(以 localStorage 为例):

    • setItem(key, value) :存储一个数据
    • getItem(key) :获取一个数据
    • removeItem(key) :删除一个数据
    • clear() :清除所有数据

history 对象

History 对象包含用户(在浏览器窗口中)访问过的 URL。

History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。

函数

  • back() :后退到前一个页面(加载 history 列表中的前一个 URL)
  • forward() :前进到后一个页面(加载 history 列表中的下一个 URL)
  • go(n) :直接前进到第 n 个页面
  • go(-n) :直接后退到第 n 个页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>history对象</title>
    <script>
        //创建鼠标点击事件的响应函数
        function goBack() {
            window.history.back();
        }
        function goForward() {
            window.history.forward();
        }
    </script>
</head>
<body>
    <input type="button" value="上一步" onclick="goBack()"/>
    <input type="button" value="下一步" onclick="goForward()"/>
    <a href="04_history对象.html">跳转到04_history对象.html</a>
</body>
</html>

screen 对象

Screen 对象包含有关客户端显示屏幕的信息。

screen 对象中的属性,可以通过 screen.属性名 直接使用

属性

  • height :返回显示屏幕的高度(像素)
  • width :返回显示器屏幕的宽度(像素)

navigator 对象

navigator 对象包含有关浏览器的信息。

navigator 对象中的属性,可以通过 navigator.属性名 直接使用

属性

  • appName :返回浏览器的名称
  • appVersion :返回浏览器的平台和版本信息
  • userAgent :浏览器类型

超链接与表单的跳转控制

  • 超链接和表单都可以进行跳转。跳转属于它们的默认功能。

  • 一般在它们触发的一个事件中,可以通过返回 false,来阻止他们的跳转!

    <br />function fun5(){
        alert('超链接被点击了!');
        return false;
    }
    
    function f() {
        alert("阻止表单提交");
        return false;
    }
    
    <a href="https://www.baidu.com" onclick="return fun5()">超链接</a>
    //阻止提交
    <a href="javascript:void(0)">我是超链接</a>
    
    <form action="http://www.baidu.com" onsubmit="return f()">
        <input type="submit">
    </form>
    

DOM 对象

DOM 是 document object model,也就是文档对象模型。

可以将 HTML 页面看做一个文档,在 js 眼中就是一个 document 对象。

这个 document 对象中就包含了页面中的所有元素。

DOM 中的节点分类:

  • 元素节点(element node)
  • 属性节点(attribute node)
  • 文本节点(text node)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传


dom 获取元素

  • 方式1:es6 提供了强大的根据 CSS 选择器获取元素的接口(推荐)

    // 根据css选择器获取一个元素
    document.querySelector(CSS选择器)
    // 根据css选择器获取元素对象数组集合
    document.querySelectorAll(CSS选择器)
    
  • 方式2:es5 提供的获取元素的接口

    // 根据 id 获取一个元素:
    document.getElementById(ID)  	// 等价于es6的 querySelector(#ID)
    // 根据 class 获取多个元素:
    document.getElementsByClassName(class)	   // 等价于es6的 querySelectorAll(.class)
    // 根据标签名称获取多个元素:
    document.getElementsByTagName(标签名称)		// 等价于es6的 querySelectorAll(标签)
    // 根据 name 属性获取多个元素:
    document.getElementsByName('name值') 	  // 等价于es6的 querySelectorAll(元素名称[name=name值])
    
  • 小总结:

    • es6 接口获取元素功能非常强大,而且接口非常易用
    • es5 接口功能非常局限,而且接口使用复杂

间接根据层次关系获取节点:

  • 父节点:parentNode:表示该元素的父节点
  • 孩子节点:
    • childNodes:表示该元素的所有子节点的集合,数组对象
    • firstElementChild:第一个儿子节点
    • lastElementChild:最后一个儿子节点
  • 兄弟节点:
    • nextElementSibling:该元素后一个兄弟元素节点
    • previousElementSibling:该元素前一个兄弟元素节点

dom 操作内容

  • 常用函数

    // 向body中追加html内容
    document.write(html内容) 
    // 获取或者修改元素的纯文本内容(从元素内部起始位置到终止位置的文本内容, 不包含内部的Html标签)
    element对象.innerText; 
    // 获取或者修改元素的html内容(从元素内部的起始位置到终止位置的全部内容, 包括其内部的Html标签)
    element对象.innerHTML; 
    // 获取或者修改包含自身的html内容
    element对象.outerHTML; 
    
  • 示例

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>dom操作内容</title>
    </head>
    <body>
    <div id="d1">我是d1<br/></div>
    <div id="d2">我是d2</div>
    <div id="d3">我是d3</div>
    <script>
        // 向body中追加html内容
        document.write("<h1>我是h1标题标签</h1>");
    
        // 获取元素的纯文本,html内容对比
        var d1Ele = document.querySelector("#d1");	// 获取id是d1的元素 <div id="d1">我是d1<br/></div>
        console.log(d1Ele.innerText);	//我是d1  ==>标签中的文本
        console.log(d1Ele.innerHTML);	//我是d1<br>  ==>标签体
        console.log(d1Ele.outerHTML);	//<div id="d1">我是d1<br></div>  ==>整个标签
    
        // 修改元素的纯文本,html内容对比
        var d2Ele = document.querySelector("#d2");		 //获取id是d2的元素 <div id="d2">我是d2</div>
        //d2Ele.innerText = "<h2>我是h2标签体标签</h2>";	//显示纯文本
        d2Ele.innerHTML = "<h2>我是h2标签体标签</h2>";		//显示标签
    
        // 获取或修改包含元素自身的html内容(了解)
        var d3Ele = document.querySelector("#d3");		//获取id是d3的元素 <div id="d3">我是d3</div>
        console.log(d3Ele.outerHTML);					//<div id="d3">我是d3</div>
        d3Ele.outerHTML = "<h3>我是h3标签体标签</h3>";		//把d3的div整个替换为了h3标签
    </script>
    </body>
    </html>
    

dom 操作属性

  • 方法1:

    // 获取元素的一个属性的值。注意:只能获取标签上属性的值,获取不用用户输入的内容
    element对象.getAttribute(属性名)
    // 给元素设置一个属性,可以设置原生和自定义
    element对象.setAttribute(属性名, 属性值)
    // 移除元素的一个属性
    element对象.removeAttribute(属性名) 
    
  • 方法2:

    // 获取或修改一个属性的值
    element对象.属性名
    
  • 注:

    • 方法1 可以对自定义属性进行操作;但是 方法2 只能对标准属性进行操作。
    • 文本输入框标签:通过对象名.value 属性,可以获取到页面中用户输入的内容。
    • 复选框|单选框标签:
      • 通过 对象名.checked 属性可以获取到选中状态。选中:true;未选中:false
      • 通过 对象名.getAttribute() 函数获取属性值:有 checked 属性,值就是 checked;没有 checked 属性,值就是 null

dom 操作元素

  • 常用方法

    // 获取或者设置标签的html内容
    element对象.innerHTML
    // 移除元素
    element对象.outerHTML=""
    
    // 创造一个节点,返回一个element对象
    document.createElement("标签名称)
    // 给父标签添加一个子标签
    parentElement对象.appendChild(newNode) 
    // 在指定节点前插入新节点
    parentElement对象.insertBefore(newNode,beforeNode)
    // 替换节点的方法 
    parentElement对象.replaceChild(newNode, oldNode)
    // 删除节点的方法
    parentElement对象.removeChild(childNode)
    
  • 示例:

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>dom操作元素</title>
    </head>
    <body>
    <div id="container">
        <input id="smoke" type="checkbox" name="hobby" value="抽烟">
        <label for="smoke">抽烟&emsp;</label>
    <!--    <input id="drink" type="checkbox" name="hobby" value="喝酒">-->
    <!--    <label for="drink">喝酒&emsp;</label>-->
    <!--    <input id="perm" type="checkbox" name="hobby" value="烫头">-->
    <!--    <label for="perm">烫头&emsp;</label>-->
    </div>
    <script >
        //获取div标签对象
        var divEle = document.querySelector("#container");
    
        // 添加喝酒 innerHTML
        console.log(divEle.innerHTML);
        divEle.innerHTML += "<input id='drink' type='checkbox' name='hobby' value='喝酒'>"
            + "<label for='drink'>喝酒&emsp;</label>";
        
        // 添加烫头
        // 创建input标签,使用document对象中方法createElement("标签名称")
        var inputEle = document.createElement("input");
        console.log(inputEle);			//<input>
        // <input id="perm" type="checkbox" name="hobby" value="烫头">
        inputEle.setAttribute("id","perm");
        console.log(inputEle);			//<input id="perm">
        inputEle.setAttribute("type","checkbox");
        inputEle.setAttribute("name","hobby");
        inputEle.setAttribute("value","烫头");
        console.log(inputEle);			//<input type="checkbox" id="perm" name="hobby" value="烫头">
    
        // <label for="perm">烫头&emsp;</label>
        // 创建标签
        var lableEle = document.createElement("lable");
        // 添加属性
        lableEle.setAttribute("for","perm");
        console.log(lableEle);			//<lable for="perm">
        // 添加标签体
        lableEle.innerHTML="烫头&emsp;";
        console.log(lableEle);			//<label for="perm">烫头&emsp;</label>
    
        // 使用父标签div中的方法appendChild(子标签);添加子标签
        divEle.appendChild(inputEle);
        divEle.appendChild(lableEle);
    
        // 移除元素(了解) outerHTML
        //lableEle.outerHTML = "";			//删除label标签
    </script>
    </body>
    </html>
    

dom 操作样式

  • 通过 style 对象

    // 获取或者修改一个样式
    element对象.style.css样式
    // 设置多个css样式
    element对象.style.cssText = "样式键值对;样式键值对..."
    

    注意:

    • style 对象,只能获取行内样式(写在一行中),不能获取内嵌的样式(写在 head 的 style 中)和外链的样式(写在css文件中)

    • style 是对象。typeof 的结果是 Object

    • 值是字符串,没有设置值是空字符串""

    • 命名规则:驼峰命名

    • DOM 中的 style 对象并不等同 html 标签中 style 属性,在 JS 中,横杠 - 是不能作为标识符的

      比如:背景色样式在 DOM 中是 backgroundColor,而在 CSS 中是 background-color

    style 对象的常用属性:backgroundColor(背景色)、backgroundImage(背景图片)、color(颜色)、width(宽像素)、height(高像素)、border(边框)、opacity(设置透明度,IE8 以前是 filter: alpha(opacity=xx))

  • 通过 className 属性

    节点的 className 属性对应于 css 中的类选择器

    // 获取或者修改class属性值(样式)
    element对象.className 
    // 获取class属性值集合,返回一个classList对象(es6特别提供的操作元素class的接口)
    element对象.classList
    

    element.classList 的常用方法:

    add("class样式名称")  		// 添加一个class样式
    remove("class样式名称") 	// 移除一个class样式
    contains("class样式名称") 	// 判断是否包含某一个样式,包含返回true,不包含返回false
    toggle("class样式名称") 	// 切换一个class样式。有则删除,无则添加
    
  • 添加事件:通过对象名.事件属性名 给元素添加事件

  • 示例:

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>dom操作样式</title>
    </head>
    <body>
    <style>
        #p1{background-color: red}
        .mp{color:green}
        .mpp{background-color: lightgray;}
    </style>
    <p id="p1">1. 设置一个css样式</p>
    <p id="p2">2. 批量设置css样式</p>
    <p id="p3" class="mpp">3. 通过class设置样式</p>
    <p id="p4">4. 切换class样式</p>
    <input type="button" value="切换样式" id="b1" />
    
    <script >
        let p1 = document.querySelector("#p1");		//获取段落标签
        let p2 = document.querySelector("#p2");		//获取段落标签
        let p3 = document.querySelector("#p3");		//获取段落标签
        let p4 = document.querySelector("#p4");		//获取段落标签
    
        // 内嵌式的样式,通过style对象获取不了
        console.log("p1 backgroundColor: " + p1.style.backgroundColor);	//""
        // 给p1设置css样式
        // 白色字体
        p1.style.color = "white";
        // 黑色背景
        p1.style.backgroundColor = "black";
        // 获取p1的样式名
        console.log(p1.style.backgroundColor);	//black
        console.log(p1.style.color);			//white
        // 隐藏不显示
        //p1.style.display = "none";
        // 显示
        //p1.style.display = "block";
    
        // 给p2批量设置css样式
        p2.style.cssText = "color: red;font-family: '楷体';border: 1px solid green";
    
        // 给p3通过class设置样式
        // a.给元素添加class属性的方式添加样式
        //p3.setAttribute("class","mp mpp");
        // b.使用className属性添加(两种方式)
        //p3.className= "mp mpp";
        p3.className = p3.className + " mp";	// mpp + " mp"==>mpp mp
        console.log("p3 className: " + p3.className);//mp mpp
    
        // 切换class样式
        // 获取p4的class样式集合
        var p4List = p4.classList;
        // 添加一个class样式
        p4List.add("mpp");
        // 判断某一个样式是否存在
        console.log(p4List.contains("mpp"));	//true
        console.log(p4List.contains("mp"));		//false
        // 添加一个class样式
        p4List.add("mp");
        console.log(p4List);
        // 移除一个class样式
        p4List.remove("mp");
    
        // 获取id是b1的按钮
        var b1Ele = document.querySelector("#b1");
        // 通过对象名.事件属性名,给元素添加事件
        b1Ele.onclick = function () {
            //切换,无则添加,有则删除
            p4List.toggle("mp");
        }
    </script>
    </body>
    </html>
    

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

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

相关文章

微机原理-基于8086电压报警器仿真系统设计

**单片机设计介绍&#xff0c;微机原理-基于8086电压报警器仿真系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于8086电压报警器仿真系统设计是一个综合了硬件和软件设计的复杂过程。以下是该设计概要的主要内容&…

TypeScript-自动编译

1.生成文件 tsc --init 2.修改配置文件 说明&#xff1a;通过CTRLF搜索到以下单词&#xff0c;进行修改。 "strict": true, //是否开启严格模式 "outDir": "./outFile", //表示ts文件最终编译为js文件&#xff0c;js文件存放的位置 3.新…

QML通过鼠标拖动的位置

当通过鼠标拖动Rectangle 的位置时&#xff0c;可以使用Qt Quick的MouseArea组件来实现 Rectangle {id: rectx:0;y:0width: 200; height: 100color: "lightblue"MouseArea {id: mouseAreaanchors.fill: parentdrag.target: rect//要拖动的项目的IDdrag.axis: Drag.XA…

C# 实践【WebService编写调用】

Webservice 学习 创建发布调用 创建 新增专案 点击确定&#xff0c;选择空白 右击新建好的专案下图中操作 新增项目选择 WEB 服务&#xff08;ASMX&#xff09; 新增项目完成&#xff0c;添加Web方法 启动之后的效果如下 调用方法测试接口 测试结果如下&#xff…

Docker镜像其他相关操作

镜像其他相关操作 1. 镜像备份 使用 docker save 将指定镜像保存成 tar 归档文件。 docker save [OPTIONS] IMAGE [IMAGE...] docker save -o /root/mycentos7.tar mycentos:7-o&#xff1a;镜像打包后的归档文件输出的目录。 2. 镜像恢复 使用 docker load 导入 docker s…

【活动回顾】| ABeam德硕受邀参加SAC+AI 智能分析与预算管理体验营并发表演讲

近日&#xff0c;主题为“商业AI&#xff0c;智慧未来”的SACAI 智能分析与预算管理体验营顺利召开&#xff0c;本次活动由SAP主办&#xff0c;ABeam中国受邀出席并发表专题演讲【云端计划&#xff0c;预见未来——SAP分析云全面预算案例分享】。 现场照 随着AI再次成为科技界和…

基于YOLOV5+Pyqt5农作物叶片病害检测系统

1、引言 农作物病害的精准检测与识别是推动农业生产智能化与现代化发展的重要举措。随着计算机视觉技术的发展&#xff0c;深度学习方法已得到快速应用&#xff0c;利用卷积神经网络进行农作物病害检测与识别成为近年来研究的热点。基于传统农作物病害识别方法&#xff0c;分析…

高阶DS---AVL树详解(每步配图)

目录 前言&#xff1a; AVL树的概念: AVL树节点的定义&#xff1a; AVL树的插入&#xff08;重点&#xff09; AVL树的旋转&#xff1a; &#xff08;1&#xff09;新节点插入较高左子树的左侧---右单旋 &#xff08;2&#xff09;新节点插入较高右子树的右侧---左单旋 …

经纬恒润AUTOSAR产品成功适配芯来RISC-V车规内核

近日&#xff0c;经纬恒润AUTOSAR基础软件产品INTEWORK-EAS&#xff08;ECU AUTOSAR Software&#xff0c;以下简称EAS&#xff09;在芯来提供的HP060开发板上成功适配芯来科技的RISC-V处理器NA内核&#xff0c;双方携手打造了具备灵活、可靠、高性能、强安全性的解决方案。这极…

【嵌入式智能产品开发实战】(十二)—— 政安晨:通过ARM-Linux掌握基本技能【C语言程序的安装运行】

目录 程序的安装 程序安装的本质 在Linux下制作软件安装包 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: 嵌入式智能产品开发实战 希望政安晨的博客能够对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xf…

Python学习之-协程

前言&#xff1a; 在Python中&#xff0c;协程(coroutines)是利用生成器(generator)的特性&#xff0c;来实现并发编程的一种方式。从Python 3.5开始&#xff0c;通过引入async和await关键字&#xff0c;Python对异步IO提供了更原生的支持&#xff0c;使得协程成为了实现异步编…

脑机辅助推导算法

目录 一&#xff0c;背景 二&#xff0c;华容道中道 1&#xff0c;问题 2&#xff0c;告诉脑机如何编码一个正方形格子 3&#xff0c;让脑机汇总信息 4&#xff0c;观察图&#xff0c;得到启发式算法 5&#xff0c;根据启发式算法求出具体解 6&#xff0c;可视化 一&am…

【Blockchain】GameFi | NFT

Blockchain GameFiGameFi顶级项目TheSandbox&#xff1a;Decentraland&#xff1a;Axie Infinity&#xff1a; NFTNFT是如何工作的同质化和非同质化区块链协议NFT铸币 GameFi GameFi是游戏和金融的组合&#xff0c;它涉及区块链游戏&#xff0c;对玩家提供经济激励&#xff0c…

python通过shapely 的 valid 判断aoi图形是否有效

测试aoi坐标&#xff1a; 116.527712,39.924304;116.527123,39.924353;116.52707,39.923985;116.527685,39.92397;116.527712,39.924304 如图所示是一个有效的坐标&#xff0c;使用python代码判断是否有效&#xff1a; 代码&#xff1a; from shapely.geometry import Polyg…

我开发了一款只用一个注解就实现分布式锁的工具框架

相信大家在JAVA中知道锁的一个概念。在JAVA中&#xff0c;锁是一种机制&#xff0c;用于控制并发代码的执行。锁用于保护共享资源的访问&#xff0c;确保只有一个线程能够同时访问这些资源。锁可以防止多个线程同时执行对共享资源的修改操作&#xff0c;从而避免数据不一致或竞…

探讨在大数据体系中API的通信机制与工作原理

** 引言 关联阅读博客文章&#xff1a;深入解析大数据体系中的ETL工作原理及常见组件 关联阅读博客文章&#xff1a;深入理解HDFS工作原理&#xff1a;大数据存储和容错性机制解析 ** 在当今数字化时代&#xff0c;数据已经成为企业发展和决策的核心。随着数据规模的不断增长…

zabbix_yum安装

目录 一.配置zabbix的yum源 二.安装zabbix server 三.安装zabbix agent 四.安装zabbix web界面 五.安装数据库 六.配置数据库 七.为zabbix server配置数据库 八.启动服务,web界面安装 九.遇到php版本过低问题 前置条件:基于Rocky Linux8操作系统配置的&#xff0c;建议…

Oracle19c ADG搭建

文章目录 一、环境配置1、主机环境2、host文件配置 二、主库配置1、 开启归档2、redo日志3、修改参数文件4、配置TNS文件5、静态监听6、拷贝密码文件 三、备库配置1、开启归档2、redo日志3、修改参数文件4、配置TNS文件5、配置静态监听 四、构建DG1、验证监听2、主库登入rman&a…

【计算机考研】408全年保姆级规划+资料分享

408的复习顺序其实没有标准&#xff0c;推荐先复习数据结构 复习完数据结构之后&#xff0c;再去学操作系统和计算机网络的一些知识点就会很好理解。 数据结构➡计算机组成原理➡操作系统➡计算机网络。 大家可以按照上面这个顺序来学&#xff0c;其实按照这个顺序来学也是因…

泛零售行业大会员经营的发展趋势?

​随着消费者需求的快速变化和技术的不断进步&#xff0c;泛零售行业大会员经营将呈现如下发展趋势: 第一&#xff0c;会员精细化运营和个性服务将上升为泛零售企业未来的战略重点之一。 存量时代&#xff0c;市场竞争加剧&#xff0c;对绝大多数泛零售企业来说&#xff0c;得…