BOM和DOM(boom炸了)

(╥╯﹏╰╥)ง衣锦还乡、光宗耀祖支撑着我去教室

 

---------------------不定时的更新叕开始了，且更且珍惜------------------------ 

我要每次都写一遍：前面的还没补完，以此催促不定时更新的我
------------------------------------------------------------------------------------------------

 

Ⅰ BOM和DOM简介

　　☄什么是BOM和DOM？

 

　　　　　　BOM：Browser Object Model，是指浏览器对象模型，

　　　　　　　　　它使 JavaScript 有能力与浏览器进行“对话”。

　　　　　　DOM ：Document Object Model)，是指文档对象模型，通过它，

　　　　　　　　　  可以访问HTML文档的所有元素。

　　　

　　☄为什么要学BOM和DOM

　　　　　   到目前为止，我们已经学过了JavaScript的一些简单的语法。

　　　　　  但是这些简单的语法，并没有和浏览器有任何交互。

　　　  也就是我们还不能制作一些我们经常看到的网页的一些交互，

　　　　我们需要继续学习BOM和DOM相关知识。

　　　  JavaScript分为 ECMAScript，DOM，BOM。　

　　▲补充：

　　　　★ windows对象

　　　　　　  *  所有浏览器都支持 window 对象。它表示浏览器窗口。

　　　    *  如果文档包含框架(frame 或 iframe 标签)，浏览器会为

　　　　　　HTML文档创建一个 window 对象，并为每个框架创建

　　　　　　一个额外的window 对象。

　　　    *  没有应用于 window 对象的公开标准，不过所有浏览器

　　　　　　都支持该对象。

　　　　*  所有 JavaScript 全局对象、函数以及变量均自动成为

　　　　　　window 对象的成员。

　　　   *  全局变量是 window 对象的属性。

　　　　   全局函数是 window 对象的方法。

　　　   * HTML DOM 的 document 也是 window 对象的属性之一。

　　　   一些常用的Window方法：

　　　　　　　　♦ window.innerHeight - 浏览器窗口的内部高度

　　　　　　　　♦ window.innerWidth - 浏览器窗口的内部宽度

　　　　　　　　♦ window.open() - 打开新窗口

　　　　　　　　♦ window.close() - 关闭当前窗口

　　　　　*  Window对象是客户端JavaScript最高层对象之一，

　　　　  　　由于window对象是其它大部分对象的共同祖先，

　　　　  　　在调用window对象的方法和属性时，

　　　　  　　可以省略window对象的引用。

　　　　  例如：window.document.write()可以简写成：document.write()。

1|2window的子对象

 

　　　★ navigator对象（了解即可）

　　　　　　浏览器对象，通过这个对象可以判定用户所使用的浏览器，

　　　　　　包含了浏览器相关信息。

　　　　　navigator.appName　　// Web浏览器全称
　　　　　navigator.appVersion　// Web浏览器厂商和版本的详细字符串
　　　　　navigator.userAgent　　// 客户端绝大部分信息
　　　　　navigator.platform　　　// 浏览器运行所在的操作系统

　　　　　　

　　　★ screen对象（了解即可）

　　　　　　　屏幕对象，不常用。

　　　　　　　一些属性：

　　　　　　　　　　　♦ screen.availWidth - 可用的屏幕宽度

　　　　　　　　　　　♦ screen.availHeight - 可用的屏幕高度

　　　★ history对象（了解即可）

　　　　　　　window.history 对象包含浏览器的历史。

　　　　　　　浏览历史对象，包含了用户对当前页面的浏览历史，

　　　　　　　但我们无法查看具体的地址，可以简单的用来前进或

　　　　　　　后退一个页面。

　　　　history.forward() // 前进一页

　　　　history.back() // 后退一页

 

　　　★ location对象

　　　　　　window.location 对象用于获得当前页面的地址 (URL)，

　　　　　　并把浏览器重定向到新的页面。

　　　　　　常用属性和方法：

