11.前端JavaScript之【BOM操作】&【DOM操作】

目录

1.BOM与DOM操作基本概念

2.BOM操作 (window对象，window子对象，弹出框，计算器)

3.DOM操作(查标签，操作标签，操作class与css，获取值)

1.BOM与DOM操作基本概念

1.BOM:
    浏览器对象模型  Browser Object Model
        js代码操作浏览器
2.DOM:
    文档对象模型	  Document Object Model
        js代码操作标签

2.BOM操作 (window对象，window子对象，弹出框，计算器)

1.window对象
    window对象指代的就是浏览器窗口,可以在浏览器控制台console进行窗口控制,控制参数:
        window.innerHeight      //浏览器窗口的高度
        window.innerWidth       //浏览器窗口的宽度
        window.open()           //新建窗口打开页面(三个参数),
                                //第一个参数为url  第二个参数写空 第三个参数写新建的窗口的大小位置
        window.close()          //关闭当前页面
        补充open例子：window.open('https://www.baidu.com/','','height=400px,width=400px,top=400px,left=400px')


2.window子对象
    (1).navigator对象(浏览器对象)
        window.navigator.appName        //返回浏览器的名称
        window.navigator.appVersion     //返回浏览器的平台和版本信息
        window.navigator.userAgent      //判断是否是一个浏览器，用户代理头的字符串表示
        window.navigator.platform       //返回运行浏览器的操作系统平台
        window.navigator.appCodeName    //返回浏览器的代码名称的字符串
        window.navigator.cookieEnabled  //指明浏览器中是否启用 cookie 的布尔值

    (2).history对象
        window.history.back()           //回退到上一页
        window.history..forward()       //前进到下一页

    (3).window子对象之location对象
        window.location                 //包含有关当前URL端口等等资源全部的信息
        window.location.href	        //获取当前页面的url
        window.location.href = url      //跳转到指定的url
        window.location.reload()        //重新加载当前页面（刷新）
        window.location.hostname        //获取当前 URL 的主机名
        window.location.pathname        //获取当前 URL 的路径
        window.location.protocol        //获取当前 URL 的协议信息


3.弹出框
    (1).警告框
        alert('难道30岁再学python?')
    (2).确认框
        confirm('你确定明天开始学python了嘛') // 用户点击可以确认返回true，点击取消返回false
    (3).提示框
        prompt('已为您调好闹钟','17:00')  // 用户点击可以确认返回17:00，点击取消返回null，更改提示框内容确认返回更改内容


4.计时器
    (1).过一段时间之后触发(一次):
        setTimeout(代码块,3000);    // 毫秒为单位 3秒之后自动执行代码块(可以是函数)

    (2).每隔一段时间触发一次(循环/无数次):
        setInterval(代码块,3000);    // 每隔3秒执行一次代码块

    (3).清除定时器:(clear-代替set-)
        无论是一次还是无数次，清除都要指定变量给定时器，利用清除变量来清除定时器
        a.清除一次：
            let t = setTimeout(代码块,3000);
            clearTimeout(t)
        b.清除无数次：
            let t = setInterval(代码块,3000);
            clearInterval(t)

    (4).自定义定时器
        利用定时一次和循环无数次，制定一个某个时刻n次的定时器：
            function func1() {
                alert(123)
            }
            function show(){
                let t = setInterval(func2,3000);    // 每隔3秒执行一次
                function inner(){
                    clearInterval(t)                // 清除定时器
                }
                setTimeout(inner,9000)              // 9秒中之后触发
            }
            show()

3.DOM操作(查标签，操作标签，操作class与css，获取值)

1.DOM操作概念(临时有效，刷新即无)：
    (1).DOM:文档对象模型，一种处理HTML和XML文件的标准API：
        DOM+树:将文档作为一个树形结构，如HTML为根节点，那么树的每个结点表示了一个HTML的标签或标签内的文本项
    (2).DOM操作:让JavaScript可以对文档(页面)中的标签、属性、内容等进行 访增删改 操作。
    (3).DOM操作分为两步：查找标签，操作标签


3.Dom查找标签：关键字document起手
    (1).直接查找
        a.id查找
            document.getElementById('d1')               // 返回id为d1的标签
        b.类查找
            document.getElementsByClassName('c1')       // 返回id为c1的数组（注意）
        c.标签查找
            document.getElementsByTagName('div')        // 返回标签为div的数组（注意）
        d.补充：
            在用变量名指代标签对象时，变量名应书写成xxxEle

    (2).间接查找
        基于一个标签通过父，儿子，哥哥，弟弟等方式查找标签，用关键字document
        a.找父标签(最高找到HTML)
            let pEle = document.getElementsByClassName('c1')[0]  // 基标签，注意是否需要索引取值
            pEle.parentElement
        b.找儿子标签
            let divEle = document.getElementById('d1')      // 基标签
            divEle.children                                 // 获取所有的子标签
            divEle.firstElementChild                        // 获取大儿子标签
            divEle.lastElementChild                         // 获取小儿子标签
        c.找哥哥弟弟标签（同级）
            let divEle = document.getElementById('d1')      // 基标签
            divEle.nextElementSibling                       // 找弟弟标签，同级别下面第一个
            divEle.previousElementSibling                   // 找哥哥标签同级别上面第一个


