前端之BOM和DOM

发表于 更新于 分类于 本文字数： 12k 阅读时长 ≈ 11 分钟

BOM与DOM概述

到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。

也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。

JavaScript分为 ECMAScript，DOM，BOM。

  • BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
  • DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。

BOM操作

1
2
3
4
5
6
7
8
9
10
11
12
13
# window对象
window对象指代的就是浏览器窗口

window.innerHeight  浏览器窗口的高度
900
window.innerWidth   浏览器窗口的宽度
1680

window.open('https://www.mzitu.com/','','height=400px,width=400px,top=400px,left=400px')
# 新建窗口打开页面 第二个参数写空即可 第三个参数写新建的窗口的大小和位置
# 扩展父子页面通信window.opener()  了解

window.close()  关闭当前页面

window子对象

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

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

screen对象（了解即可）

屏幕对象，不常用。

一些属性：

  • screen.availWidth - 可用的屏幕宽度
  • screen.availHeight - 可用的屏幕高度

history对象

1
2
3
window.history.back()  回退到上一页
window.history.forward()  前进到下一页
# 对应的就是你浏览器左上方的两个的箭头

location对象(掌握)

1
2
3
window.location.href	# 获取当前页面的url
window.location.href = url  # 跳转到指定的url
window.location.reload()  # 属性页面   浏览器左上方的小圆圈

弹出框

  • 警告框
  • 确认框
  • 提示框
1
2
3
4
5
6
7
8
9
10
alert('你不要过来啊！！！')
undefined

confirm('你确定真的要这么做吗?能不能有其他方式能够满足你...')
false
confirm('你确定真的要这么做吗?能不能有其他方式能够满足你...')
true

prompt('手牌号给我看一下','22号消费888')
"来宾三位"

计时器相关

  • 过一段时间之后触发(一次)
  • 每隔一段时间触发一次(循环)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
    function func1() {
        alert(123)
    }
    let t = setTimeout(func1,3000);  // 毫秒为单位 3秒之后自动执行func1函数

    clearTimeout(t)      // 取消定时任务  如果你想要清除定时任务 需要日前用变量指代定时任务


    function func2() {
        alert(123)
    }
    function show(){
        let t = setInterval(func2,3000);  // 每隔3秒执行一次
        function inner(){
            clearInterval(t)  // 清除定时器
        }
        setTimeout(inner,9000)  // 9秒中之后触发
    }
    show()
</script>

DOM操作

什么是DOM

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

HTML DOM树

img

DOM标准规定HTML文档中的每个成分都是一个节点(node)：

  • 文档节点(document对象)：代表整个文档
  • 元素节点(element 对象)：代表一个元素（标签）
  • 文本节点(text对象)：代表元素（标签）中的文本
  • 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
  • 注释是注释节点(comment对象)　

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

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

