浅谈前端 | JavaScript之BOM & DOM操作

微信公众号搜索【程序媛小庄】，领取全套python全栈教程，还有小庄整理的不断更新的电子书、面试资料等你来拿哦~

前言

到目前位置，已经学习了JavaScript的简单语法，但是这些语法并没有和浏览器做任何交互，就是目前所学的语法无法控制网页的行为，如果想要控制网页的行为需要继续学习BOM和DOM，补充一句

BOM

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。

window对象

所有浏览器都支持window对象，window对象表示浏览器窗口，所有的JavaScript全局对象均会自动成为window对象的属性或者方法，包括在DOM操作中介绍的document也是window对象的属性。

下面列举了一些常用的window方法：

// 浏览器窗口的高度
window.innerHeight

//浏览器窗口的宽度
window.innerWidth

// 新建窗口打开页面
window.open('https://juejin.cn/user/298666235012894','','height=400px,width=400px,top=400px,left=400px')
/*
第一个参数：新建窗口打开的页面的网址
第二个参数：写空即可
第三个参数：新建窗口的位置和大小
*/

// 关闭当前页面
window.close()
复制代码

window的子对象

Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。

navigator对象

浏览器对象，通过这个对象可以判定用户使用的浏览器同时包含浏览器的相关信息。

// 浏览器的名称(window对象可以省略)
navigator.appName   
// "Netscape"

// 浏览器版本
window.navigator.appVersion  
//  "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"

// 表示当前是否是一个浏览器
navigator.userAgent;
//  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"

// 查看当前浏览器运行在哪个平台上
navigator.platform;
// "Win32"
复制代码

history对象

浏览历史对象，包含用户对当前页面的浏览历史，但是我发查看具体地址，可以简单的用来前进或后退一个页面。

//  回退到上一页
history.back();

//  前进到下一页
window.history.forward();
复制代码

location对象

用于获取当前页面的url地址，并把浏览器重定向到新的页面。

//  获取当前页面的url
location.href;

// 跳转到指定的url
window.location.href = '目标网址';

// 刷新页面，作用相当于浏览器上的刷新功能
window.location.reload();
复制代码

弹出框

可以在JavaScript中创建三种消息提示框，分别是警告框、确认框和提示框。

// 警告框: window.alter('弹出内容')
window.alert('warning!');

// 确认框： window.confirm('待确认的内容')
window.confirm('yes or no');  // 点击确定返回true,点击取消返回false

// 提示框： window.prompt('提示消息', '默认值')
window.prompt('是否保存密码', 'yes');  // 用户输入什么就返回什么

复制代码

计时相关

在JavaScript中可以在一定时间间隔之后执行代码，而不是调用函数就立刻执行。

setTimeout()

过一段时间之后触发一次且只触发一次。

// 语法格式： setTimeout(js代码, 毫秒)，表示多少毫秒之后自动执行js代码

function func() {
    alert('哈哈')
}
setTimeout(func,3000)  // 单位为毫秒，3s后自动执行func函数
复制代码

clearTimeout() – 取消定时任务

function func() {
    alert('哈哈')
}
let t = setTimeout(func,3000)  // 单位为毫秒，3s后自动执行func函数

clearTimeout(t)  // 取消定时任务，需要用变量指代取消的定时任务
复制代码

setInterval() – 循环触发任务

function func() {
    alert('哈哈')
}

function show() {
    let t = setInterval(func,3000);  // 毫秒为单位 3秒之后自动执行func函数
    function inner() {
        clearInterval(t)  // 清除定时器
    }
    setTimeout(inner,9000)  // 9s后触发inner函数
}
复制代码

DOM

DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。DOM是一套对文档内容进行抽象和概念化的方法，当网页被夹在时，浏览器会创建页面的文档对象模型。

DOM树

DOM规定HTML文档中的每一个元素都是一个节点(node)，如下图：

文档节点(document对象)代表整个文档；

元素节点(element对象)代表一个元素(标签)；

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

属性节点(attribute对象)：代表一个属性，元素（标签）才有属性；

注释是注释节点(comment对象)；

DOM操作的作用

• javascript可以通过DOM动态的创建HTML

• JavaScript 能够改变页面中的所有 HTML 元素

• JavaScript 能够改变页面中的所有 HTML 属性

