DOM&BOM

DOM

什么是DOM？

​ 文档对象模型(Document Object Model，简称DOM ）)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML )的标准编程接口。
​ W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

1.获取元素

​ 1.1获取元素

​ 获取特殊元素( body , html )

​ 1)获取body元素

doucumnet.body //返回body元素对象

​ 2)获取html元素

document.documentElement //返回html元素对象

1.2获取页面元素

​ 1)getElementsByclassName 根据类名获得某些元素集合

​ 2)getElementsById 返回id指定的元素对象

​ 3)querySelector 返回指定选择器的第一个元素对象

​ 4)querySelectorAll 返回指定选择器的所有元素对象集合

具体用法：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-INnWGANd-1626742031257)(C:\Users\86136\Desktop\test\图片\QQ图片20210531204813.png)]

2.DOM事件

​ 事件三要素：事件源–触发条件–触发结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rPIg2Fye-1626742031259)(C:\Users\86136\Desktop\test\图片\QQ图片20210531205251.png)]

案例： 1.当点击按钮，div里的文字会变化

    <button id="btn">点我！</button>
    <div id="div">这是一个div</div>

    <script>
    //案例：当点击按钮，div里的文字会变化
    //获取事件源
    var btn = document.getElementById("btn");
    var div = document.getElementById("div");

    //设置触发事件 和 触发函数
    btn.onclick = function(){
        div.innerText = "啊你点那个按钮了！";
    }
    </script>

3.操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性
​

​ 3.1改变元素内容

element.innerText//从起始位置到终止位置的内容,但它去除html标签，同时空格和换行也会去掉

element.innerHTML//起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b2nFmVuq-1626742031260)(C:\Users\86136\Desktop\test\图片\QQ图片20210531210607.png)]

案例：点击按钮更换图片

案例：循环精灵图遍历算法

// 1．获取元素所有的小li
var lis = document.querySelectorAl1( 'li');for (var i = 0; i < lis.length; i++) {
	//让索引号乘以44就是每个li的背景y坐标index就是我们的y坐标
	var index = i * 44;
	lis[i].style.backgroundPosition = '0 -' + index + 'px ';
}

案例：京东搜索框自动填充

4.样式属性操作

我们可以通过JS修改元素的大小、颜色、位置等样式。

1. element.style 行内样式操作，适用于修改样式较少

2. element.className 类名样式操作，适用于修改样式多，用修改类名的方式修改样式。

   注意：用className 直接赋值时会被覆盖，可以采用多类名选择器修改。

5.排他思想

​ 1.清除所有元素样式（干掉其他人）

​ 2.为自己设置需要的样式（留下自己)

6.自定义属性

​ 1.设置属性

element.属性='值';//设置内置属性值。
element.setAttribute('属性'，'值');//设置自定义属性

区别:
element.属性设置内置属性值
element.setAttribute( 属性);主要设置自定义的属性（标准)

​ 2.获取属性

​ getAttribute

​ 3.移除属性

​ removeAttribute

案例：tab栏切换，通过自定义Index属性来切换内容显示。

7.节点

​ 1.节点概述

​ 一般地，节点至少拥有nodeType(节点类型) 、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。
​ 元素节点nodeType 为1，属性节点nodeType为2，文本节点nodeType 为3(文本节点包含文字、空格、换行等)我们在实际开发中，节点操作主要操作的是元素节点

​ 2.节点层次

​ 利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

​ 2.1父节点

node.parentNode

parentNode属性可返回某节点的父节点，注意是最近的一个父节点。如果指定的节点没有父节点则返回null

​ 2.2子节点

parentNode.chilaNodes

parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合。注意:返回值里面包含了所有的子节点，包括元素节点，文本节点等。

parentNode.children

常用，返回值里面包含了所有的元素子节点

parentNode .firstChild

firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。

parentNode . lastChild

lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。

​ 2.3兄弟节点

​ 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等

​ 2.nextElementSibling 得到下一个兄弟元素节点

3. node .nextElementsibling返回当前元素下一个兄弟元素节点，找不到则返回null。
4. node.previousElementsibling返回当前元素上一个兄弟节点，找不到则返回null。

​ 3.动态创建元素节点

​ 步骤：（1）创建节点:createElement

​ （2）将节点添加至相应位置:appendChild,在子集后面添加孩子

​ insertBefore（child, 指定元素），表示将child元素添加到指定元素之前。

 		// 1. 创建节点元素节点
        var li = document.createElement('li');
        // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素  类似于数组中的push
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3. 添加节点 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素

4，复制节点

​ node.cloneNode():浅拷贝，只复制标签，不复制内容

​ node.cloneNode(ture):深拷贝，也要复制其子节点。

8.监听器

​ 1.addEventListener事件监听方式

eventTarget.addEventListener(type,listener[, usecapture])

