JavaScript——BOM和DOM

什么是BOM

　　bom：浏览器对象模型

什么是DOM

　　dom：文档对象模型

BOM操作：

　　调用windows浏览器窗口

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

　　windows.navigator对象，可以获取浏览器相关信息

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

　　screen对象：获取屏幕信息

　　screen.navailWidth　　可用屏幕宽度

　　screen.availHeight　　可用屏幕高度

　　history包含浏览器历史，说是历史就是前进后退两个功能

　　history.forward()　　前进一页

　　history.back()　　返回上一页

　　location对象：获取信息

　　location.href　　获取url

　　location.href='URL'　跳转到指定页面

　　location》reload()　　重新加载页面

　　　弹出框：提示框，警告框，确认框

　　1、警告框：

　　　　alter('内容');

　　2、确认框：

　　　　confirm(‘确定吗？’)

　　　　用于用户验证或者接受一些信息，出现框后，需要榕湖确认，点击确认返回true，点击取消，返回值为false　　　　

　　3、提示框：

　　　　prompt("在框内输入信息")

　　　　提示框需要你输入内容，点击确定或者取消这个确认框才会取消。如果确认，返回值为输入的值，如果取消，那么返回值为null

　　计时：SetTimeout()

　　分为一次计时：

　　循环计时：

　　语法：

　　　　var t=setTimeout(“语句”,毫秒)

　　取消：

　　　　clearTimeout(t)　　括号内的值为设置技术定义的函数

　　循环指定周期：setlnterval()

　　语法：

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

　　取消：

　　　　clearInterval("设置循环的变量名")

DOM：对文档的内容进行抽象和概念化

　　

dom固定html文档中的乜咯成分都是一个节点（node）

　　文档节点：代表整个文档

　　元素节点：代表一个元素（标签）

　　文本节点（text对象）：代表元素（标签）中的文本

　　属性节点：代表一个属性，元素（标签）才有属性

　　JavaScript可以通过dom创建动态的html：

　　　　JavaScript可以改变页面中所有html元素；

　　　　JavaScript可以改变页面中所有html属性

　　　　JavaScript可以改变页面中所有css样式

　　　　JavaScript可以怼页面中所有时间做出反应

　　查找标签

 　　　　1、直接查找

　　　　　　document.getELementById　　根据id获取一个标签

　　　　　　document.getELementsByClassName　　根据class属性获取

　　　　　　document.getElementsByTagName　　根据标签获取标签合集

　　　　

 　　　　2、间接查找

　　　　　　parentElement　　父节点标签元素

　　　　　　children　　　　所有子标签

　　　　　　firstElementChild　　第一个子标签元素

　　　　　　lastElementChild　　最后一个子标签元素

　　　　　　netxElementSibling　　下一个兄弟标签元素

　　　　　　previousElementSibling　　下一个兄弟标签元素

节点操作：

　　创建节点：

　　createElement（标签名）

　　

　　添加节点：

　　语法：

　　追加一个子节点（作为最后的子节点）

　　somenode.appendChild(newnode);

　　把增加的节点放到某个节点的前面：

　　somenode.insertBefore(newnode，某个节点)　

　

　　删除节点：

　　语法：

　　获取要删除的元素，通过父元素调用该方法删除

　　somenode.removeChild(要删除的节点)

　　替换节点：

　　语法：

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

　　属性节点：

　　获取文本节点的值

　　设置文本节点的值：

　　获取值

　　语法：

　　　　elementNode.value

　　使用标签：

　　　　input

　　　　select

　　　　textarea

　　

　　class操作：

　　className 获取所有样式类名（字符串）

　　classList.remove(cls)　　删除指定类

　　classList.add(cls)　　添加类

　　classList.contains(cls)　　存在返回true，否在返回false

　　classList.toggle(cls)　　存在就删除，否则就添加

　　

　　常用事件：

　　两种绑定事件的方法：

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

　　　　2、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)
        }
    }