　　　　　　location.href  获取URL
　　　　　　location.href="URL" // 跳转到指定页面
　　　　　　location.reload() 重新加载页面

　　　　★ 弹出框

　　　　　　　可以在 JavaScript 中创建三种消息框：

　　　　　　　　　警告框、确认框、提示框。

　　　　　警告框

　　　　　警告框经常用于确保用户可以得到某些信息。

　　　　　当警告框出现后，用户需要点击确定按钮才能继续进行操作。

　　　　　语法：

　　　　　　　　alert("你来了？");

　　　　　确认框（了解即可）

　　　　　　　确认框用于使用户可以验证或者接受某些信息。

　　　　　　　当确认框出现后，用户需要点击确定或者取消按钮

　　　　　　　才能继续进行操作。

　　　　　　　如果用户点击确认，那么返回值为 true。

　　　　　　　如果用户点击取消，那么返回值为 false。

　　　　　　　语法：

　　　　　　　　　　confirm("你确定吗？")

　　　　　　提示框（了解即可）

　　　　　　提示框经常用于提示用户在进入页面前输入某个值。

　　　　　　当提示框出现后，用户需要输入某个值，然后点击确认

　　　　　　或取消按钮才能继续操纵。

　　　　　　如果用户点击确认，那么返回值为输入的值。

　　　　　　如果用户点击取消，那么返回值为 null。

　　　　　　语法：

　　　　　　　　　prompt("请在下方输入","你的答案")

　　　★计时相关

　　　　　　通过使用 JavaScript，我们可以在一定时间间隔之后

　　　　　　来执行代码，而不是在函数被调用后立即执行。

　　　　　　我们称之为计时事件。

　　　　　　♦ setTimeout()

　　　　　　语法：

　　　　　　　　　var t=setTimeout("JS语句",毫秒)

　　　　　　setTimeout() 方法会返回某个值。在上面的语句中，

　　　　　　值被储存在名为 t 的变量中。假如你希望取消这个

　　　　　　setTimeout()，你可以使用这个变量名来指定它。

　　　　　　setTimeout() 的第一个参数是含有 JavaScript

　　　　　　语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，

　　　　　　或者对函数的调用，诸如 alertMsg()"。

　　　　　　第二个参数指示从当前起多少毫秒后执行第一个参数

　　　　　　（1000 毫秒等于一秒）。

　　　　　　♦ clearTimeout()

　　　　　　语法：

　　　　　　　　　clearTimeout(setTimeout_variable)

　　　　　　举个例子：

 

　　　　// 在指定时间之后执行一次相应函数
　　　　var timer = setTimeout(function(){alert(123);}, 3000)
　　　　// 取消setTimeout设置
　　　　clearTimeout(timer);

 

　　　　　  ♦ setInterval()

　　　　　　setInterval() 方法可按照指定的周期（以毫秒计）

　　　　　　来调用函数或计算表达式

　　　　　　setInterval() 方法会不停地调用函数，直到 clearInterval()

　　　　　　被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作

　　　　　　clearInterval() 方法的参数。

　　　　　　语法：

　　　　　　　　　setInterval("JS语句",时间间隔)

　　　　　　返回值

　　　　　　　　一个可以传递给 Window.clearInterval() 从而取消对

　　　　　　　　code 的周期性执行的值。

　　　　　♦ clearInterval()

　　　　　　clearInterval() 方法可取消由 setInterval() 设置的 timeout。

　　　　　　clearInterval() 方法的参数必须是由 setInterval() 返回的

　　　　　　ID 值。

　　　　　　语法：

　　　　　　　　　clearInterval(setinterval返回的ID值)

　　　　　举个例子：

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

 

Ⅱ BOM和DOM的操作

☄BOM操作

　　　　操作浏览器，需要调用window对象，它是所有浏览器都支持的对象，

　　　　表示的就是浏览器窗口

　　　　window对象可以通过点调用子对象

 

　　　　♦ window.navigator

　　　　　　navigator.appName　　// Web浏览器全称
　　　　　　navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
　　　　　　navigator.userAgent　　// 客户端绝大部分信息
　　　　　　navigator.platform　　　// 浏览器运行所在的操作系统

 