查找标签

  • 直接查找(必须要掌握)

    1
    2
    3
    document.getElementById           根据ID获取一个标签
    document.getElementsByClassName   根据class属性获取
    document.getElementsByTagName     根据标签名获取标签合集
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    """
    id查找
    类查找
    标签查找
    """
    # 注意三个方法的返回值是不一样的
    document.getElementById('d1')
    <div id="d1">…</div>

    document.getElementsByClassName('c1')
    HTMLCollection [p.c1]0: p.c1length: 1__proto__: HTMLCollection
          
    document.getElementsByTagName('div')
    HTMLCollection(3) [div#d1, div, div, d1: div#d1]
                       
                       
    let divEle = document.getElementsByTagName('div')[1]
    divEle
    <div>div>div</div>
    """
    当你用变量名指代标签对象的时候 一般情况下都推荐你书写成
    xxxEle
    	divEle
    	aEle
    	pEle
    """

    注意：

    涉及到DOM操作的JS代码应该放在文档的哪个位置。

  • 间接查找(熟悉)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    let pEle = document.getElementsByClassName('c1')[0]  # 注意是否需要索引取值

    pEle.parentElement  # 拿父节点
    <div id="d1">"div
        "<div>div>div</div><p class="c1">…</p><p>div>p</p></div>
    pEle.parentElement.parentElement
    <body>…</body>
    pEle.parentElement.parentElement.parentElement
    <html lang="en"><head>…</head><body>…</body></html>
    pEle.parentElement.parentElement.parentElement.parentElement
    null

    let divEle = document.getElementById('d1')
    divEle.children  # 获取所有的子标签
    divEle.children[0]
    <div>div>div</div>

    divEle.firstElementChild
    <div>div>div</div>

    divEle.lastElementChild
    <p>div>p</p>

    divEle.nextElementSibling  # 同级别下面第一个
    <div>div下面div</div>

    divEle.previousElementSibling  # 同级别上面第一个
    <div>div上面的div</div>

节点操作

创建节点

语法：

createElement(标签名)

示例：

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

添加节点

语法：

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

somenode.appendChild(newnode)；

把增加的节点放到某个节点的前边。

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

示例：

1
2
3
4
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

删除节点：

语法：

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

somenode.removeChild(要删除的节点)

替换节点

语法：

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

属性节点

获取文本节点的值：

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

设置文本节点的值：

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

attribute操作

1
2
3
4
5
6
7
8
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

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

练习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 """
 通过DOM操作动态的创建img标签
并且给标签加属性
 最后将标签添加到文本中
 """
 let imgEle = document.createElement('img')  # 创建标签
 imgEle.src = '111.png'  # 给标签设置默认的属性
 imgEle.username = 'jason'  # 自定义的属性没办法点的方式直接设置
 imgEle.setAttribute('username','jason')   # 既可以设置自定义的属性也可以设置默认的书写
 imgEle.setAttribute('title','一张图片')
 imgEle
 let divEle = document.getElementById('d1')
 divEle.appendChild(imgEle)  # 标签内部添加元素(尾部追加)
 
 
 """
 创建a标签
 设置属性
 设置文本
 添加到标签内部
 添加到指定的标签的上面
 """
 let aEle = document.createElement('a')
 aEle.href = 'https://www.mzitu.com/
 aEle.innerText = '点我有你好看!'  # 给标签设置文本内容
 let divEle = document.getElementById('d1')
 let pEle = document.getElementById('d2')
 divEle.insertBefore(aEle,pEle)  # 添加标签内容指定位置添加
 
 
 """
 额外补充
 appendChild()
 removeChild()
 replaceChild()
 	
 	
 setAttribute()  设置属性
 getAttribute()  获取属性
 removeAttribute()  移除属性
 """
 
 # innerText与innerHTML
 divEle.innerText  # 获取标签内部所有的文本
 divEle.innerHTML  # 内部文本和标签都拿到
 "div
         <a href="https://www.mzitu.com/">点我有你好看!</a><p id="d2">div&gt;p</p>
         <span>div&gt;span</span>
 "
 
 divEle.innerText = '<h1>heiheihei</h1>'  # 不识别html标签
 divEle.innerHTML = '<h1>hahahaha</h1>'  # 识别html标签

获取值操作

1
2
3
4
5
6
7
8
9
10
11
12
13
# 获取用户数据标签内部的数据
let seEle = document.getElementById('d2')

# 如何获取用户上传的文件数据
let fileEle = document.getElementById('d3')
fileEle.value  # 无法获取到文件数据
"C:\fakepath\02_测试路由.png"

fileEle.files
FileList {0: File, length: 1}0: File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}length: 1__proto__: FileList
      
fileEle.files[0]  # 获取文件数据
File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}

class、css操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let divEle = document.getElementById('d1')

divEle.classList  # 获取标签所有的类属性
divEle.classList.remove('bg_red')  # 移除某个类属性
divEle.classList.add('bg_red')  # 添加类属性
divEle.classList.contains('c1')  # 验证是否包含某个类属性
divEle.classList.toggle('bg_red')  # 有则删除无则添加



# DOM操作操作标签样式 统一先用style起手
let pEle = document.getElementsByTagName('p')[0]
pEle.style.color = 'red'
pEle.style.fontSize = '28px'
pEle.style.backgroundColor = 'yellow'
pEle.style.border = '3px solid red'

事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"""
达到某个事先设定的条件 自动触发的动作
"""
# 绑定事件的两种方式
<button onclick="func1()">点我</button>
<button id="d1">点我</button>

<script>
    // 第一种绑定事件的方式
    function func1() {
        alert(111)
    }
    // 第二种
    let btnEle = document.getElementById('d1');
    btnEle.onclick = function () {
        alert(222)
    }
