一、BOM操作

1.1介绍

BOM：Browser Object Model，浏览器对象模型。BOM的结构图：
=========================图===================================

image.png

从上图可以看出：

1）、DOM对象也是BOM的一部分
2）、window对象是BOM的顶层（核心）对象

需要注意的是

1）、再调用window对象的方法和属性时，可以省略window，例如：window.document.location可以简写成document.location
2）、全局变量也是window对象的属性，全局的函数是window对象的方法。

1.2对象history，navigator，screen（了解即可）。

1）、history对象包不包含浏览器的历史

history.back() //后退一页，等同于history.go(-1)
history.forward() //前进一页，等同于history.go(1)
history.go(0) //0是刷新
用的不多。因为浏览器中已经自带了这些功能的按钮：

2）、navigator对象包含了浏览器相关信息。

navigator.appName　　// Web浏览器全称
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

3）、可以用screen对象得到可用的屏幕宽读和高度

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

================page11.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>第一个页</p>
<a href="page22.html">点我进入下一页</a>
</body>
</html>


================page22.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>第二个页</p>
<a href="page33.html">点我进入下一页</a>
</body>
</html>


================page33.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function back() {
            window.history.back()
        }
    </script>
</head>
<body>
<p>第三个页</p>

<input type="button" value="点我进入上一页" onclick="back()">

</body>
</html>

1.3、location对象

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

location.href练习1：点击盒子，跳转页面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="div1">点我一下</div>
<script>
    var oDiv = document.getElementById('div1');
    oDiv.onclick = function () {
        window.location.href = 'https://www.cnblogs.com/linhaifeng';
    }
</script>
</body>
</html>

location.href练习2：3s后，自动跳转页面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div>这天下，本就是大争之世，孤的儿子，不仅要争，而且要争的光芒万丈</div>
<script>
    setTimeout(function () {
        location.href = 'https://www.cnblogs.com/linhaifeng';
    }, 3000)
</script>
</body>
</html>

location.href练习3：3s后让网页整个刷新

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div>这天下，本就是大争之世，孤的儿子，不仅要争，而且要争的光芒万丈</div>
<script>
    setTimeout(function () {
        location.reload();
    }, 3000)
</script>
</body>
</html>

1.4、弹出系统对话框

alert(1)是window.alert(1)的简写，应为他是window的子方法。
系统对话框有三种：

alert("egon警告你：人丑还不读书，是找不到女朋友的"); //不同浏览器中的外观是不一样的
confirm("你真的要这么做吗小伙子");  //兼容不好
prompt("输入用户名：");   //不推荐使用

示例

var x=confirm("你真到要这么做吗")
console.log(x)

var username=prompt("输入用户名：")
console.log(username);

1.5、打开关闭窗口

1）、open（‘url地址’，‘新窗口的位置_blank或则_self','新窗口的特征’）
window.open('http://w3school.com.cn','_blank','width=400,height=400')
2)、close（）关闭当前窗口
var x=window.open('http://www.baidu.com','_blank','width=400,height=400')
x.close()

1.6、浏览器窗口内部的高度和宽度

window.innerheight：浏览器窗口的内部高度
window.innerwidth：浏览器窗口的内部宽度

1.7、定时器

1）.setTimeOut()

只在指定时间后执行一次，通常用于延迟执行某方法或功能，

//定时器 异步运行
function say(){
    alert("hello");
}
//使用方法名字执行方法
var t1 = setTimeout(hello,1000);
var t2 = setTimeout("hello()",3000); //使用字符串执行方法
clearTimeout(t2); //去掉定时器

2）.setInterval()

在指定时间为周期循环执行，通常用于刷新表单，对于一些表单的假实时指定时间刷新同步，动画效果等。

//实时刷新时间单位为毫秒
var t3 = setInterval(say,3000); //调say这个函数，和把函数写在内部一样的效果
var t4 = setInterval('say()',3000);
var t4 = setInterval(function(){alert(123)},3000);

clearInterval(t3);
clearInterval(t4);

二、DOM操作

2.1介绍

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）,
DOM标准规定HTML文档中的每个成员都是一个节点(node)，HTML DOM树如下图
========================图===============================

image.png

2.2、查找节点

1）、直接查找

document.getElementById                 #根据ID获取唯一一个标签
document.getElementsByClassName   #根据class属性获取一系列标签
document.getElementsByTagName     #根据标签名获取一系列标签

2）、间接查找如下表

语法含义
childNodes 获取所有的子节点，除了元素还有文本等
children 获取所有元素子节点，不包含文本
parentNode 获取父节点
previousSibling 获取上一个兄弟节点，包含文本
previousElementSibling 获取上一个兄弟元素节点，不包含文本
nextSibling 获取下一个兄弟节点，包含文本
nextElementSibling 获取下一个兄弟元素节点，不包含文本
firstChild 获取第一个子节点，包含文本
firstElementChild 获取第一个子节点，不包含文本
lastChild 获取最后一个子节点，包含文本
lastElementChild 获取父元素最后一个元素节点。不包含文本

2.3、增加节点

1）、创建新节点

var divEle = document.createElement('div');

2）、追加一个子节点（放到最后）

somenode.appendChild(新的子节点)；

3）、插入一个子节点（插入到某个节点前）

somenode.insertBefore(新的子节点,某个节点);

2.4删除、替换节点

somenode.removeChild(要删除的节点)；
somenode.replaceChild(新的子节点，某个子节点)；

2.5、修改/设置节点属性

1）、获取文本节点的值：

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

2）、设置文本节点的值：

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

3）、attribute操作

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

4）、自带的属性还可以直接.属性名来获取和设置

imgEle.src
imgEle.src="..."

2.6、获取元素的值

适用于input，select，textarea标签。
var x=document.getElementById('input')
var y=document.getElementById('select')
var z=document.getElementById('textarea')

x.value
y.value
z.value

2.7、class操作

var x=document.getElementById('div1')

x.classList.remove('col1')  //删除
x.classList.add('col1')  //追加属性
x.classList.contains('col1')  //包含
x.classList.toggle('col1')  //切换

2.8、css操作

obj.style.backgroundColor="red"

JS操作css属性的规律：

1）、对于没有中横线都得CSS属性一般直接使用style.属性名即可。
如：

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2)、对含有中横线的CSS属性，将中横线后面的第一个字母换大写即可。
如：

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

2020-09-23 JS之BOM和 DOM