前端之BOM和DOM

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

DOM（Document Object Model)）是指文档对象模型，通过它，可以访问HTML文档的所有元素

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

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

window.innerHeight    浏览器窗口的内部高度
642
window innerWidth     错误案例
VM218:1 Uncaught SyntaxError: Unexpected identifier
window.innerWidth     浏览器窗口的内部宽度
770
window.open()         打开一个新窗口
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

window.close()    关闭当前窗口

window的子对象

navigator 对象（了解即可）对象包含了浏览器相关信息

navigator.appName     浏览器的名字
"Netscape"
navigator.appVersion  浏览器版本
"5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3704.400 QQBrowser/10.4.3587.400"
navigator.userAgent   浏览客户端信息，以后用在爬虫，重要
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3704.400 QQBrowser/10.4.3587.400"
navigator.platform    浏览器运行所在的操作系统
"Win32"

history 对象对象包含了浏览器历史

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

location 对象对象用于获得当前页面的地址（URL)，并把浏览器重定向到新的页面

location.href     获取当前页面地址
location.href="https://www.baidu.com"   跳转到指定页面
location.reload()  刷新当前页面   reload(刷新)

弹出框

可以在 js 中创建三种消息框：警告框，确认框，提示框

alert('你看到了吗？')   警告框
blog-common.min.js?v=4QhAuTQQoOm-lM3IPePkpoT4bSJvxH-elPKwr4VYOAI:1 alert: 你看到了吗？
true
alert(123)
blog-common.min.js?v=4QhAuTQQoOm-lM3IPePkpoT4bSJvxH-elPKwr4VYOAI:1 alert: 123
true
confirm('确认删除？')   确认框

true
confirm('确认删除？')

false
prompt('输入姓名')      提示框
"ssss"

定时器

setTimeout()

clearTimeout()

setInterval()

clearInterval()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script>
    function f(){
        alert('我是能弹的')
    }
    // var t = setTimeout(f,3000)  以毫秒为单位，用来及时多久后执行哪个命令
    // setTimeout(f, 3000)
    // clearTimeout(t)           清除定时器命令
    // var t = setInterval(f,2000)   反复执行计时命令
    // clearInterval(t)            清除反复执行定时命令
    function f1(){
        var t =setInterval(f,2000)
        function inner(){
            clearInterval(t)
        }
        setTimeout(inner,6000)
    }
    f1()
</script>
</head>
<body>

</body>
</html>

DOM

DOM：是一套对文档的内容进行抽象和概念化的方法

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

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

DOM 标准规定HTML文档中的每一成分都是一个节点（node):
文档节点（document对象）：代表整个文档
元素节点（element对象）：代表一个元素（标签）
文本节点（text对象）：代表元素（标签）中的文本
属性节点（attribute对象）：代表一个属性，元素（标签）才有属性
注释是注释节点（comment对象）

直接查找