• JavaScript 能够改变页面中的所有 CSS 样式

• JavaScript 能够对页面中的所有事件做出反应

DOM操作的基本流程

DOM操作的是标签，而一个HTML文档中的标签非常多，因此使用DOM对标签进行操作，基本遵循以下流程：

①先知道如何查找标签

②使用DOM对标签进行操作

③ DOM操作需要用关键字document开始

DOM操作 – 查找标签

直接查找

直接查找标签可以通过标签名，标签id，class属性进行查找。

// 查找得到的对象命名通常是：标签名Ele
pEles = document.getElementsByTagName('p');  // 根据标签的标签名查找，返回的是标签合集
pEle = pEles[0]  // 获取标签集合中的第一个

divEle = docunment.getElementByClassName('c1');  // 根据标签属性，获取的是标签集合
divEle = document.getElementById('d1');  // 根据标签的id查找，获取的是标签
复制代码

间接查找

间接查找可以根据标签之间的亲戚关系进行查找：

// 获取p标签的父节点
pEle.parentElement;

// 获取第一个子标签
divEle.firstElementChild
// 获取最后一个子标签
divEle.lastElementChild

// 同级别下面第一个标签
divEle.nextElementSibling  
// 上一个同级别的标签
divEle.previousElementSibling  
复制代码

DOM操作 – 节点操作

可以通过DOM操作动态的额创建标签，并且还可以给标签添加属性，但是这些都是临时的。

创建节点

// 语法： let/var 名字 = document.createElement('标签名');
let aEle = document.createElement('a');
复制代码

标签添加属性

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."
复制代码

添加节点

// 指定节点插入位置：somenode.insertBefore(newnode, somenode的子节点);
let divEle = document.getElementById('d1');
let pEle = document.getElementByClassName('p1');
divEle.insertBefore('aEle','pEle')  // 指定标签插入位置，将a标签插入到div内部的p标签前面
复制代码

innerText与innerHTML

// 获取标签内所有的文本
divEle.innerText;

// 内部文本和标签都拿到
divEle.innerHTML;

// 二者区别：
divEle.innerText = 'heiheihei'
"heiheihei"
divEle.innerHTML = 'hahahaha'
"hahahaha"

divEle.innerText = '<h1>heiheihei</h1>'  // 不识别html标签
"<h1>heiheihei</h1>"
divEle.innerHTML = '<h1>hahahaha</h1>'  // 识别html标签
"<h1>hahahaha</h1>"
复制代码

DOM操作 – 获取值操作

获取用户数据标签内部的数据

let seEle = document.getElementById('d2');
// 获取用户数据标签内部的数据
seEle.value;
复制代码

获取用户上传的文件数据

let fileEle = document.getElementById('d3');

// 使用.value无法直接获取文件数据
fileEle.value; 

// 使用下述方式获取用户上传的文件数据
fileEle.files;
fileEle.files[0]  # 获取文件数据
复制代码

DOM操作 – 标签属性class操作

获取标签所有的类属性

let divEle = document.getElementById('d1');
divEle.classList;
// DOMTokenList(3) ["c1", "bg_red", "bg_green", value: "c1 bg_red bg_green"]
复制代码

移除某个类属性

divEle.classList.remove('bg_red');
复制代码

添加类属性

divEle.classList.add('bg_red')
复制代码

验证标签是否包含某个类属性

divEle.classList.contains('c1');
// 会返回true 或者 false
复制代码

魔性操作，有该属性删除，没有则添加

divEle.classList.toggle('bg_red')
false
divEle.classList.toggle('bg_red')
true
divEle.classList.toggle('bg_red')
false
divEle.classList.toggle('bg_red')
true
复制代码

DOM操作 – CSS操作

DOM操作标签样式，统一用style.

let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
"red"
pEle.style.fontSize = '28px'
"28px"
pEle.style.backgroundColor = 'yellow'
"yellow"
pEle.style.border = '3px solid red'
"3px solid red"
复制代码

事件

HTML 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。

HTML标签绑定事件的两种方式

<!--第一种-->
// onclick就是鼠标点击按钮
<button onclick="func1()">点我</button>;
<script>
	 function func1() {
        alert(111)
    }  
</script>

<!--第二种-->
<button id="d1">点我</button>;
<script>
	let btnEle = document.getElementById('d1');
    btnEle.onclick = function () {
        alert(222)
    }
    
