JavaScript------BOM

最新推荐文章于 2024-09-16 20:08:29 发布

阳阳大菜

最新推荐文章于 2024-09-16 20:08:29 发布

阅读量119

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_52953038/article/details/126454305

版权

BOM

BOM 浏览器对象模型

BOM : Browser Object Model 浏览器对象模型
window : 一个网页就是一个窗口，一个 window 对象代表一个网页
screen : 和浏览器屏幕相关的一个对象（了解）
navigator : 和浏览器导航相关的对象 (了解)
history : 获取浏览器历史记录的对象
location : 和浏览器网址相关的对象
document : 和浏览器相关的文档对象
frames : 和浏览器框架相关的对象

DOM

DOM : Document Object Model 文档对象模型

window 窗口

var 在窗口中修饰的变量是全局变量，会默认成为 window的属性
- var在函数中定义的变量，不是全局变量
在窗口中定义的函数，也会自动成为 window 的方法
在使用 window 对象的时候，也可以省略 window 关键字

对话框

对话框 : 会阻塞程序的运行

a) 提示框 alert
b) 确认框 confirm
c) 输入框 prompt

// 提示框 类型 
alert("我是一个提示框")

// 确认对话框 confirm 有返回值， 返回 true / false 
let x = confirm("您确定要删除该数据吗?") 

//输入对话框， 返回输入的内容，如果点击取消按钮，则返回一个 null
let x = prompt("请输入您的手机号")

open() / close() : 打开/关闭一个窗口

open(url,target,features):打开窗口
- url：窗口的链接
- target:在哪里打开
- features:窗口的样式
close :关闭窗口

let win = false;

function openWin() {
    win = window.open("https://www.bilibili.com/", "_slef", "width=600px,height=300px")
}

function closeWin() {
    win.close()
}

延迟 setTimeout 清除延续 clearTimeout

setTimeout(fn , delay) : 用来设置延迟加载的代码 fn : 延迟执行的函数 delay: 延迟时间，单位是毫秒
返回一个延迟的句柄，可以通过 clearTimeout(句柄) 取消延迟动作

//a)
setTimeout(function () {
	console.log("hello")
}, 3000)

function w() {
	console.log("hello")
}

//b)
setTimeout(w, 3000)

//c)
setTimeout("w()", 3000)

//d)
setTimeout(function () {
	w()
}, 3000)


<a onclick="closelog()">取消延迟</a>

//递归的输出 hello
function log(n) {
    console.log("hello" + ++n);
    setTimeout(`log(${n})`, 3000);
}

log(0);

轮询 setInterval

setInterval(fn, delay) : 用来进行轮询 (每间隔一段时间、触发代码执行)
可以通过 clearInterval(句柄) 取消轮询动作

function log() {
    console.log("hello")
}

setInterval(log, 3000)
log()

页面倒计时

<script>
    // 获取 div元素
    let div = document.querySelector("#app") ;
    
    // 使用轮询 ，每间隔 1秒修改数据
    let playing = setInterval(function(){
        // 获取 div 标签体中的内容 
        let num = div.innerText - 1 ;
        
        // 将 修改 后的内容，设置到标签中
         div.innerText = num ;
         
         // 当 num 的值 为 0 时候，停止轮询 
         if (num <= 0) {
             clearInterval(playing); 
             // 将内容修改为 过年了！！！
             div.innerText = "过年了" ;
             // 设置字体大小为 80px 
             div.style.fontSize = "120px"; 
         }
    },  1000)
</script>

网址的组成部分

a) http:// protocal 协议

是计算机在网络中进行数据传输的一种规范
网页主要采用 http 和 https 协议
- http 和 https 底层采用的是 TCP/IP 协议
- http 和 https 应用层协议
- TCP/IP 是传输层协议
- 浏览器遵循 http 和 https 协议
http 协议采用明文进行数据传输
https 协议是一种安全协议、对传输的数据进行加密处理，可以通过证书进行验签

b) 域名 host

是网络中一台计算机的唯一标识，可以简单理解为和IP一一对应
例如 : www.baidu.com
协议和域名之间用 😕/ 分割

c) 端口号 port

用来查找匹配计算机指定的服务
端口号的取值范围是 0 ~ 65535 之间
http协议在进行数据传输的时候，默认采用的端口号是 80
https协议采用的默认端口号是 443
域名和端口号之间使用 : 分割

d) /s 请求路径 path

用来定位服务中的某一个具体的服务
端口和请求路径使用“/”分割

e) wd=图片请求参数 parameter

在使用某一个具体的服务的时候传递的数据
请求参数采用键=值的方式进行传递，多个参数采用 & 进行分割
请求路径 path 和请求参数 parameter 之间用 ? 分割

location 用来操作浏览器的网址

protocol : 获取协议 , 会包含一个 :