document.getElementById('a1')        id选择器
<div class="a" id="a1">我是第一个div</div>
document.getElementsByClassName('b')  类选择器
HTMLCollection [div#b1.b, b1: div#b1.b]0: div#b1.blength: 1b1: div#b1.b__proto__: HTMLCollection
document.getElementsByClassName('b')[0]  数组索引取值
<div class="b" id="b1">…</div>
document.getElementsByTagName('a')    标签选择器
HTMLCollection [a]0: alength: 1__proto__: HTMLCollection
document.getElementsByTagName('a')[0]   数组索引取值
<a href>a标签</a>

间接查找

DOM 操作HTML代码，以下各类方法基本是基于这个HTML代码基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="a" id="a1">我是第一个div</div>
<div class="b" id="b1">我是第二个div
    <span class="c" id="c1">我是第二个div的span</span>
    <div class="d" id="d1">我是第二个div的div
    <a href="">a标签</a>
    </div>
</div>
<div class="e" id="e1">我是第三个div</div>
<input type="text" value="123">
</body>
</html>

var dEle=document.getElementById('c1')
undefined
dEle
<span class="c" id="c1">我是第二个div的span</span>
dEle.parentElement       注：查找父级dom
<div class="b" id="b1">"我是第二个div
    "<span class="c" id="c1">我是第二个div的span</span><div class="d" id="d1">…</div></div>
var paEle=dEle.parentElement
undefined
paEle
<div class="b" id="b1">…</div>
paEle.children        注：查找儿子dom不包括孙子
HTMLCollection(2) [span#c1.c, div#d1.d, c1: span#c1.c, d1: div#d1.d]0: span#c1.c1: div#d1.dlength: 2c1: span#c1.cd1: div#d1.d__proto__: HTMLCollection
paEle.firstChild    注：查找第一个儿子标签内容
"我是第二个div
    "
paEle.firstElementChild   注：查找第一个儿子dom
<span class="c" id="c1">我是第二个div的span</span>
paEle.lastElementChild    注：查找最后一个儿子
<div class="d" id="d1">…</div>
paEle.lastChild
#text
var cEle=dEle.nextElementSibling    注：查找当前标签的下一个兄弟
undefined
cEle
<div class="d" id="d1">…</div>
cEle.previousSibling
#text
cEle.previousElementSibling     注：查找当前元素的上一个兄弟
<span class="c" id="c1">我是第二个div的span</span>

添加创建节点

var img=document.createElement('img')      创建标签
undefined
img
<img>
img.src='1.jpg'        设置标签的默认属性
"1.jpg"
img
<img src="1.jpg">
var d1Ele=document.getElementById('a1')      获得标签对象
undefined
d1Ele.appendChild(img)     插入标签
<img src="1.jpg">

时间显示器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="a1">
<input type="button" value="开始" id="start">
<input type="button" value="暂停" id="stop">
<script>
    var t;
    var a1Ele=document.getElementById('a1');
    var stopEle=document.getElementById('stop');
    var startEle=document.getElementById('start')
    function showtime(){
        var date_obj=new Date();
        var now_time=date_obj.toLocaleString();
        a1Ele.value=now_time;
    }
    startEle.onclick=function(){
        if(!t){
            t=setInterval(showtime,1000)
        }
    }
    stopEle.onclick=function(){
        clearInterval(t)
        t=''
    }

</script>
</body>
</html>

搜索框

onfocus 元素获得焦点。 // 练习：输入框

onblur 元素失去焦点。应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="a1" value="请输入" onfocus="foo()" onblur="fool()">
    <script>
        var a1Ele=document.getElementById('a1')
        function foo(){
            var val=a1Ele.value
            if(val=='请输入'){
                a1Ele.value=''
            }
        }
        function fool(){
            var val=a1Ele.value
            if(val==''){
                a1Ele.value='请输入'
            }
        }
    </script>
</body>
</html>

var d1Ele=document.getElementById('b1')      获取标签对象
undefined
d1Ele
<div class="b" id="b1">"我是第二个div
    "<span class="c" id="c1">我是第二个div的span</span><div class="d" id="d1">…</div></div>
var imgEle=document.createElement('img')    创建标签
undefined
imgEle
<img>
imgEle.src='1.jpg'    设置标签的默认属性
"1.jpg"

imgEle
<img src="1.jpg">
var d1Ele=document.getElementById('a1')
undefined
d1Ele.appendChild(imgEle)    插入子标签
<img src="1.jpg">
var d1Ele=document.getElementById('b1')
undefined

d1Ele.appendChild(imgEle)
<img src="1.jpg">
var c1Ele=document.getElementById('c1')
undefined
d1Ele.insertBefore(imgEle,c1Ele)    插入指定位置的标签
<img src="1.jpg">

imgEle.setAttribute("name","val")    设置标签属性
undefined
imgEle
<img src="1.jpg" name="val">

d1Ele
<div class="b" id="b1">"我是第二个div
    "<img src="1.jpg" name="val"><span class="c" id="c1">我是第二个div的span</span><div class="d" id="d1">…</div></div>
d1Ele.removeChild(imgEle)        移除子标签
<img src="1.jpg" name="val">
d1Ele.replaceChild(imgEle,c1Ele)  替换标签，第一个参数是新标签，第二个参数是要被替换的标签
<span class="c" id="c1">我是第二个div的span</span>
d1Ele
<div class="b" id="b1">"我是第二个div
    "<img src="1.jpg" name="val"><div class="d" id="d1">…</div></div>

var a1Ele=document.getElementById('a1')     获取标签对象
undefined
a1Ele
<div class="a" id="a1">我是第一个div</div>
a1Ele.innerText     获取标签文本内容
"我是第一个div"
a1Ele.innerText='修改标签内容'    设置修改文本内容
"修改标签内容"
a1Ele.innerHTML    如下解释
"修改标签内容"
var b1Ele=document.getElementById('b1')
undefined
b1Ele
<div class="b" id="b1">"我是第二个div
    "<span class="c" id="c1">我是第二个div的span</span><div class="d" id="d1">…</div></div>
b1Ele.innerText                获取标签文本内容
"我是第二个div 我是第二个div的span
我是第二个div的div a标签"
b1Ele.innerHTML      获取当前标签底下的所有内容，
"我是第二个div
    <span class="c" id="c1">我是第二个div的span</span>
    <div class="d" id="d1">我是第二个div的div
    <a href="">a标签</a>
    </div>
"
a1Ele.innerText='<h1>111</h1>'     相当于对标签赋值，修改内容
"<h1>111</h1>"
a1Ele.innerHTML='<h1>111</h1>'     设置标签内容，并执行样式
"<h1>111</h1>"

注：innerText 只对 文本内容 进行操作处理，  innerHTML，不仅可操作文本内容，还操作当前标签下所有的 HTML 代码

var b1Ele=document.getElementById('b1')
undefined
b1Ele
<div class="b b12 b13" id="b1">…</div>
b1Ele.classList      获取所有的 class 属性值
DOMTokenList(3) ["b", "b12", "b13", value: "b b12 b13"]
b1Ele.classList.remove('b12')   移除属性值
undefined
b1Ele
<div class="b b13" id="b1">…</div>
b1Ele.classList.add('b14')      添加属性值
undefined
b1Ele
<div class="b b13 b14" id="b1">…</div>
b1Ele.classList.contains('b')   判断值是否存在
true
b1Ele.classList.toggle('b')     toggle（）,表示如果存在传的这个值，就删除，不存在就添加
false                           这里存在就给删除了
b1Ele
<div class="b13 b14" id="b1">…</div>
b1Ele.classList.toggle('b')     这里不存在就添加上
true
b1Ele
<div class="b13 b14 b" id="b1">…</div>

b1Ele.style.backgroundColor="red"   设置CSS样式属性
"red"
var a1Ele=document.getElementById('a1')
undefined
a1Ele.style.backgroundColor='green'
"green"

使用 JQ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--写 JQ 代码一定要引入 jquery.js 文件-->
    <script src="jquery.js"></script>
</head>
<body>

</body>
</html>

toggle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #a1{
            height: 400px;
            width: 400px;
        }
        .red{
            background: red;
        }
        .green{
            background: green
        }
    </style>
</head>
<body>
<div id="a1" class="red green"></div>
</body>
</html>

对象

Web前端之 BOM 和 DOM

前端之BOM和DOM