　　　　♦ window.screen

 

　　　　♦ window.history

　　　　　　history.forward()  // 前进一页
　　　　　　history.back()  // 后退一页

 

　　　　♦ window.location(重点)

　　　　　　location.href  获取URL
　　　　　　location.href="URL" // 跳转到指定页面
　　　　　　location.reload() 重新加载页面

 

　　　　♦ 弹出框

　　　　　　警告框(alert)
　　　　　　确认框(confirm)
　　　　　　提示框(prompt)

 

　　　　♦ 计时器相关(重点)

• • setTimeout与clearTimeout(设置单次定时触发，清除)

  • setInterval与clearInterval(循环触发，清除)

    function f1() {
        alert(123);
    }
    ​
    function clear() {
        var t = setInterval(f1,3000);
        function inner() {
            clearInterval(t);
        }
        setTimeout(inner,9000)
    }
    clear();

 

☄DOM操作

　　　通过JS代码操作html页面，实现相应效果

　　　要想操作html页面，实现相应动态效果，第一步还是得先解决查找标签的事情

　　 ☆ 查找标签

　　　　　　♢直接查找

　　　　　　　　document.getElementById
　　　　　　　　document.getElementsByClassName
　　　　　　　　document.getElementsByTagName

　　　　　　♢间接查找

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

　　　　　　js代码在书写时，一定要保证在页面html文件全部加载完毕后

　　　　　　才能正常执行，否则报错。两种解决方式

 

　　　　　　　　▪  window.onload = function(里面写js代码)title标签内部

 

　　　　　　　　▪  js写在html文档最下方

　　 ☆节点操作

 

　　　　　　•  1.创建节点，2.添加自定义属性，3.添加固有属性，

　　　　　　4.添加到DOM树中浏览器展示

　　　　　　

// appendChild 直接尾部添加
​
// 创建标签
var imgEle = document.createElement('img');
// 设置自定义属性
imgEle.setAttribute('id','i1')
// 设置固有的属性
imgEle.src = 'longzhu.png'
// 添加到DOM树中，让浏览器展示出来
var d1Ele = document.getElementById('d1')
d1Ele.appendChild(imgEle)

　　　　　　•  1.创建节点，2.添加固有属性和标签文本值，

　　　　　　　3.指定位置添加标签

　　　　　　　　

// insertBefore 固定位置添加
​
// 创建标签
var aEle = document.createElement("a")
aEle.href = 'https:www.baidu.com'
aEle.innerText = '点我点我'
// 获取参考点标签
var d3Ele = document.getElementById('d3')
var s1Ele = document.getElementById('s1')
// 在d3标签内部，s1标签上方添加创建的a标签
d3Ele.insertBefore(aEle,s1Ele)

　　　　　　•  innerText和innerHTML的区别

　　　　　　　　

// 获取一个标签
var d2Ele = document.getElementById('d2');
// 仅仅能获取到d2标签的内部文本
d2Ele.innerText
// 不仅获取文本，标签页全部获取到
d2Ele.innerHTML
​
// 获取标签
var d2Ele = document.getElementById('d2');
// 设置内部文本
d2Ele.innerText = '哈哈'
d2Ele.innerHTML = '呵呵'
// 设置内部文本(文本中包含标签)
d2Ele.innerText = '<h1>我是h1</h1>' // 不认识html标签
d2Ele.innerHTML = '<h1>我是h1</h1>' // 能够识别html标签

 

　　　　　　•  获取值操作

　　　　　　　　

// 用于获取用户选择或输入的标签
input
select
textarea
​
// 获取值
demoEle.value
// 设置值
demoEle.value = '我改了'

　　　　　　•  class操作

　　　　　　　　