hostname : 获取IP或者域名
host : 获取主机（包含端口）
port : 获取端口号
pathname : 获取请求路径
search : 获取请求参数 , 会包含一个 ?
href : 获取网址，如果使用赋值语句，可以跳转页面，等价于 assgin
hash : 获取锚点
assgin(url) : 跳转到指定的网页，会将记录写入 history 中
replace(url) : 跳转到指定的网页，不会将记录写到 history 中
reload() : 刷新页面

// 获取当前网址
let url  = location.href  ; 

// 获取 协议 ， 会包含 :
let protocol = location.protocol ; 

// 获取域名 
let domain = location.hostname ;

// 获取 域名和端口
let ipAndPort = location.host ;

// 获取端口号 
let port = location.port ;

// 获取 请求地址 
let path = location.pathname

// 获取 查询请求参数 , 会包含 ?
let search = location.search ;

location 实现页面跳转

实现页面的跳转
- href和assign进行跳转，会有历史记录
  - location.assign(“https://www/baidu.com”):
  - location.href(url)
- replace直接替换当前网址，不会在历史中留下访问记录
  - location.replace(url)：
刷新页面
- location.reload()

// location 常见的方法 (可以实现页面跳转，等价于 location.href)
// href 和 assign 进行跳转的时候，会有历史记录 
location.assign("https://www.baidu.com/") 
location.href = "https://www.baidu.com/"

//replace 直接替换当前 网址 ，不会在历史中留下访问记录
location.replace("https://www.baidu.com/")

URL

获取任意网址的每一部分, 使用 URL这个类

let url = new URL(“http://www.baidu.com/s?wd=图片”)
获取网址每一部分的属性可以参考 location

URLSearchParams

获取网址中的请求参数

new URLSearchParams(search) :
search : 传入的是 location.search的部分

URLSearchParams 对象常用的方法

get(key) : 根据键获取值
getAll(key) : 根据键获取多个值
has(key) : 判断某个键是否存在

history

history.go(n) 前进你n 或者后退n 个网页
history.forward() 前进 , 等价于 history.go(1)
history.back(); 后退，等价于 history.go(-1)

document

操作 DOM 的步骤

1. 找到需要操作的 DOM 元素 (需要使用选择器)
1. 根据元素的属性 / 方法来完成具体的效果

选择器 : 为了快速选中网页中的标签

常见的选择器

a) document.getElementById(“id”) : 根据ID选中对应的元素
- 根据id选中对应的数据
- 如果id重复，只选中第一个元素对象
b) document.getElementsByTagName(tag) : 根据标签名选择元素
c) document.getElementsByName(name) : 根据标签的 name 属性名选择元素
d) document.getElementsByClassName(class): 根据标签的 class属性值选择元素

除 getElementById 之外的其他三个方法，均返回一个形似数组的对象

e) querySelector( css选择器 ) : 根据css选择器返回满足条件的第一个元素
f) querySelectorAll( css选择器) : 根据css选择器返回满足条件的所有元素

<p id="p1">1</p>
<p class="p2"><a>百度</a></p>
<p name="p3">3</p>
<a>新浪</a>

// 根据 id 等于 p1 选中 元素 
let tag = document.getElementById("p1") ;
console.log(tag); 

// 选中  class=p2 的 元素, 返回一个形似数组的对象
let tag1 = document.getElementsByClassName("p2");
console.log(tag1);

// 选中所有的 p 标签 
let tag2 = document.getElementsByTagName("p") ;
console.log(tag2);

// 选中 name属性 等于 p3 的 所有元素 
let tag3 = document.getElementsByName("p3") ;
console.log(tag3);

// 选中 id =p1 的元素 
let p1 = document.querySelector(".p2")
// console.log(p1)
// 获取 p1 元素下的 a 标签 
let a  = p1.querySelector("a")
console.log(a)

dom元素常见的属性

所有的 html 标签都可以使用

id , class , style, title

可以直接通过元素调用的属性有

id, name , style, title, src , href , value , checked , selected

给元素 class 赋值只能用 tag.className = “CSS” (只能替换样式)

tag.classList.add(“CSS”) (添加样式)

tag.classList.remove(“CSS”) (删除样式)

dataset 属性

指的是以 data- 开头的属性 , - 后面的值需要满足标识符命名规范

<>.dataset.val 获取 dataset 属性

<a id="link" data-url="https://www.iqiyi.com/" data-name="爱奇艺" href="https://www.bilibili.com/">blbl</a>
  <script>
      // 将 百度 超链接 更改为 新浪 
      let tag = document.querySelector("#link"); 
      
      // 获取 dataset 属性 
      let url = tag.dataset.url ; 
      let title = tag.dataset.name ;
      
      // 修改 a 标签的 href 
      tag.href = url ; 
      
      // 修改 标签体 里面的内容 
      tag.innerText = title ;
      
  </script>

