前端基础之BMO和DOM

一：基础概念

BOM：指浏览器模型使得JS能够与浏览器进行交流

DOM：指文档对象模型通过它可以访问HTML所有的文档元素

二：window窗口

【1】基础简介

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

　　（2）*如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

　　（3）*没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。

　　（4）所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

　　（5）全局变量是 window 对象的属性。全局函数是 window 对象的方法。

　　（6）接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。

【2】常用方法:

（1）window.innerHeight - 浏览器窗口的内部高度

（2）window.innerWidth - 浏览器窗口的内部宽度

（3）window.open() - 打开新窗口

（4）window.close() - 关闭当前窗口

【3】window的子对象

（1）navigator对象

作用：了解浏览器相关的信息

例如：

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

（2）history：

作用：对网页进行简单的前进或者后退

例如：

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

（3）location对象：

作用：获取当前的url地址或者进行url的重定向

例如：

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

（4）弹出框

作用：可以再JavaScript中创建消息框中创建警告确认提示

（1）警告框：

作用：当弹出警告框之后用户需要点击确定才能继续操作

例如：

（2）确认框：

作用：用户需要点击确认才能进行某个操作

例如：

（3）提示框：

作用：用户需要输入一定的文本内容点击确定才能继续操作

例如：

（4）计时相关:

作用：通过JS使经过一段时间才会执行相应的代码

setTimeout（）：

语法结构：

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

clearTimeout（）

作用：清楚某个计时器

  function foo() {
        alert(123)
    }

    function show() {
        var t = setInterval(foo,3000);
        function inner(){
            clearInterval(t)
        }
        setTimeout(inner,9000)
    }
    show()

使用示例

setInterval（）：

作用：有点类似于循环可以周期性循环调用某个函数或者语句

语法：

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

clearInterval（）：

作用：可以清除上述setinterval周期性调用某些函数或者语句

语法：

clearInterval(setinterval返回的ID值)

例如：

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

三：DOM

（1）作用：

JavaScript 可以通过DOM创建动态的 HTML：

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

【2】查找标签：

（1）直接查找：

例如：

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取
document.getElementsByTagName     根据标签名获取标签合集

PS:

（1）除了ID标签其余获取的对象都是存入在数组中

（2）间接查找：

例如：

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

【3】节点操作：

（1）创建节点：

语法：

var divEle = document.createElement("div");

（2）添加节点：

　　（1）appendChild：尾部追加一个子节点

　　（2）insertBefore：增加的节点放在某个节点之前

例如：

 var imgEle = document.createElement('img');
    var d1Ele = document.getElementById('d1');
    d1Ele.appendChild(imgEle)

（3）删除节点：

语法：

omenode.removeChild(要删除的节点)

（4）替换节点

语法：

somenode.replaceChild(newnode, 某个节点);

【4】属性节点：

（1）获取文本的属性：

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

PS：

（1）使用innerText只能获取内部文本

（2）使用innerHTML不但可以获取文本还可以获取该内部所有的标签

（2）设置文本节点的值

例如：

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

PS：

（1）如果使用innerText设置属性如果携带标签标签不会生效

（2）如果使用innerHTML设置文本属性如果携带标签标签会生效

（3）attribute操作

作用：

（1）为添加的属性赋值

（2）自带的属性可以通过.的方式进行取值赋值

例如：

【4】class操作

className  获取所有样式类名(字符串)
classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .c1 {
            height: 400px;
             400px;
            border-radius: 50%;
        }
        .bg_red {
            background-color: red;
        }
        .bg_green {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="c1 bg_red bg_green">

</div>
</body>
</html>

开关灯

【5】CSS操作：

关键字：style

例如：

obj.style.backgroundColor="red"

常用操作：

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

四：事件

（1）作用：达到某个条件执行某段代码

（2）常用事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

（3）触发事件的两种方式

　　（1）调用函数触发

　　（2）JS代码触发

例如：

<!--调用函数-->
<button onclick="func()">按钮1</button>

<!--JS代码操作-->
<button id="d1">按钮2</button>


<script>
    function func(){
        alert(123)
}

//JS代码操作
var bEle = document.getElementById('d1');
    bEle.onclick = function () {
        alert(456)
    }

onclick点击事件

<input type="text" value="mac笔记本" id="d1">


<script>
    inputEle = document.getElementById('d1');
    //设置焦点
    inputEle.onfocus = function () {
        inputEle.value = null
    };
    
    //失去焦点
    inputEle.onblur = function () {
        inputEle.value = '你好啊 欢迎下次再来！'
    }


</script>

焦点/失去焦点事件

<input type="text" id="d1">
<button id="d2">开始</button>
<button id="d3">结束</button>


<script>

    time = null;
    var inputEle = document.getElementById('d1');
    var b1Eel = document.getElementById('d2');
    var b2Ele = document.getElementById('d3');
    function showTime() {

        // 获取时间对象
        current_time = new Date();

        // 获取当前时间
        inputEle.value = current_time.toLocaleString()
    }




    b1Eel.onclick = function () {

        // 做条件判断主要是防止开启多个计时器 但是只能关闭一个
        if (! time){
             //判断上述变量是否为空 如果为空 则走代码块
             time = setInterval(showTime,1000)
        }


    };

    b2Ele.onclick = function () {
        clearInterval(time);

        // 当关闭的时候 将上述变量设置为空
        time = null
    }



</script>

计时器案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<select name="" id="d1">
    <option value="">---请选择---</option>
</select>
<select name="" id="d2">
    <option value="">---请选择---</option>
</select>


<script>
    var data = {
        "河北省": ["廊坊", "邯郸"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"],
        "上海": ["静安区", "黄浦区"],
        "深圳": ["南山区", "龙岗区"]
    };
    var seEle = document.getElementById('d1');
    var se2Ele = document.getElementById('d2');
    // 循环打印上述数据
    for (var i in data) {
        // 给上述select创建标签
        var optEle = document.createElement('option');
        // 将循环打印的城市名称存放进入元素中
        optEle.innerText = i;

        // 给选项赋值
        optEle.value = i;
        // 将创建好的标签加入上述选项中
        seEle.appendChild(optEle);
    }
    // change改变事件

    seEle.onchange = function () {
        // 获取省
        var currentPro = seEle.value;
        // 获取市
        var currentCityList = data[currentPro];
        // 设置每次循环打印之前将内部内容为空 防止与上次代码选择重合
        se2Ele.innerHTML = '';
        var opt1Ele = document.createElement('option');
        opt1Ele.innerText = '---请选择---';
        se2Ele.appendChild(opt1Ele);

        //     循环打印市
        for (let i = 0; i < currentCityList.length; i++) {
            var city = currentCityList[i];
            var optEle = document.createElement('option');
            // 添加的属性加入文本
            optEle.innerText = city;
            optEle.value = city;
            se2Ele.appendChild(optEle);
        }


    };
</script>


</body>
</html>

省市联动