BOM的常用对象：

最重要的三个东西：定时器、客户端存储技术、event

1、history对象：保存了当前窗口的历史记录（过去的url）
    前进：history.go(1);
    后退：history.go(-1);
    刷新：history.go(0);
2、location对象：保存了当前窗口的正在打开的url（现在的url）
	程序员必备常识：一个url由及部分组成？分别每个部分有什么？
	5部分：
            1、协议：https（加密）/http（未加密）/ftp(传输文件) /ws（直播） - 前两个都属于叫做 请求 - 响应 模型，专门用于实现网站开发
            2、主机号|ip地址|域名：域名是需要花钱购买的，主机号|ip地址是免费的，127.0.0.1才真的叫主机号，只能自己访问自己
            3、端口号：https默认端口为443，http默认端口为80，只有默认端口可以省略不写！
            4、文件的相对路径|路由：百度加密了 - 如果以后学习了服务器端，我们可以配置好一些选项，用户就可以在自己电脑上，看到我们的东西了16:59 2023/5/1767t
            5、查询字符串|请求消息：前端传输到后端的东西，前端对后端说的话，就是form表单get提交带来的东西

	属性：获取url的5个部分的内容，但是不需要记忆，你直接输出location对象即可查看
		协议：location.protocal
		域名：location.hostname
		端口号：location.port
		路由：location.pathname
		请求消息：location.search
        对应上面五部分
        
	方法：
		跳转：location="新url" - 替换当前窗口，可以后退
		跳转后，禁止后退：location.replace("新url");
		刷新：location.reload();

DOM

原本DOM是可以操作一切结构化文档的，但是再某个版本升级过后，为了方便各类程序员将DOM分为了3部分：

1、核心DOM：无敌的，既可以操作HTML又可以操作XML，但是语法相对比较复杂
2、HTML DOM：只能操作HTML，不能访问一切自定义的东西，但是语法简单
3、XML DOM：只能操作XML数据格式，被淘汰了，被JSON数据格式代替了

查找元素

1、通过关系找元素：前提：至少要找到一个元素，才可以调用关系网
    父：xx.parentNode;
    子：xx.children; - 集合
    第一个儿子：xx.firstElementChild;
    最后一个儿子：xx.lastElementChild;
    前一个兄弟：xx.previousElementSibling;
    后一个兄弟：xx.nextElementSibling;
2、直接找元素：2大类：通过HTML的特点去查找元素
    1、var elems=document.getElementsByXXXXXX();//返回的是一个动态集合HTMLCollection
    2、第二大类：2个：通过CSS选择器去查找元素
	1、var elem=document.querySelector("任意css选择器");
            缺陷：只能找到单个元素，如果匹配到多个，也只会返回第一个，没找到，返回null
            一次只能操作一个元素
        2、var elems=document.querySelectorAll("任意css选择器");
		优点：
		1、找到了是一个集合，没找到是一个空集合
		2、复杂查找时，非常简单
		3、返回的是一个静态集合NodeList
            面试题：document.getXXX 和 document.queryXXX的区别？
		1、后者更适合复杂查找
		2、动态集合和静态集合的区别？
                    1、动态集合：每一次DOM发生变化，他都会悄悄的再次查找页面元素，让页面和数据保存一致，但是效率也就低下了 - 不支持forEach
                    2、静态集合：每一次DOM发生变化，他都不会悄悄的再次查找页面元素，让页面和数据保存不一致，但是效率也就高了 - 支持forEach

操作元素

1、内联样式：
    获取：elem.style.css属性名; - 只能获取内联样式
    设置：elem.style.css属性名="css属性值";
2、样式表样式 - 此生不见
    获取你想要操作的样式表
	var sheet=document.styleSheets[i];
    获取此样式表中所有的样式规则
	var rules=sheet.cssRules;
    数出你想要操作的那个样式规则
	var rule=rules[i];
    操作
        console.log(rule.style.background);
        rule.style.background="purple"

操作属性

1、获取属性值：
	核心DOM：elem.getAttribute("属性名");
	HTML DOM：elem.属性名
2、设置属性值：
	核心DOM：elem.setAttribute("属性名","属性值");
	HTML DOM：elem.属性名="属性值"
3、删除属性：设置属性值为空字符串，确实某些属性可以算是删除，但是只是删除了属性值，属性名还在，而有的属性哪怕只有一个属性名，也会具有作用（checked、href、readonly...）
	核心DOM：elem.removeAttribute("属性名");
	HTML DOM：elem.属性名="";
4、判断有没有：垃圾，只能判断有没有，不能判断是什么，推荐用elem.getAttribute("属性名");去获取到属性值，自己再写比较运算进行判断
	核心DOM：elem.hasAttribute("属性名");
	HTML DOM：elem.属性名!="";

操作内容 innerHTML/innerText/value

如何创建元素以及上树：3步

1、创建空标签：
	var elem=document.createElement("标签名");
2、为其设置必要的属性和事件
	elem.属性名="属性值";
	elem.on事件名=function(){操作}
3、上树：3种
	父元素.appendChild(elem);//在父元素末尾追加一个子元素elem
	父元素.insertBefore(elem,已有子元素);//在父元素里面追加一个子元素elem，但是会放在已有子元素的前面
	父元素.replaceChild(elem,已有子元素);//在父元素里面追加一个子元素elem，但是elem会替换掉已有子元素

删除元素：elem.remove();

总结：DOM就是在做（增、删、改、查（元素、内容、属性、样式））

扩展：

1、input的两个专属事件：onfocus（获取焦点）和onblur（失去焦点）
2、创建变量：在ES6新增了一个let关键字 - 建议忘掉var
let 变量名=值;
作用：
    1、解决了声明提前，一定要先创建再使用
    2、带来了块级作用域：一个{}就是一个快，此变量只能在那个{}里面使用！
    3、如果用let去当作下标绑定事件，那么他会记录着你当前元素的下标，不再需要自定义下标了！其实forEach的那个形参i就是用let创建的！
3、将类数组对象变为普通数组！ES5提供了此API
接住=Array.from(类数组);