Python全栈 Web（JavaScript DOM树、DOM对象、BOM对象）
外部对象：
BOM和DOM
BOM：
Browser Object Module
浏览器对象模型
将浏览器比喻成一个对象-window （网页初始化自动创建）
可以通过window对象操作浏览器
DOM：
Document Object Module
文档对象模型
将HTML文档比喻成一个对象-document（
是window的一个属性）
可以灵活的操作网页上的内容
window对象（BOM模型）：
表示浏览器
window下的属性和方法在使用时
可以省略window.直接去调用
例如：
window.alert() --> alert()
window.prompt()-->pormpt()
...
window中的对话框：
警告框:
window.alert()/alert()
输入框：
window.prompt()/prompt()
确认框：
window.confirm("")/confirm("")
如果点击
确定按钮 返回
True
其他操作全部返回
False
window中的定时器；
1.周期性定时器：
每间隔多长时间 就执行一段程序 反复执行
声明：
var ret = window.setInterval(fun, time)
fun:
函数 要周期执行的操作 可以是匿名函数
time：
要间隔的时间周期 以毫秒为单位
ret：
返回值 返回已经创建好的周期定时器对象
清除定时器：
window.clearInterval(obj)
obj：
要停止的周期定时器对象
2.一次性定时器；
在指定时间间隔后 只执行一次操作
声明：
var ret = setTimeout(fun, time);
fun:
函数 要执行的操作 可以是匿名函数
time：
要等待的时间 以毫秒为单位
ret：
返回值 已经创建好的一次性定时器对象
清除定时器：
clearTimeout(obj);
obj：要停止的一次性定时器对象
window中的属性：
1.screen属性：
获取客户端显示器的相关信息
screen的属性：
width、
height
获取屏幕分辨率
availwidth、avalheight
获取可用分辨率
2.history属性：
处理当前窗口所访问的url地址
history的属性方法：
属性：
length 表示当前窗口所访问过的
url数量
方法：
back() 后退
forward 前进
go(num)
在当前页面的基础上进行前几后后退num步
正数前进
负数后退
3.location属性；
表示浏览器上的地址栏信息
location的属性方法：
属性：
href：
表示当前窗口中正在浏览的
网页地址
如果为
href属性赋值的话，相当于
实现的浏览的跳转功能
方法：
reload()
重新加载当前网页
等同于刷新
4.navigator属性：
封装了浏览器的相关信息
navigator的属性：
userAgent：
显示浏览器相关信息
5.document属性
document 属性/对象（DOM模型）：
document 的概述：
document对象 是DOM模型中的顶层对象 封装了所有的和HTML元素相关的
属性 方法以及事件 由于 document是属于window对象的核心属性之一
所以不用声明就可以直接使用
DOM树：
网页在
加载的时候，会在
内存中形成一颗节点树（DOM树），
DOM树会封装网页上的所有内容
包括每一个元素、属性、文本
都是DOM树上的
一个独立节点
DOM所提供的操作：
查找节点的操作方法
读取节点的信息
修改节点的信息
删除节点
创建节点
注意；
只要DOM树上的节点发生变化 网页就会跟着变化（
实时更新）
DOM树上的节点类型：
元素节点：
表示在网页中的一个元素
属性节点：
表示的是元素中的一个属性
文本节点：
表示的是元素中的文本内容
注释节点；
表示网页上的一个注释
文档节点；
表示正HTML文档
查找元素节点：
通过元素的id查找元素节点
前提：元素一定要具备id属性，否则无法查找
方法：
var elem = document.getElementById("元素id");
elem：
返回对应的id的元素在JS中的表现形式-DOM元素/DOM对象
DOM对象的属性：
innerHTML
修改或获取当前DOM对象的HTML文本
innerText
修改或获取当前的DOM对象的普通文
*以上两个属性只对双标记有效
value：
该属性只针对表单控件 允许获取和设置表示控件的值
读取节点的信息：
节点类型；
属性：
nodeType
返回值；
1：元素节点
2：属性节点
3：文本节点
8：注释节点
9：文档节点
节点的名称：
属性：
nodeName
返回值：
元素节点或属性节点：
返回标签名或属性名
文本节点：
#text
文档节点：
#document
注释节点：
#comment
获取or设置元素节点的属性：
所有元素节点都会具备以下方法，用于操作属性：
方法：
获取指定属性的值：
getAttribute("attrName");
atttrName：
要获取的属性名称
返回值：
attrName属性对应的值
修改/设置指定属性的值：
setAttribute("attrName", "arrtValue");
attrName：
要设置的属性名称
attrValue：
要设置的属性值
删除属性：
removeAttribute("attrNmae")
将attrName从节点中删除
元素节点的样式：
使用setAttribute()设置class属性值
相当于动态的为元素绑定类选择器
elem.setAttribute("class", "类选择器")
使用元素的className属性修改class的值
elem.calssName = "类选择器";
变相的使用内联方式设置样式属性：
elem.style.css属性名 = "值";
注意：
如果属性名包含
“-”的话 ，需要省略
“-”并且后面一个
首字母大写
font-size:
elem.style.fintSize = "18px";
查询节点的方式：
根据id查询
document.getElementById();
根据节点的层级关系查询节点：
parentNode属性：
返回当前节点的父节点元素
childNodes属性：
返回当前节点的所有子元素的数组(返回所有节点)
children属性：
返回当前节点的所有子元素数组(只反回元素节点)
nextSibling属性：
返回当前节点的下一个兄弟节点
nextElementSibling属性：
返回当前节点的下一个元素兄弟节点
previousSibling
返回当前的上一个兄弟节点
previousElementSibling：
返回当前节点的上一个兄弟元素节点
注意：
元素节点 和 节点要区分
1.网页中创建一个 按钮,显示 "关闭"
2.点击按钮时,弹出确认框 "确认关闭网页吗"
3.如果点击 确定的话,则关闭网页
关闭网页:window.close();
4.否则什么都不操作即可
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
var timer;
function k(){
confirm("确定？");
}
function cls(){
var bool = confirm("确认关闭吗？");
if (bool){
window.close();
}
}
function showTime(){
timer = setInterval(function(){
var now = new Date();
console.log(now.toLocaleString());
}, 1000);
}
function stopTime(){
clearInterval(timer);
}
function gotobaidu(){
window.location.href = "http://www.tmooc.cn/"
}
</script>
</head>
<body>
<button onclick="k()">确认按钮</button>
<button onclick="cls()">关闭网页</button>
<button onclick="showTime()">周期定时器</button>
<button onclick="stopTime()">清除定时器</button>
<button onclick="gotobaidu()">href</button>
</body>
</html>
1.创建一个按钮
2.点击按钮时,弹出一个确认框
确认一下是否要关闭网页??
3.如果用户点击确定的话,5s钟之后再关闭网页
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
function time_clear(){
var bool = confirm("是否关闭网页");
alert("3秒后自动关闭")
if (bool){
setTimeout(function(){
window.close();
}, 3000);
}
}
</script>
</head>
<body>
<button onclick="time_clear()">一次性时钟</button>
</body>
</html>
1.创建一个网页
2.创建一个a标记,
链接地址为:http://www.baidu.com
文本:百度
3.创建一个按钮,文本为修改
4.点击按钮时,将 a 标记修改为
链接地址为:https://yq.aliyun.com/users/article?spm
文本:阿里云
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
function updA() {
var a = document.getElementById("anchor");
a.innerText = "阿里云";
a.setAttribute("href", "https://yq.aliyun.com/users/article?spm");
a.setAttribute("target", "_blank");
}
</script>
<a href="http://www.baidu.com" id="anchor">百度</a>
<button onclick="updA()">修改</button>
<script src="common.js"></script>
</body>
</html>