eventTarget .addEventListener()方法将指定的监听器注册到eventTarget(目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

该方法接收三个参数︰
type:事件类型字符串，比如click、mouseover ，注意这里不要带on
心
listener :事件处理函数，事件发生时，会调用该监听函数
useCapture :可选参数，是一个布尔值，默认是false。

​ 2.删除事件的方式

9.DOM事件流

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

10.常用的鼠标点击事件

1.鼠标

2.常用的键盘事件

​ ①keyup：弹起时触发

​ ②keydown：按下时触发

​ ③keypress（不能识别功能键，例如ctrl，左右箭头等）

​ ④执行顺序：keydown—keypress----keyup

3.键盘事件对象

​ 键盘事件对象属性：keyCode：返回该键的阿斯克码值

注意：onkeydown和onkeyup不区分大小写，onkeypress区分字母大小写

BOM

一.概述

二.页面加载事件

1.窗口加载事件:load

	window.addEventListener("load",function(
                //里面放上以前写在对象下面的代码           
   ){})

有了window.load就可以把js代码写到页面元素上方，页面加载完毕后会执行里面内容。

window.addEventListener("DOMContentLoaded",function(){})       

如果页面图片很多，onload触发要很长时间时就用DOMContentLoaded。

2.调整窗口大小:resize

   window.addEventListener('load', function() {
            var div = document.querySelector('div');
            window.addEventListener('resize', function() {
                console.log(window.innerWidth);

                console.log('变化了');
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }

            })
        })

3.定时器

①setTimeout

语法规范： window.setTimeout(调用函数, 延时时间);
// 1. 这个window在调用的时候可以省略
// 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0
// 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 ‘函数名()’
// 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)

例：

 setTimeout(function() {
            console.log('时间到了');

        }, 2000);
        function callback() {
            console.log('爆炸了');

        }
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);

②clearTimeout(定时器id)

用于清除定时器。

③setlnterval(function(){},time)

间隔time毫秒，重复调用该函数。

④clearTimeout(定时器id)

清除间隔定时器

三.JS执行机制

1.同步和异步

​ 在js执行代码的过程中，先把各个任务分成同步任务和异步任务，将异步任务放入队列当中，然后先执行同步任务再执行异步任务。

2.事件循环

四.location对象

1.什么是location对象
一个用于获取或设置窗体的URL，并且可以用于解析URL的属性。
2.URL

​ 统一资源定位符（Uniform Resoure Locator,URL）是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它
URL的一般语法格式为：
protocol://host[:port]/path/[?query]#fragment

protocol 同行协议 常用的http，ftp，maito等
host 主机（域名）www.itheima.com
port 端口号可选，省略时使用方案的默认端口，如http的默认端口为80
path 路径由零或多个’/'符号隔开的字符串，一般用来表示主机上的一个目录或者文件地址
query 参数 以键值对的形式通过&符号分割开来
fragment 片段 #后面内容 常见于链接锚点

3.location对象的属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-293xDRQT-1626742031263)(%E5%9B%BE%E7%89%87/1_Snipaste_2021-07-11_21-17-04.png)]

3.方法：

location对象方法	作用
assign()	跟href一样，可以跳转页面(也称为重定向页面)，记录历史
replace()	替换当前页面，因为不记录历史，所以不能后退页面
reload()	重新加载页面，相当于刷新按钮或者f5如果参数为true强制刷新ctrl+f5

五.navigator对象

​ 这个对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值

下面代码可以判断用户哪个终端打开页面

function getMultiport() {
  if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
      return 'mobile';
    }
    return 'PC';
  }
let multiport = getMultiport();
console.log(multiport);	// 'mobile' 或 'PC'

六.history对象

​ window对象给我们提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL

history对象方法	作用
back()	后退
forward()	前进功能
go(参数)	前进后退功能，参数如果是1 前进一个页面 如果是-1 后退一个页面

PC端网页特效

一.offset系列

（1）offset

offset 就是偏移量，可以动态的得到该元素的位置、大小等

● 获取元素距离带有定位父元素的位置

● 获取元素自身的大小

● 返回的数值不带单位

（2）offset 系列常用属性

offset系列属性 作用
element.offsetParent 返回作为该元素带有定位的父级元素
element.offsetTop 返回元素相对带有定位父元素上方的偏移
element.offsetLeft 返回元素相对带有定位父元素左边框的偏移
element.offsetWidth 返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight 返回自身包括padding、边框、内容区的高度，返回值不带单位

（3） offset和style的区别

● offset 系列获得的数值是没有单位的, offsetWidth 等属性是只读属性，只能获取不能赋值。

● style 只能得到行内样式表中的属性值，style.width 获得的是带有单位的字符串，并且可以修改属性值。

二.client 系列

通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等

client系列属性 作用
element.clientTop 返回元素上边框的大小
element.clientLeft 返回元素左边框的大小
element.clientWidth 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight 返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

立即执行函数