目录
1.外部对象
1.BOM 和 DOM
BOM:Browser Object Model
浏览器对象模型
将浏览器比喻成一个对象-window(网页初始化时自动创建的),可以通过 window对象操控浏览器中的内容
DOM:Document Object Model
文档对象模型
将HTML文档比喻成一个对象 - document(属于window的一个属性)，可以灵活的操控网页上的内容
2.window 对象(BOM模型)
1.作用
表示浏览器
window对象下的属性和方法在使用时，可以省略window.直接去调用
ex:
window.alert() --> alert()
window.prompt() --> prompt()
window.document --> document
window.history --> history
2.window中的对话框
1.警告框
window.alert() / alert()
2.输入框
window.prompt() / prompt()
3.确认框
window.confirm("") / confirm("")
点击 "确定" 按钮的话，返回 True 其余所有操作，都返回false
练习：
1.网页中创建一个 按钮，显示"关闭"
2.点击按钮时，弹出确认框"确认关闭网页吗"
3.如果点击确定的话，则关闭网页
关闭网页: window.close();
4.否则什么都不操作即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
function testConfirm(){
if(confirm("确认关闭网页吗")){
close();
}
}
</script>
<button onclick="testConfirm()">关闭</button>
</body>
</html>3.window中的定时器
1.定时器的分类
1.周期性定时器
每间隔一段时间后，就执行一段程序，反复执行
2.一次性定时器
在指定的时间间隔后，只执行一次操作
2.周期性定时器
1.声明定时器
var ret = setInterval(fun,time);
fun:函数,要周期性执行的操作，可以是匿名函数
time:要间隔的时间周期,以毫秒为单位的数字
ret:返回已创建好的定时器对象
2.清除定时器
window.clearInterval(timer)
timer: 要停止的定时器对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
// 保存创建好的定时器对象
var timer;
// 每隔1s打印当前时间
function showTime(){
timer = setInterval(function(){
var now = new Date();
console.log(now.toLocaleString());
},1000);
}
// 暂停定时器(清除)
function stopTime(){
clearInterval(timer);
}
</script>
<button onclick="showTime()">显示时间</button>
<button onclick="stopTime()">暂停</button>
</body>
</html> 3.一次性定时器
1.声明定时器
var ret = setTimeout(fun,time);
fun:等待一定时间后要执行的操作
time:要等待的时长，以ms为单位
ret:创建好的定时器对象
2.清除定时器
clearTimeout(timer);
timer:已经创建好的一次性定时器对象
练习：
1.创建一个按钮
2.点击按钮时，弹出一个确认框
确认一下是否要关闭网页??
3.如果用户点击确定的话，5s钟之后再关闭网页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
function closePage(){
if(confirm("确认关闭网页吗")){
setTimeout(function(){
close();
},5000);
}
}
</script>
<button onclick="closePage()">关闭</button>
</body>
</html>4.window中的属性
1.screen 属性
作用：获取客户端显示器的相关信息
属性：
1.width / height
获取屏幕分辨率
2.availWidth / availHeight
可用宽度和可用高度
2.history 属性
1.作用:处理当前窗口所访问过的url地址们
2.属性&方法：
1.属性：length,表示当前窗口所访问过的url数量
2.方法：
1.back():后退
2.forward():前进
3.go(num)
在当前页面的基础上前进或后退num步
num:
取值为正，前进
取值为负，后退
3.location 属性
1.作用
表示浏览器地址栏的信息
2.属性&方法
1.属性：href
表示当前窗口中正在浏览的网页地址
如果为href属性设置值的话，相当于实现了浏览器跳转的功能
location.href = www.baidu.com
2.方法：reload()
从新加载当前网页，等同于刷新操作
4.navigator 属性
1.作用
封装了浏览器的相关信息
2.属性
userAgent:显示浏览器相关信息
5.document 属性(重点)
2.document 对象(DOM模型)
1.document 的概述
document对象，是DOM模型中的顶层对象，封装了所有和HTML元素相关的属性，方法以及事件.
由于document是属于window对象的核心属性之一，所以不用声明在网页中就可以直接使用
网页在加载的时候，会在内存中形成一颗节点树(DOM树).DOM树会封装网页上所有的内容.
网页上的每一个元素，每一个属性，每一段文本，都是DOM树上的一个独立的"节点"
DOM所提供的操作:
1.查找节点的操作方法
2.读取节点的信息
3.修改节点的信息
4.删除节点
5.创建节点
注意：只要DOM树上的内容产生变化的话，网页也会一同变化
DOM树上的节点的类型:
1.元素节点 - 表示的是网页中的一个元素
2.属性节点 - 表示的是元素中的一个属性
3.文本节点 - 表示的是元素中的文本内容
4.注释节点 - 表示网页中的一个注释
5.文档节点 - 表示整个HTML文档
2.查找元素节点
1.通过元素id查找元素节点
前提：元素一定要具备id属性，否则无法查找
方法:
var elem = document.getElementById("元素ID");(低版本支持)
elem:对应的ID的元素在JS中的表现形式 - DOM元素/DOM对象
变简介的方法
1.在DOM中，允许直接使用元素的ID进行元素的操作(低版本浏览器不支持)
2.放进函数里
function $(id){
return document.getElementById(id);
}
DOM对象属性：
1.innerHTML
修改 或 获取当前DOM对象的HTML文件
2.innerText
修改 或 获取当前DOM对象的普通文本
注意：以上两个属性只针对双标记有效
3.value
该属性只针对表单控件，允许获取或设置表单控件的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<p>
用户名称:<input type="text" id="uname">
</p>
<p>
<button onclick="getUname()">获取/设置文本框的值</button>
</p>
<script>
function getUname(){
// 通过id=uname 得到input元素
var uname = document.getElementById("uname");
// 获取 或 设置 uname 的 value值
console.log(uname.value);
// 为 uname 的 value 属性赋值
uname.value = "动态设置的文本"
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
用户名称: <input type="text" id="uname">
<button onclick="checkUname()">验证</button>
</p>
<div id="uname-show"></div>
<script src="common.js"></script>
<script>
/*function checkUname(){
//1.获取 id 为 uname 的文本框的 value 值
var val = document.getElementById("uname").value;
var uShow = document.getElementById("uname-show");
//2.判断 value 值得长度范围,并将结果显示在 id为 uname-show 的 div 元素中
if(val.length >= 6 && val.length <= 18){
uShow.innerText = "通过";
}else{
uShow.innerText = "用户名称不规范";
}
}*/
function checkUname(){
//1.获取 id 为 uname 的文本框的 value 值
var val = $("uname").value;
//2.判断 value 值得长度范围,并将结果显示在 id为 uname-show 的 div 元素中
if(val.length >= 6 && val.length <= 18){
$("uname-show").innerText = "通过";
}else{
$("uname-show").innerText = "用户名称不规范";
}
}
</script>
</body>
</html>3.读取节点的信息
1.节点的类型
属性：nodeType
值：
返回1：元素节点
返回2：属性节点
返回3：文本节点
返回8：注释节点
返回9：文档节点
2.节点名称
属性：nodeName
元素节点 或 属性节点：返回标签名或属性名
文本节点：返回 #text
文档节点：返回 #document
注释节点：返回 #comment
4.获取 或 设置 元素节点的属性
所有元素节点具备以下方法，用于操作属性：
1.getAttribute("attrName")
作用：获取指定属性的值
attrName:要获取的属性名称
返回值：attrName属性对应的值
2.setAttribute("attrName","attrValue")
作用：设置指定属性的值
attrName:要设置的属性名
attrValue:要设置的属性值
3.removeAttribute("attrName")
作用:将 attrName 属性从节点中删除出去
练习：
1.创建一个网页
2.创建一个a标记，
链接地址为:http://www.baidu.com
文本：百度
3.创建一个按钮，文本为修改
4.点击按钮时，将a标记修改为
链接地址为：http://www.tmooc.cn
文本：TMOOC
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu.com" id="anchor">百度</a>
<button onclick="btnChange()">变</button>
<script src="common.js"></script>
<script>
function btnChange(){
var a = $("anchor");
a.innerHTML = "TMOOC";
a.setAttribute("href","http://www.tmooc.cn");
}
</script>
</body>
</html>5.元素节点的样式
1.使用setAttribute() 设置 class 属性值
相当于动态的为元素绑定类选择器
elem.setAttribute("class","类选择器")
2.使用元素的 className 属性修改 class 的值
elem.className = "类选择器"
3.变相的使用内联方式设置属性
elem.style.css属性名 = 值;
elem.style.color = "red";
注意：
如果css属性名中包含"-"的话，"-"要取消，并且后面的单词的首字符变大写
elem.style.fontSize = "18px";
//设置 elem 元素有边框的颜色为红色
elem.style.borderRightColor:"red";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
#main{
width: 300px;
height: 200px;
background: red;
}
.hide{
display: none;
}
</style>
</head>
<body>
<script src="common.js"></script>
<div id="main">这是测试div</div>
<button onclick="btnRadius()">边框倒角</button>
<button onclick="btnShow()">显示</button>
<button onclick="btnHide()">隐藏</button>
<script>
function btnRadius(){
$("main").style.borderRadius = "50%";
}
function btnHide(){
// 动态的为 #main 元素绑定 class 属性，值为 hide
// $("main").setAttribute("class","hide");
$("main").className="hide"
}
function btnShow(){
//动态的将 #main 的 class 属性值清除
// $("main").removeAttribute("class");
$("main").className = "";
}
</script>
</body>
</html>3.查询节点的方式
1.根据id查询
document.getElementById();
2.根据节点的层级关系查询节点
1.parentNode属性
返回当前节点的父节点元素
2.childNodes属性
返回当前节点的所有子元素数组
3.chiledren属性
返回当前节点的所有子元素数组(元素节点)
4.nextSibling
获取当前节点的下一个兄弟节点
5.nextElementSibling
获取当前节点的下一个元素兄弟节点
6.previousSibling
获取当前节点的上一个兄弟节点
7.previousElementSibling
获取当前节点的上一个兄弟元素节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="main">
<p id="pp">这是main中的p</p>
</div>
<div id="poem">
<h3 id="title">静夜思</h3>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</div>
<button onclick="getParent()">获取pp的父元素</button>
<button onclick="getChild()">获取poem的子元素</button>
<button onclick="getChildren()">获取poem的子元素</button>
<button onclick="getNextSib()">获取h3的下一个兄弟节点</button>
<script src="common.js"></script>
<script>
function getNextSib(){
//获取下一个兄弟节点
//var elem = $("title").nextSibling;
//获取下一个元素兄弟节点
var elem=$("title").nextElementSibling;
console.log(elem);
}
function getChildren(){
var arr=$("poem").children;
console.log(arr);
}
function getChild(){
var poem = $("poem");
var arr = poem.childNodes;
//循环遍历arr中的每个元素
for(var i=0;i<arr.length;i++){
// console.log(arr[i].nodeType + ":" + arr[i].nodeName);
// 将元素节点过滤出来
if(arr[i].nodeType == 1){
arr[i].style.color="red";
}
// arr[i].style.color = "red";
}
}
function getParent(){
var pp = $("pp");
var parent = pp.parentNode;
console.log(parent);
}
</script>
</body>
</html>