// 注意点：通过class获取到的数据是一个数组，需要通过索引拿到单个对象
​
// 根据class找到相应的标签对象
var c1Ele = document.getElementsByClassName('c1')[0]
​
// 获取该标签对象的class属性列表并移除背景红色
c1Ele.classList.remove('bg-red')
​
// 添加属性
c1Ele.classList.add('bg-green')
​
// 判断是否存在
c1Ele.classList.contains('bg-green')
c1Ele.classList.contains('bg-red')
​
// 有则删除，无则添加
c1Ele.classList.toggle('bg-green')

　　　　　　•  style样式操作

　　　　　　　　

// 修改高度样式
d1Ele.style.height = '200px'
// 修改宽度样式
d1Ele.style.width = '200px'
// 修改背景色样式
d1Ele.style.backgroundColor = 'blue'

　　  ☆ 事件绑定

　　　　　　♢ 两种绑定事件的方法

　　　　　　　　•  标签内直接调用相应事件函数

　　　　　　　　•  js代码自动查找标签并绑定事件

　　　　　　　　　　

<div class="bg-red " id="d1"></div>
<button id='b1' onclick='change();'>开关1</button>
<button id='b2'>开关2</button>
<script>
    // 标签直接绑定事件
    function change(){
        var d1Ele = document.getElementById('d1');
        d1Ele.classLict.toggle('bg-green');
    }
    // 通过JS代码绑定事件
    var b2Ele = document.getElementById('b2');
    b2Ele.onclick = ()=>{
        change();
    }

　　　　　　♢ 搜索框案例

　　　　　　　　　

<input type="text" value="苹果手机" id="i1">
    var i1Ele = document.getElementById('i1');
    i1Ele.onfocus = function (ev) {
        i1Ele.value = '';
        // 也可以直接用this
        this.value = ''
    };
    i1Ele.onblur = function (ev) {
        i1Ele.value = '苹果电脑';
        // 也可以直接用this
        this.value = '苹果电脑'
    }

　　　　　　♢ 计时器案例

　　　　　　　　　

// 全局变量
var t;
// 步骤1 
// 将当前时间填写到i1中
var now = new Date();
var i1Ele = document.getElementById('i1');
i1Ele.value = now.toLocalString();
​
// 步骤2(点开始，时间动起来)>>>(每隔一秒执行一次展示时间操作)
    // 将添加时间的功能封装成一个函数
function showTime(){
    var now = new Date();
    var i1Ele = document.getElementById('i1');
    i1Ele.value = now.toLocalString();
};
    // 页面一刷新先展示当前时间
showTime()
    // 找到开始按钮，绑定事件
var b1Ele = document.getElementById('b1');
b1Ele.onclick = function(){
    // 判断是否已经开启过定时器了
    if (!t){
        // t指代定时器
        t = setInterval(showTime,1000);
    }
}
​
// 步骤3(给停止按钮绑定事件，点击后清除定时器)
var b2Ele = document.getElementById('b1');
b2Ele.onclik = function(){
    // 问题来了，清除谁呢？需要有一个变量指代定时器
    clearInterval(t)；
}
​
// 步骤4(如果点击多次开始按钮，发现无法清除定时器)
// 判断定时器是否已开启

　　　　　　♢ 省市联动案例

　　　　　　　　　

data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
      // 先提前将两个标签对象查找到
    var pEle = document.getElementById('province');
    var cEle = document.getElementById('city');
    // 先展示省份信息
    for (var province in data){
        var proEle = document.createElement('option');
        proEle.innerText = province;
        pEle.appendChild(proEle)
    }
      // 绑定变化事件
    pEle.onchange = function () {
        // 获取对应的省信息
        var currentProvince = pEle.value;
        // 将之前的省对应的市清除
        cEle.innerHTML = '';
      
        // 添加默认的请选择项
        var newEle = document.createElement('option');
        newEle.innerText = '请选择';
        cEle.appendChild(newEle);
      
        // 获取当前省对应的市
        relCity = data[currentProvince];
        // 循环对应的市，添加到市对应的选择框中
        for(var i=0;i<relCity.length;i++){
            var cityEle = document.createElement('option');
            cityEle.innerText = relCity[i];
            cEle.appendChild(cityEle)
        }
    }