前端-BOM与DOM

BOM（Browser Object Model）　　

　　浏览器对象模型
　　js代码操作浏览器

window对象

1.Window对象方法

alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。

open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。

setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

使用方法：

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

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

window.open("https://www.baidu.com/","","height=400px") 指定URL可以跳转页面
Window {parent: Window, opener: Window, top: Window, length: 0, frames: Window, …}

window.close() 一回车就关闭当前页面

2.navigator对象

对象方法

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

使用方法：

window.navigator.appName  
"Netscape"

window.navigator.appVersion 
"5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.106 Safari/537.36"

window.navigator.userAgent  
"Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.106 Safari/537.36"

window.navigator.platform  
"Win32"

3.history对象

对象方法

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

4.location对象

对象方法

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

弹出框

可以在 JavaScript 中创建三种消息框：

警告框：alert("你看到了吗？");
确认框：confirm("你确定吗？")
提示框：prompt("请在下方输入","你的答案")

计时器相关

过一段时间之后触发(一次)
每隔一段时间触发一次(循环)

<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（Document Object Model）　　

　　文档对象模型　　

　　js代码操作标签

DOM树

所有的标签都可以称之为是节点
JavaScript 可以通过DOM创建动态的 HTML：
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

DOM操作需要用关键字document

查找标签

直接查找

方法：

getElementById     返回ID
getElementsByClassName   返回数组
getElementsByTagName      返回名称

使用方法：

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>

间接查找

方法：

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementtSibling     // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

使用方法：

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>

节点操作

方法：

1.创建节点
createElement(标签名) ：创建一个指定名称的元素。
例：var  tag=document.createElement(“input")
            tag.setAttribute('type','text');

2.添加节点
追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)

把增加的节点放到某个节点的前边
somenode.insertBefore(newnode,某个节点);

3.删除节点
removeChild()：获得要删除的元素，通过父元素调用删除

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

　　setAttribute() 设置属性
　　getAttribute() 获取属性
　　removeAttribute() 移除属性

innerText与innerHTML

//    文本属性
//  1.innerText:不管你是赋值还是取值，只能识别纯文本
        var a1 = document.getElementsByClassName('c2')[0];
//        console.log(a1);
        //取值操作
        console.log(a1.innerText); //你好吗/
        console.log(a1.innerHTML); //你好吗/
        //赋值操作
        a1.innerText='Egon';
        a1.innerHTML='<a href="">hello</a>';
//  2.innerHtml:既可以识别纯文本，也可以识别标签
        var b1 = document.getElementsByClassName('c2')[1];
//        console.log(b1);
        //取值操作
        console.log(b1.innerText);
        console.log(b1.innerHTML);
        //赋值操作
        b1.innerText = 'lala';
        b1.inn
erHTML = '<input type="text">';

获取值操作

通过value获取数据

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

class操作

方法：

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

使用方法：

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')  # 验证是否包含某个类属性

divEle.classList.contains('c2')

divEle.classList.toggle('bg_red')  # 有则删除无则添加

css操作

方法：

pEle.style.color 字体颜色

pEle.style.fontSize  字体大小

pEle.style.backgroundColor 背景颜色

pEle.style.border 边框

使用方法：

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"

Event(事件)

　　　　达到某个事先设定的条件自动触发的动作

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

onfocus        元素获得焦点。               
onblur         元素失去焦点。               
onchange       域的内容被改变。             
onkeydown      某个键盘按键被按下。         
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

onselect       文本被选中。
onsubmit       确认按钮被点击

绑定事件的两种方式：
第一种方式：

<button onclick="func1()">点我</button>

    function func1() {
        alert(111)
    }

第二种方式：

<button id="d1">点我</button>

let btnEle = document.getElementById('d1');
    btnEle.onclick = function () {
        alert(222)

BOM（Browser Object Model）

window对象

1.Window对象方法

2.navigator对象

对象方法

3.history对象

对象方法

4.location对象

对象方法

弹出框

计时器相关

DOM（Document Object Model）

DOM树

查找标签

节点操作

innerText与innerHTML

获取值操作

class操作

css操作

Event(事件)

猜你喜欢

BOM（Browser Object Model）　　

DOM（Document Object Model）　　