前戏
到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。
也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。
JavaScript分为 ECMAScript，DOM，BOM。
BOM（Browser Object Model）是指浏览器窗口对象模型，顶级对象是window。
DOM （Document Object Model）是指文档对象模型，并非一个对象。
window、document都是一个实例对象，他们都属于Object，表示浏览器中打开的窗口。
Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。
window对象
window 对象表示一个浏览器窗口。
在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写 document，而不必写 window.document
同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 Window.alert()。
alert() 显示带有一段消息和一个确认按钮的警告框。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
几个例子
// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);
// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);
window的子对象
navigator对象
浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navagator.platform // 浏览器运行所在的操作系统
screen对象
屏幕对象，不常用。
history对象
浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以用来前进或后退一个页面。
history.forward() // 前进一页
history.back() // 后退一页
history.go(n) // 前进n页
location对象
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面
DOM
DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。
它是一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改。简单来讲，DOM是一种API（应用编程接口）。
JavaScript对DOM进行了实现，对应于JavaScript中的document对象，通过该对象对DOM文档进行程序级别的控制。
DOM标准规定HTML文档中的每个成分都是一个节点(node)：
- 文档节点(document对象)：代表整个文档
- 元素节点(element 对象)：代表一个元素（标签）
- 文本节点(text对象)：代表元素（标签）中的文本
- 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
- 注释是注释节点(comment对象)
查找标签
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取
document.getElementsByTagName 根据标签名获取标签合集
间接查找
parentNode 父节点
childNodes 所有子节点
firstChild 第一个子节点
lastChild 最后一个子节点
nextSibling 下一个兄弟节点
previousSibling 上一个兄弟节点
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
document对象的属性和操作
属性节点
|
attributes |
获取所有标签属性 |
| getAttribute() | 获取指定标签属性 |
| setAttribute() | 设置指定标签属 |
| removeAttribute() | 移除指定标签属 |
|
var s = document.createAttribute("age") s.nodeValue = "18" |
创建age属性 设置属性值为18
|
文本节点
| innerText | 所有的纯文本内容，包括子标签中的文本 |
| outerText | 与innerText类似 |
| innerHTML | 所有子节点(包括元素、注释和文本节点) |
| outerHTML | 返回自身节点与所有子节点 |
| textContent | 与innerText类似，返回的内容带样式 |
| data | 文本内容 |
| length | 文本长度 |
| createTextNode() | 创建文本 |
| normalize() | 删除文本与文本之间的空白 |
| splitText() | 分割 |
| appendData() | 追加 |
| deleteData(offset,count) | 从offset指定的位置开始删除count个字符 |
| insertData(offset,text) | 在offset指定的位置插入text |
| replaceData(offset,count,text) | 替换，从offset开始到offscount处的文本被text替换 |
| substringData(offset,count) | 提取从ffset开始到offscount处的文本 |
样式操作
操作class类
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类 classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
指定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
事件
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 //练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
常用的那些
操作内容
innerText 文本
innerHTML HTML内容
value 值
事件示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件示例</title>
<style>
.c1 {
height: 300px;
width: 300px;
background-color: yellow;
}
</style>
<script>
function dbClick() {
alert(123);
}
function f1(ths) {
console.log(ths);
ths.setAttribute("placeholder", "");
}
function f2(ths) {
ths.setAttribute("placeholder", "霸王洗发水");
}
</script>
</head>
<body>
<div class="c1" ondblclick="dbClick();"></div>
<input type="text" placeholder="霸王洗发水" onfocus="f1(this);" onblur="f2(this);">
</body>
</html>
文档节点的增删改查
增
createElement(name) 创建节点（标签） appendChild() 末尾添加节点，并返回新增节点
insertBefore() 参照节点之前插入节点，两个参数：要插入的节点和参照节点
insertAfter() 参照节点之后插入节点，两个参数：要插入的节点和参照节点
删
查找到要删除的元素
获取它的父元素
使用removeChild()方法删除
改
第一种方式:
使用上面增和删结合完成修改
第二种方式:
使用setAttribute();方法修改属性
使用innerHTML属性修改元素的内容
查
使用之前介绍的方法.
跑马灯示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑马灯示例</title>
<script>
function run() {
// 找到id值为i1的标签
var ele = document.getElementById("i1");
// 获取标签的文本内容，存到str变量
var str = ele.innerText;
// 把字符串第一位拿出来
var firstStr = str.charAt(0);
// 拼到最后组成新的字符串
var newT = str.slice(1) + firstStr;
// 赋值给标签的文本内容
ele.innerText = newT;
}
var timmer = setInterval(run, 1000);
clearInterval(timmer);
</script>
</head>
<body>
<h1 id="i1">老铁666!</h1>
</body>
</html>
DOM文档结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM文档结构</title>
</head>
<body>
<h1>DOM文档结构</h1>
<a href="https://www.sogo.com">搜狗一下</a>
<div class="c1">
000
<!--这是注释-->
111
<div>
<p id="p1">P标签</p>
</div>
222
</div>
<div class="c1">c1</div>
<div class="c2">c2</div>
</body>
</html>
class属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class属性操作</title>
<style>
.c1 {
height: 300px;
width: 300px;
border-radius: 150px;
background-color: red;
}
.c2 {
background-color: yellow;
}
</style>
<script>
function change() {
// 找标签，改背景颜色
var d1 = document.getElementById("d1");
// d1.classList.add("c2"); // 这个只能加c2
d1.classList.toggle("c2");
}
</script>
</head>
<body>
<div id="d1" class="c1"></div>
<input type="button" value="切换" onclick="change();">
</body>
</html>
左侧菜单示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单示例</title>
<style>
.left {
position: fixed;
left: 0;
top: 0;
width: 20%;
background-color: darkgrey;
height: 100%;
}
.right {
width: 80%;
}
.title {
text-align: center;
padding: 10px 15px;
border-bottom: 1px solid red;
}
.content {
background-color: #336699;
}
.content > div {
padding: 10px;
color: white;
border-bottom: 1px solid black;
}
.hide {
display: none;
}
</style>
<script>
// 定义一个函数
function show(ths) {
// 隐藏所有的.content标签 --> classList.add("hide")
// 1. 找标签（所有.content标签 ）
var contentEles = document.getElementsByClassName("content");
// 节点对象.属性
// 遍历上面的标签数组
for (var i=0;i<contentEles.length;i++){
contentEles[i].classList.add("hide");
}
// 如何让函数知道我点的哪个菜单（传参数）
// console.log(ths);
// 显示我下面的.content标签 --> classList.remove("hide")
// 2.找这个标签下面的content标签
var nextEle = ths.nextElementSibling;
// 2. 显示这个content标签
nextEle.classList.toggle("hide");
console.log(nextEle);
}
</script>
</head>
<body>
<div class="left">
<div class="item">
<div class="title" onclick="show(this);">菜单一</div>
<div class="content hide">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this);">菜单二</div>
<div class="content hide">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this);">菜单三</div>
<div class="content hide">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
</div>
<div class="right"></div>
</body>
</html>
实现全选,反选和取消操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业分解小礼包</title>
<script>
// 全选
function checkAll() {
// 找到所有的checkbox，全部选中
// 1. 经过技术选型，决定使用.class方式查找标签
var contentEles = document.getElementsByClassName("a");
// 2. 修改 eleObj.checked = true;
for (var i = 0; i < contentEles.length; i++) {
contentEles[i].checked = true;
}
}
// 反选
function reverse() {
// 找标签，判断
// 1. 找标签（和上面一样）
var contentEles = document.getElementsByClassName("a");
// 2. 判断 eleObj.checked 属性是true还是false
// 如果是true; 则改为false;
// 如果是false,则改为true;
for (var i = 0; i < contentEles.length; i++) {
if(contentEles[i].checked == false){contentEles[i].checked = true;}
else {contentEles[i].checked = false;}
}
// 取反 ！（先按照上面的方式实现，再尝试一下使用取反的操作）
#for (var i=0;i<checkboxEles.length;i++) {
#checkboxEles[i].checked=!checkboxEles[i].checked;}
// 取消
function cancleAll() {
// 找到所有的checkbox，全部取消选中
// 1. 经过技术选型，决定使用.class方式查找标签
var contentEles = document.getElementsByClassName("a");
// 2. 修改 eleObj.checked = false;
for (var i = 0; i < contentEles.length; i++) {
contentEles[i].checked = false;
}
}
</script>
</head>
<body>
<input type="button" value="全选" onclick="checkAll();">
<input type="button" value="反选" onclick="reverse();">
<input type="button" value="取消" onclick="cancleAll();">
<table border=1px width="150px">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="a"></td>
<td>Alex</td>
<td>18</td>
</tr>
<tr>
<td><input type="checkbox" class="a"></td>
<td>Egon</td>
<td>19</td>
</tr>
<tr>
<td><input type="checkbox" class="a"></td>
<td>Gold</td>
<td>35</td>
</tr>
</tbody>
</table>
</body>
</html>
今日总结
BOM
window
DOM
文档结构
元素节点
文本节点
属性节点
查找节点
CSS选择器
基本选择器
标签选择器 --> 标签名
id选择器 --> #id值
class选择器 --> .class名
* 选择器 --> *
JS找标签
基本查找
1. document.getElementsByTagName
2. document.getElementById
3. document.getElementsByClassName
间接查找
根据标签的层级关系去找
1. parentElement 父节点标签元素
2. children 所有子标签
3. firstElementChild 第一个子标签元素
4. lastElementChild 最后一个子标签元素
5. nextElementSibling 下一个兄弟标签元素
6. previousElementSibling 上一个兄弟标签元素
操作节点的属性
1. 修改文本
innerText
2. 修改节点文档
innerHTML
3. 修改样式
1. 通过class属性，修改
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
2. 通过style属性修改
1. 没有中横线的
eleObj.style.padding
2. 有中横线的
eleObj.style.backgroundColor
自定义模态框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义模态框</title>
<style>
.cover {
/* 灰色的哪个背景 */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left:0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 999;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
background-color: white;
height: 400px;
width: 600px;
z-index: 1000;
margin-left: -300px;
margin-top: -200px;
}
.hide {
display: none;
}
</style>
<script>
function showModal() {
// 把.cover和.modal这两个div标签显示出来
// 具体来说就是去掉这个两个标签的.hide 样式类
// 1.找标签
// var coverEles = document.getElementsByClassName("hide");
// var coverEle = coverEles[0];
// coverEle.classList.remove("hide");
var coverEle = document.getElementsByClassName("cover")[0];
coverEle.classList.remove("hide");
// 显示白色筐
var modalEle = document.getElementsByClassName("modal")[0];
modalEle.classList.remove("hide");
}
function cancel() {
var coverEle = document.getElementsByClassName("cover")[0];
coverEle.classList.add("hide");
// 隐藏白色筐
var modalEle = document.getElementsByClassName("modal")[0];
modalEle.classList.add("hide");
}
</script>
</head>
<body>
<input type="button" id="btn" onclick="showModal();" value="显示模态框">
<div class="cover hide"></div>
<div class="modal hide">
<input type="text" placeholder="技师姓名">
<input type="text" placeholder="出生年">
<input type="button" value="提交">
<input type="button" value="取消" onclick="cancel();">
</div>
</body>
</html>
select联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select联动</title>
</head>
<body>
<select name="" id="s1" onchange="loadData();">
<option value="">请选择省份</option>
</select>
<select name="" id="s2">
<option value="">请先选择省份</option>
</select>
<script>
var s1Ele = document.getElementById("s1");
var data = {"河北": ["石家庄", "保定", "邯郸"], "湖南": ["长沙", "岳阳", "张家界"], "四川": ["成都", "绵阳", "攀枝花"]}
// 把data里面的key都拿出来，生成option标签， 添加到s1这个select
// 1.
var str = "";
for (var key in data) {
console.log(key);
// 2.
var s = "<option>" + key + "</option>";
console.log(s);
str += s;
}
console.log(str);
// 找到s1 select标签
s1Ele.innerHTML=str;
function loadData() {
var s2Ele = document.getElementById("s2");
s2Ele.options.length=0; // 清空select下面的option
// 自己用removeChild（）练习一下
// 把data里面的key都拿出来，生成option标签， 添加到s1这个select
var indexValue= s1Ele.selectedIndex;
var optionELes = s1Ele.options;
var key = optionELes[indexValue].innerText;
var data2 = data[key];
for (var i=0; i<data2.length;i++) {
var optionEle = document.createElement("option");
optionEle.innerText = data2[i];
s2Ele.appendChild(optionEle);
}
}
</script>
</body>
</html>
键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
</head>
<body onkeydown="f1(event);">
<script>
function f1(evt) {
alert(evt.keyCode); // 按下某个键时，先试一下按键的代码
}
</script>
</body>
</html>
onload事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload事件</title>
</head>
<body onload="f();">
<input type="text" value="哈哈" id="i1">
<script>
function f() {
var i1Ele = document.getElementById("i1");
alert(i1Ele.value);
}
</script>
</body>
</html>
鼠标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
<style>
.c1 {
height: 300px;
width: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="c1" onmouseover="f();"></div>
<script>
function f() {
alert("红烧牛肉");
}
</script>
</body>
</html>
onselect事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onselect事件</title>
</head>
<body>
<input type="text" value="红烧茄子" id="i1" >
<textarea name="" id="" cols="30" rows="10" onselect="f2();">
</textarea>
<form action="" onsubmit="f3();">
<input type="submit" value="提交">
</form>
<script>
// 找标签
function f1() {
alert("真香啊！");
}
function f2() {
alert("再来一盘");
}
function f3() {
alert("我一点都不饿");
}
</script>
<script src="10.js"></script>
</body>
</html>
###10.js文件
/**
* Created by Administrator on 2017/12/29.
*/
// 找标签
var i1Ele = document.getElementById("i1");
i1Ele.onselect = function () {
alert("真香啊！");
}
事件绑定示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定示例</title>
</head>
<body>
<ul id="i1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
<script>
// 传统写法
// var liEles = document.getElementsByTagName("li");
// for (var i=0;i<liEles.length;i++) {
// liEles[i].onclick=function () {
// // this 哪个标签触发的这个事件，this就指的谁哪个标签
// alert(this.innerText);
// }
// }
// 更好的方式
var ulEle = document.getElementById("i1");
ulEle.onclick=function (e) { // 把事件本身当成参数传进来
// event.target // 点击的目标是谁
console.log(e.target);
var targetEle = e.target;
alert(targetEle.innerText);
}
</script>
</body>
</html>
总结知识点
1. BOM window
location.href = "https://www.sogo.com"
location.reload() // 重新加载当前页
location.href
DOM
document
1. 节点分为：
文档节点 document
文本节点 标签的文本
属性节点 id, class ...
标签节点 div,span, h1 ...
2. 寻找节点
1. 基本查找
标签名：document.getElementsByTagName
ID： document.getElementByID
class名: document.getElementsByClassName
2. 间接查找
我的上一个标签： previousElementSibling
我的下一个标签： nextElementSibling
我的父标签： parentElement
我的子标签： children
我的第一个子标签：firstElementChild
我的最后一个子标签：lastElementChild
2. 修改标签属性或样式
1. 修改文本信息
ele.innerText 获取文本节点的内容（包括子标签的文本）
ele.innerText="字符串" 修改标签的文本信息
2. 文档内容（HTML内容）
ele.innerHTML 获取文档内容
ele.innerHTML=“<h1>好</h1>” 赋值HTML内容
3. 修改样式
1. classList
ele.className 获取所有的class类名（字符串类型）
ele.classList 获取所有的class类名
ele.classList.contains(cls) 判断有没有某个class
ele.classList.add(cls) 添加一个class类名
ele.classList.remove(cls) 删除class类名
ele.classList.toggle(cls) 切换（有就删除，没有就添加）
2. ele.style.样式=""
注意：有中横线的CSS样式要转成驼峰形式
ele.style.backgroundColor="red"
4. 属性
ele.attributes 获取所有的属性信息
2. RegExp（正则）
1. 正则表达式不能加空格
2. 当你设置了全局的g标志位，需要注意lastIndex --> 每一次匹配上之后会把lastIndex设置为下一位索引值
3. undefined他帮你转成"undefined"来做正则校验
3.事件
常用事件：
onfocus()
onblur()
onchange()事件 --> select联动的例子
1. selectEle.selectedIndex --> 获取当前选中的option的索引值
2. selectEle.options --> 获取所有的option选项
3. selectEle.options.length=0 --> 清空所有的option选项
键盘事件 --> jQuery讲个示例
绑定事件的方式： *****
1. 在标签里面直接写on动作=func();
2. 通过JS代码绑定事件 ele.click=function(){alert(123);}
3. 基于已经存在的父标签来给子标签绑定事件， --> 事件委托的方式
3. 文档标签的创建
引申出来的：
script标签一般写在body标签的最下面，除非是文档加载之前就要运行的代码要放在head标签里 *****
DOM补充问题
循环添加表格内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM补充问题</title>
</head>
<body>
<script>
var trEle = document.createElement("tr");
for (var i=0;i<3;i++){
// 创建一个td标签
var tdEle = document.createElement("td");
// td标签的文本赋值
tdEle.innerText=i;
// 把创建的td标签添加到tr标签里面
trEle.appendChild(tdEle);
// 每次把td标签添加完之后，打印下trEle
console.log(trEle.innerHTML);
}
console.log(trEle);
</script>
</body>
</html>
