BOM与DOM操作

 BOM	浏览器对象模型>>>:使用js操作浏览器
 DOM	文档对象模型>>>：使用js操作前端页面

1.BOM操作

 window.open()			打开新窗口
 window.close()			关闭当前窗口
 history.forward()		前进一页
 history.back()			后退一页
 location.href()		获取URL
 location.href='URL'	跳转刀片指定页面
 location.reload()		重新加载页面

2.DOM操作之查找标签

 `前缀关键字	document`
 
 基本查找(核心)
 document.getElementById           根据ID获取一个标签
 document.getElementsByClassName   根据class属性获取
 document.getElementsByTagName     根据标签名获取标签合集
 
 `如果我们的js代码需要页面上某个标签加载完毕
  那么该js代码应该写在body内部最下方或者引入外部js文件`

 间接查找
 parentElement            父节点标签元素
 children                 所有子标签
 firstElementChild        第一个子标签元素
 lastElementChild         最后一个子标签元素
 nextElementSibling       下一个兄弟标签元素
 previousElementSibling   上一个兄弟标签元素

3.节点操作

var aEle = document.createElement('a');  # 创建标签
aEle.setAttribute('href','https://www.mmzztt.com/')  
# 设置属性
aEle.innerText = '好不好看?'  # 设置内容文本
document.getElementsByTagName('p')[0].appendChild(aEle)  
# 动态添加
"""一定要明确当前手上是什么对象"""
imgEle.getAttribute('title')  # 获取标签属性

 innerText
 	不加赋值符号是获取内部文本
 	加了赋值符号是设置内置文本
 	 不可以识别HTML标签
 innerHTML
 	不加赋值符号是获取内部标签+文本
 	加了赋值符号是设置内置标签+文本

4.获取值操作

 普通的文本数据获取
 	标签对象.value
 特殊的文件数据获取
 	标签对象.value		仅仅获取一个文件地址而已
 	标签对象.files[0]	获取单个文件数据
 	获取对象.files		获取所有文件数据

5.class操作

 classList						查看所有的类
 classLIst.remove(cls)			删除指定类
 classLIst.add(cls)				添加类
 classLIst.contains(cls)		存在返回true，否则返回false
 classLIst.toggle(cls)			存在就删除，否则添加

6.样式操作

 标签对象.style.属性名 = 属性值

7.事件

 就是给HTML元素添加自定义功能
 绑定事件的方式1
 	<button onclick="func()">点我</button>
    <script>
        function func() {
            alert(123)
        }
    </script>
 
 绑定事件的方式2
 	<button id="d1">选我</button>
    <script>
        // 1.先查找标签
        var btnEle = document.getElementById('d1')
        // 2.绑定事件
        btnEle.onclick = function () {
            alert(456)
        }
    </script>

8.内置参数this

 this指代的就是当前被操作对象本身
 在事件的函数体代码内部使用
 	btnEle.onclick = function () {
            alert(456)
            console.log(this)
        }