3.Dom操作标签：关键字document起手
    操作标签：创建标签，添加/更改标签属性，标签位置增·删·改，标签添加文本
    以下用插入img标签，插入div内部演示：
    (1).创建标签:createElement()
        let imgEle = document.createElement('img')   // 通常指定标签名方便操作
    
    (2).添加/更改标签属性:
        a.添加属性1：用点.方式只能添加默认属性
                    如添加图片路径属性：imgEle.src = 'python,jpg'
        b.添加属性2：setAttribute()：可以添加自定义属性和默认属性
                    如添加图片自定义password属性：imgEle.setAttribute('password','123')
                        添加图片默认的title属性：imgEle.setAttribute('title','一张图片')
        c.获取属性:getAttribute()
        d.移除属性:removeAttribute()
    
    (3).指定位置插入，删除标签，改标签
        let divEle = document.getElementById('d1')
        a.插入1：指定标签内尾部追加：
                    divEle.appendChild(imgEle)
        b.插入2：指定标签内中的某个标签前/后：
                    let pEle = document.getElementById('d2')
                    divEle.insertBefore(imgEle,pEle)          // 在div里面，pEle标签前面插入imgEle标签
                    divEle.insertafter(imgEle,pEle) 
        c.删除:removeChild()
        d.替换:replaceChild()
        
    (4).添加标签内部文本innerText与innerHTML
        创建p标签，并给p标签添加文本
        let pEle = document.createElement('p')
        a.innerText:
            pEle.innerText = '<h1>一起学习python!</h1>'     // 不识别html标签
        b.innerHTML：
            pEle.innerHTML = '<h1>一起学习python!</h1>'     // 识别html标签
        c.补充:获取表签内部文本：
            pEle.innerText

    (5).案例1:
        通过DOM操作动态创建img标签，标签加属性，标签添加到div内部中
            let imgEle = document.createElement('img')      // 创建标签
            imgEle.src = 'python.png'                       // 给标签设置默认的属性
            imgEle.setAttribute('password','123')           // 自定义的属性
            let divEle = document.getElementById('d1')
            divEle.appendChild(imgEle)                      // 添加到div内部(尾部追加)
    (6).案例2
        过DOM操作动态创建a标签，标签加属性，设置标签内部文本，添加到div内部中并在p标签上面
            let aEle = document.createElement('a')          // 创建标签
            aEle.href = 'https://www.baidu.com/'            // 给标签设置属性
            aEle.innerText = '百度一下!'                     // 设置标签内部文本
            let divEle = document.getElementById('d1')
            let pEle = document.getElementById('d2')
            divEle.insertBefore(aEle,pEle)                   // 添加到div内部中并在p标签上面


4.Dom操作类class选择器,更改属性(用classList起手)
    let divEle = document.getElementById('d1')      // 获取标签
    divEle.classList                                // 获取标签所有的类属性，返回数组[属性，值]
    divEle.classList.add('bg_red')                  // 添加类属性bg_red
    divEle.classList.remove('bg_red')               // 移除某个类属性
    divEle.classList.contains('c1')                 // 验证是否包含c1类属性，返回true/false
    divEle.classList.toggle('bg_red')               // 有则删除无则添加


5.Dom操作标签样式css，更改样式(用style起手)
    let pEle = document.getElementsByTagName('p')[0]        // 获取标签，注意返回是数组要加索引
    pEle.style.color = 'red'                                // 更改样式red
    pEle.style.fontSize = '28px'
    pEle.style.backgroundColor = 'yellow'


6.Dom获取值操作:
    目的：为了获取用户输入的数据
    (1).获取输入文本数据
        let seEle = document.getElementById('d2')       // 获取标签
        seEle.value                                     // 获取标签的value值
        seEle.value = ''                                // 将标签的value值清空
        seEle.value = 'df'                              // 将标签的value值更改df
    (2).获取上传文件数据
        let fileEle = document.getElementById('d3')     // 获取标签
        fileEle.value                                   // 无法获取到文件数据，只拿到路径
        fileEle.files[0]                                // 获取文件数据，要加索引[0],第一个才是文件数据