</script>
"""
script标签既可以放在head内 也可以放在body内
但是通常情况下都是放在body内的最底部
"""

原生js事件绑定

我们直接写几个案例，看懂即可

开关灯案例

1
2
3
4
5
6
7
8
9
10
11
<div id="d1" class="c1 bg_red bg_green"></div>
    <button id="d2">变色</button>

    <script>
        let btnEle = document.getElementById('d2')
        let divEle = document.getElementById('d1')
        btnEle.onclick = function () {  // 绑定点击事件
            // 动态的修改div标签的类属性
            divEle.classList.toggle('bg_red')
        }
    </script>

  • input框获取焦点失去焦点案例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <input type="text" value="老板 去吗?" id="d1">

    <script>
        let iEle = document.getElementById('d1')
        // 获取焦点事件
        iEle.onfocus = function () {
            // 将input框内部值去除
            iEle.value = ''
            //  点value就是获取   等号赋值就是设置
        }
        // 失去焦点事件
        iEle.onblur = function () {
            // 给input标签重写赋值
            iEle.value = '没钱 不去!'
        }
    </script>

实时展示当前时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<input type="text" id="d1" style="display: block;height: 50px;width: 200px">
<button id="d2">开始</button>
<button id="d3">结束</button>

<script>
    // 先定义一个全局存储定时器的变量
    let t = null
    let inputEle = document.getElementById('d1')
    let startBtnEle = document.getElementById('d2')
    let endBtnEle = document.getElementById('d3')
    // 1 访问页面之后 将访问的时间展示到input框中
    // 2 动态展示当前时间
    // 3 页面上加两个按钮 一个开始 一个结束
    function showTime() {
        let currentTime = new Date();
        inputEle.value = currentTime.toLocaleString()
    }

    startBtnEle.onclick = function () {
        // 限制定时器只能开一个
        if(!t){
            t = setInterval(showTime,1000)  // 每点击一次就会开设一个定时器 而t只指代最后一个
        }
    }
    endBtnEle.onclick = function () {
        clearInterval(t)
        // 还应该将t重置为空
        t = null
    }
</script>

省市联动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<select name="" id="d1">
    <option value="" selected disabled>--请选择--</option>
</select>
<select name="" id="d2"></select>

<script>
    let proEle = document.getElementById('d1')
    let cityEle = document.getElementById('d2')
    // 先模拟省市数据
    data = {
        "河北": ["廊坊", "邯郸",'唐山'],
        "北京": ["朝阳区", "海淀区",'昌平区'],
        "山东": ["威海市", "烟台市",'临沂市'],
        '上海':['浦东新区','静安区','黄浦区'],
        '深圳':['南山区','宝安区','福田区']
    };
    // 选for循环获取省
    for(let key in data){
        // 将省信息做成一个个option标签 添加到第一个select框中
        // 1 创建option标签
        let opEle = document.createElement('option')
        // 2 设置文本
        opEle.innerText = key
        // 3 设置value
        opEle.value = key  // <option value="省">省</option>
        // 4 将创建好的option标签添加到第一个select中
        proEle.appendChild(opEle)
    }
    // 文本域变化事件  change事件
    proEle.onchange = function () {
        // 先获取到用户选择的省
        let currentPro = proEle.value
        // 获取对应的市信息
        let currentCityList = data[currentPro]
        // 清空市select中所有的option
        cityEle.innerHTML = ''
        // 自己加一个请选择
        let ss = "<option disabled selected>请选择</option>"
        // let oppEle = document.createElement('option')
        // oppEle.innerText = '请选择'
        // oppEle.setAttribute('selected','selected')
        cityEle.innerHTML = ss

        // for循环所有的市 渲染到第二个select中
        for (let i=0;i<currentCityList.length;i++){
            let currentCity = currentCityList[i]
            // 1 创建option标签
            let opEle = document.createElement('option')
            // 2 设置文本
            opEle.innerText = currentCity
            // 3 设置value
            opEle.value = currentCity  // <option value="省">省</option>
            // 4 将创建好的option标签添加到第一个select中
            cityEle.appendChild(opEle)
        }
    }
</script>
</body>
</html>