内容概要

• BOM和DOM操作
• DOM操作之查找标签
• DOM操作之操作标签

内容详细

BOM和DOM操作

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

BOM操作

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


        setTimeout()
        clearTimeout()
        setInterval()
        clearInterval()

DOM操作之查找标签

        前缀关键字>>>:document

        # 基本查找(核心)
        document.getElementById           根据ID获取一个标签
        document.getElementsByClassName   根据class属性获取
        document.getElementsByTagName     根据标签名获取标签合集

        """
        如果我们的js代码需要页面上某个标签加载完毕
        那么该js代码应该写在body内部最下方或者引入外部js文件
        """

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

节点操作

        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
            不加赋值符号是获取内部标签+文本
            加了赋值符号是设置内置标签+文本
            # 可以识别HTML标签

获取值操作

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

class操作

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

样式操作

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

事件

        # 就是给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>

            # 如果某个标签已经有事件了 那么绑定会冲突

内置参数this

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