</script>
复制代码

原生js事件小案例

开关灯 – 颜色切换

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            height: 200px;
            width: 200px;
            border: 3px solid black;
            border-radius: 50%;
        }
        .green {
            background: green;
        }
        .red {
            background: deeppink;
        }

    </style>
</head>
<body>
    <div id='d1' class=" green red">
    </div>
    <button id="d2">变色</button>
    <script>
        let btnEle = document.getElementById('d2');
        let divEle = document.getElementById('d1');

        btnEle.onclick = function () {  // 绑定点击事件
        // 动态修改div标签的类属性
        divEle.classList.toggle('red')
        }

    </script>
</body>
复制代码

input框失去焦点

<body>
    username:<input type="text" value="用户名" id="i1">
    <script>
        // 先获得标签对象
        let iEle = document.getElementById('i1');
        // 为标签对象绑定事件 --- 获取焦点
        iEle.onfocus = function () {
            iEle.value = ''
        };
        
        // 失去焦点
        iEle.onblur = function () {
            iEle.value = '用户名'
        }
    </script>
</body>
复制代码

实时展示当前时间

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            display: block;
            height: 30px;
            width:200px;
        }
    </style>
</head>
<body>
    time:<input type="text" id="d1">
    <button id="d2">开始</button>
    <button id="d3">结束</button>
    <script>
        let t = null
        let inputEle = document.getElementById('d1');
        let startEle = document.getElementById('d2');
        let endEle = document.getElementById('d3');
        // 定义展示时间函数
        function showTime() {
            let currentTime = new Date();
            inputEle.value = currentTime.toLocaleString()
        }
        // 为开始按钮绑定开始计时时间

        startEle.onclick = function () {
            // if判断限定计时器只能开设一个
            if(!t){
                t = setInterval(showTime,1000)
            }

        };
        // 为停止按钮绑定结束计时
        endEle.onclick = function () {
            clearInterval(t);
            // 停掉计时器后，如果不将t设为空，将无法再次启动计时器，因为计时器只有一个
            t = null
        }
    </script>

</body>
复制代码

省市联动

<head>
<meta charset="UTF-8">
</head>
<body>
    省:<select name="" id="d1">
        <option value="" selected disabled>--请选择--</option>
    </select>
    市:<select name="" id="d2">
        <option value="" selected disabled>--请选择--</option>
    </select>

    <script>
        // 获得标签对象
        let proEle = document.getElementById('d1');
        let cityEle = document.getElementById('d2');

        // 模拟省市数据
        data = {
        "河北": ["廊坊", "邯郸",'唐山'],
        "北京": ["朝阳区", "海淀区",'昌平区'],
        "山东": ["威海市", "烟台市",'临沂市'],
        '上海':['浦东新区','静安区','黄浦区'],
        '深圳':['南山区','宝安区','福田区']
    };
        // for循环获取省
        for (let key in data) {
            // 将省信息做成一个个option标签，放入select标签中
            let optELe = document.createElement('option');

            // 设置文本
            optELe.innerText = key;
            // 设置value
            optELe.value = key;
            // 以上两步相当于<option value=key>key</option>

            //将创建你好的option标签放到省的select标签中
            proEle.appendChild(optELe)
        }
        // 模拟市数据
        // 文本域变化事件 change事件，实现的效果：选择省就出现对应的市信息
        proEle.onchange = function () {
            // 获取用户选择的省
            let currentPro = proEle.value;
            // 获取对应的市
            let currentCityList = data[currentPro];
            // 清空select市中的所有option
            cityEle.innerHTML = '';
            // for循环所有的市，放到第二个select标签中
            for (let i=0;i<currentCityList.length;i++){
                let currentCity = currentCityList[i];
                // 创建option标签
                let opEle = document.createElement('option');
                // 设置文本
                opEle.innerText = currentCity;
                // 设置value
                opEle.value = currentCity;
                // 将option标签放入第二个select中
                cityEle.appendChild(opEle)
            }

        }

    </script>
</body>
复制代码

结语

文章首发于微信公众号程序媛小庄，同步于掘金、知乎。

码字不易，转载请说明出处，走过路过的小伙伴们伸出可爱的小指头点个赞再走吧(╹▽╹)