3、JS
莫欣悦
1、外部对象（由BOM和DOM提供的）
1、BOM 和 DOM
BOM：Browser Object Model 浏览器对象模型
将浏览器比喻成一个对象 window（网页初始化时自动创建的）
可以通过window对象操控浏览器中的内容
DOM：Document Object Model 文档对象模型
将HTML文档比喻成一个对象 - document（属于window一个属性）
2、window 对象（BOM模型）
1、作用
表示浏览器
window对象下的属性和方法在使用时，可以省略window直接去调用。
window.alert() ----> alert()
window.prompt() ----> prompt()
window.document ----> doucument
window.history ----> history
2、window中的对话框
1、警告框
window.alert() / alert()
2、输入框
window.prompt() / prompt()
3、确定框
window.confirm("") / confirm("")
点击"确定"，返回true，其他返回false
4、关闭
window.close()
3、window中的定时器
1、定时器的分类
1、周期性定时器
每间隔一段时间后，就执行一段程序，反复执行
2、一次性定时器
在指定的时间间隔后，只执行一次操作
2、周期性定时器
1、声明定时器
var ret = window.setInterval(fun,time);
fun:函数，需要周期性执行的操作，可以时匿名函数。
time：要间隔的时间周期，以毫秒为单位的数字
ret：反回已创建好的定时器对象
2、清除定时器
window.clearInterval(timer)
timer:要停止的定时器对象
3、一次性定时器
1、声明定时器
var ret = window.setTimeout(fun,time);
fun: 等待一定的时间要进行的操作
time：等待时长，毫秒单位
ret：创建好的定时器对象
2、清除定时器
clearTimeout(timer);
timer:已经创建好的一次性定时器对象
4、window中的属性
1、screen 属性
作用：获取客户端显示器的相关信息
属性: 1、width / height 获取屏幕分辨率
2、availWidth / availHeight 可用宽高
eg：window.screen.width
2、history 属性
作用：处理当前窗口所访问过的url地址门
属性和方法：
1、length,表示当前窗口所访问过的url数量
2、back() ： 后退
forward() : 前进
go(num) : 在当前页面的基础上前进或后退num步
num：正值前进，负值后退
3、location 属性
作用：表示浏览器上地址栏的信息
属性和方法
属性：href 表示当前窗口中正在浏览的网页地址
如果为href属性设置值的话，相当于实现了浏
览器跳转功能。
window.location.href =
"http://www.baidu.com"
方法：reload（）
重新加载当前网页，等同于刷新
4、navigator 属性
1、作用 封装了浏览器的相关信息
2、属性 userAgent：显示浏览器县官信息
5、document 属性（重点）
1、重点讲，下个。
2、document 对象 （DOM模型）
1、document 的概述
document对象，时DOM模型中的顶层对象，封装了所有的HTML元素相关的属性，方法以及时间，由于document是属于window对象的核心属性之一，所以不用声明在网页中可以直接使用。
网页在加载的时候，会在内存中形成一棵节点树（DOM树）,DOM树会封装网页上的所有的内容，网页上的每一个元素，每一个属性，每一段文本，都是DOM树上的一个独立的“节点”。
2、DOM所提供的操作
1、查找结点的操作方法
2、读取节点的信息
3、修改接待你的信息
4、删除节点
5、创建节点
注意：只要DOM树上的内容产生变化的话，网页也会一同变化。
3、DOM树上的节点的类型
1、元素节点 - 表示的是网页中的一个元素
2、属性节点 - 表示的是元素中的一个属性
3、文本节点 - 表示的是元素中的文本内容
4、注释节点 - 表示网页中的一个注释
5、文档节点 - 表示整个HTML文档
4、查找元素节点
1、通过元素id查找元素节点
前提：元素一定要具备id属性，否则无法查找。
var elem = document.getElementById(“元素ID”);
elem：对应的ID的元素在JS中的表现形式 - DOM元素/DOM对象
2、DOM对象属性：
1、innerHTML
修改 或 获取当前DOM对象的HTML文本。
elem.innerHTML;获取elem对应标签的内部内容。
elem.innerHTML = "内容"; 赋值
2、innerText
修改 或 获取当前DOM对象的普通文本。
区别：1、innerHTML赋值时加入代码可以被解析。
2、innerText 放入代码会被当成字符串。
3、只针对双标记有效。
3、value
该属性只针对表单控件，允许获取或设置表单控件的值。
elem.value 获取表单input的输入值。
elem.value = "内容"; 修改值
在DOM中，允许直接使用元素的ID进行元素的操作(低版本可能不支持)
<h1 id = "user">用户</h1>
user.value == document.getElementById("user");
5、读取节点的信息
1、节点的类型
属性：nodeType elem.nodeType
返回1： 元素节点
返回2： 属性节点
返回3： 文本节点
返回8： 注释节点
返回9： 文档节点
2、节点名称
属性：nodeName
元素节点 或 属性节点： 返回标签名或属性名
文本节点：返回 # text
文档节点：返回 # document
注释节点：返回 # comment
6、获取 或 设置 元素节点的属性
所有元素节点具备以下方法，用于操作属性：
1、getAttribute("attrName")
作用：获取指定属性的值
attrName：要获取的属性名称
返回值：attrName属性对应的值
2、setAttribute(attrName,attrValue)
作用：设置指定属性的值
attrName：要设置的属性名
attrValue:要设置的属性值
3、removeAttribute("attrName")
作用：将 attrName 属性从节点中删除出去。
<a href = "http://www.baidu.com" id = "a1">百度</a>
<button onclick = "fun1()">修改</button>
<script>
function fun1(){
var elem = document.getElementById("a1");
elem.innerHTML = "TMOOC";
elem.setAttribute("href","http://www.tmooc.cn");
console.log(elem.getAttribute("href"));
}
</script>
6、元素节点的样式
1、使用setAttribute() 设置属性值
相当于动态的为元素绑定类选择器
elem.setAttribute("class","类选择器");
2、使用元素的className 属性修改class的值
elem.className = "类选择器"
3、变相的使用内联方式设置样式属性（优先级高）
elem.style.css属性名 = 值；
eg: elem.style.color = "red";
注意： 如果css属性名中包含 “-”的话，“-”要取消，并且后面单词的首字符变大写。
eg：style-font-size ===》 elem.style.fontSize = "18px";
3、查询节点的方式
1、根据id查询
var elem = document.getElementById();
2、根据节点的层级关系查询节点
1、parentNode属性
返回当前节点的父节点元素
2、childNodes属性
返回当前节点的所有子元素数组。注意空格问题。
筛选元素节点：nodeType 判断节点类型。
3、children属性
返回当前节点的所有子元素数组（元素节点）
4、nextSibling
获取当前节点的下一个兄弟节点
5、nextElementSibling
获取当前节点的下一个兄弟节点（元素节点）
6、previousSibling
获取当前节点的上一个兄弟节点
7、previousElementSibling
获取当前节点的上一个兄弟节点（元素节点）
3、通过标签名查询节点 - 返回数组
1、document.getElementsByTagName("标签名");
整个文档内查找
2、elem.getElementsByTagName("标签名");
只在elem节点元素内查找
4、通过元素的name属性值查询节点
语法：document.getElementsByName("name属性值");
返回值：包含指定name属性值的元素的数组。
//功能实现：复选框的全选实现
<body>
<p>
<input type = "checkbox" id = "hobby" name = "gender" onclick = "check()" > 全选
<input type = "checkbox" name = "gender"> 篮球
<input type = "checkbox" name = "gender"> 排球
<input type = "checkbox" name = "gender"> 足球
<input type = "checkbox" name = "gender"> 棒球
</p>
<button onclick = "check()">验证</button>
<script>
function check(){
var all = document.getElementById("hobby");
var arr = document.getElementsByName("gender");
var isChecked = false;
console.log(all.checked);
if(all.checked){
for (var i=1;i<arr.length ;i++ )
{
arr[i].checked = true;
}
}
else{
for (var i=1;i<arr.length ;i++ )
{
arr[i].checked = false;
}
}
}
</script>
</body>
5、通过元素的class值查询节点
语法：document|elem getElementsByClassName("class");
返回：返回包含指定class属性值的所有元素
4、增加节点
1、创建元素节点
var elem = document.createElement("元素名");
eg：var div = document.createElement("div");
2、增加节点到网页上
1、document.body.appendChild(elem);
向body中追加elem的新元素。
2、parentNode.appendChild(elem);
向parentNode内部追加elem新元素
3、parentNode.insertBefore(newElem,oldElem);
将newElem元素插入到parentNode中的oldElem元素之前。
3、删除节点
在DOM中，删除接待你的行为只能由父元素发出。
parentNode.removeChild(elem);
删除 parentNode 中elem 元素。
类似资料：