dataset 属性应用

图片过大，加载缓慢常见的解决方案：

主界面展示多图的时候，采用缩略图 (网站需要存储缩略图和原图、需要对图像进行处理)
图片的延迟加载
默认图片 + 延迟加载

<div class="images" onscroll="lazyLoadImg(this)">
	<img src="./images/default.png" data-src="images/0001.webp" />
	······			
</div>

<script>
			
    // 获取 所有的图片 
    let imgs = document.querySelectorAll("img");
    // 定义 一个函数 lazyLoadImg ，负责 加载 图片
    function lazyLoadImg(tag) {
        // 获取 图片 距离 父容器的 顶部距离， 如果距离 超出了 父容器的高度，说明该元素还在隐藏状态
        for(let i = 0 ; i < imgs.length ; i++) {
            // 获取 图片对象
            let img = imgs[i] ;
            // 获取 img 元素 距离 父元素 顶部的距离
            
            let tlen =img.offsetTop - tag.scrollTop;
            // 如果 tlen + 图片自身的高度 < 父容器的高度，那么就需要将 真图显示出来 

            
            // 刚刚出现在可见区域，就换真图
            if (tlen  < tag.clientHeight && img.dataset.over != 1) {
                // 获取 img 的 真实地址
                let src = img.dataset.src ;
                img.src = src ;
                img.dataset.over = "1"
            }
        }
    }
    // 进入页面尝试 进行懒加载图片
    window.onload = function() {
        lazyLoadImg(document.querySelector(".images"))
    }
    
</script>

css 到父类的距离

offsetLeft : 距离父元素(最近定位的父元素)的左侧位置 (包含滚动隐去的距离)
offsetTop : 距离父元素(最近定位的父元素)的顶部位置 (包含滚动隐去的距离)
offsetWidth : 自身的宽度（包含边框）
offsetHeight: 自身的高度 (包含边框)
clientLeft : 元素左边框的宽度
clientTop : 元素上边框的宽度
clientWidth : 自身的宽度（不包含边框）
clientHeight : 自身的高度 (不包含边框)
scrollLeft : 滚动条左侧卷去的宽度
scrollTop : 滚动条顶部卷去的高度
scrollWidth : 元素的滚动宽度
scrollHeight: 元素的滚动高度

获取任意元素距离浏览器的位置

/**
 * 获取任意元素距离浏览器的位置
 */
function getPosition(obj) {
    // 获取 到 父元素的 左侧距离
    let lf = obj.offsetLeft ;
    let tp = obj.offsetTop ;

    // 获取 父元素
    let parent = obj.offsetParent ;

    if (parent == null) {
        return { left: lf , top: tp  };
    }
    // 如果 有 父元素
    let {left, top} = getPosition(parent) ;

    return {
        left: left + parent.clientLeft + lf,
        top: top + parent.clientTop + tp
    }
}

/**
 * 支持任意 js dom 对象调用
 */
Element.prototype.getClientPos = function() {
    return getPosition(this);
}

鼠标跟随效果

鼠标跟随：需要用到的事件是鼠标移动 mousemove 事件
- 给 document文档对象绑定事件
- js 通过 addEventListener 绑定事件
- 事件名是去掉 on
- event : 事件对象

<script>
    document.addEventListener("mousemove", function(event) {
       // pageX 鼠标在 x轴的坐标，相对于浏览器 ， pageY鼠标在 Y轴的坐标，相对于浏览器
       
        // 获取鼠标所在的位置 
        let x = event.pageX ;
        let y = event.pageY ;
        
        //console.log(x, y);
        
        // 创建一个 div.mouse 圆 并设设置 定位方式为 绝对定位 
        // 大小要求 2px - 10px 随机, 颜色随机
        let div = document.createElement("div") ;
        div.className = "mouse" ;
        div.style.position = "absolute" ;
        
        let wh = Math.floor(Math.random() * 15 + 5)
        
        div.style.width = wh + "px" ;
        div.style.height = wh + "px" ;
        div.style.borderRadius = "50%" ;
        div.style.backgroundColor = randomColor();
        
        div.style.left = x - wh /2 + "px" ;
        div.style.top = y - wh/2 + "px" ; 
        
        // 将 div 追加到 body标签中 
        document.body.appendChild(div);
        
        // 100 毫秒后自动删除 div 
        setTimeout(function() {
            div.remove();  // 删除元素
        } , 200)
       
    })
    function randomColor() {
        // 随机产生 0 ~ 255 之间的任意整数 
        let red = Math.floor(Math.random() * 256) ;
        let green = Math.floor(Math.random() * 256) ;
        let blue = Math.floor(Math.random() * 256) ;
        return `rgb(${red}, ${green}, ${blue})` ;
    }
</script>