1 JavaScipt的组成
JavaScript由ECMAScript（核心）、BOM（浏览器对象模型）、DOM（文档对象模型）三部分组成。
2 ECMAScript
ECMAScript是ECMA-262定义的一门语言，web浏览器是ECMAScript实现可能存在的一种宿主环境，主要定义了如下：
- 语法
- 类型
- 语句
- 关键字
- 保留字
- 操作符
- 全局对象
3 BOM
BOM用于支持访问和操作浏览器的窗口，主要包括：
- 1 弹出新浏览器窗口
- 2 移动、缩放和关闭浏览器窗口
- 3 navigator对象，提供浏览器的详尽信息
- 4 location对象，提供浏览器加载界面的详尽信息
- 5 screen对象，提供关于用户屏幕分辨率的详尽信息
- 6 performance对象，提供浏览器内存占用、导航行为和时间统计的详尽信息
- 7 对cookie的支持
- 8 其他自定义对象，如XMLHttpRequest和IE的ActiveXObject
3.1 Window对象
window.open(url) // 打开新窗口
window.close() // 关闭当前窗口
window.moveTo(500, 0); //移动窗口
window.resizeTo(800, 600); //改变窗口大小
window.outerHeight //返回窗口的外部高度
window.outerWidth //返回窗口的外部宽度
window.innerHeight //返回窗口的文档显示区的高度
window.innerWidth //返回窗口的文档显示区的宽度
3.2 navigator对象（了解即可）
浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
3.3 screen对象（了解即可）
屏幕对象，不常用，一些属性：
screen.availWidth //可用的屏幕宽度
screen.availHeight //可用的屏幕高度
3.4 history对象（了解即可）
window.history 对象包含了用户对当前页面的浏览历史
history.forward() // 前进一页
history.back() // 后退一页
3.5 location对象
location.href //获取URL
location.href="URL" // 跳转到指定页面
location.reload() //重新加载页面
3.6 弹出框
alert("这是警示"); // 警告框
var answer = confirm('输入正确吗？'); // 确认框，返回true或false
console.log(answer);
var str = window.prompt("请输入密码","password") // 提示框，返回password或null
console.log(str);
3.7 计时器
// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);
// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);
4 DOM
文档对象模型（DOM）是一个应用编程接口（API），用于在HTML中使用扩展的XML。
4.1 查找标签
// -------------------直接查找------------------
document.getElementById // 根据ID获取一个标签
document.getElementsByClassName // 根据class属性获取
document.getElementsByTagName // 根据标签名获取标签合集
// -------------------间接查找------------------
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
4.2 节点操作
// -------------------创建节点------------------
var divEle = document.createElement("div");
// -------------------添加节点------------------
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/13178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);
// -------------------删除节点------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="description" />
<title>添加删除子节点</title>
<style>
body{
margin: 0;
padding: 0;
}
.fu{
position:absolute;
/* left: 100px; */
display: block;
margin: 0;
height: 400px;
width: 400px;
color: brown;
font-size: medium;
text-align: center;
line-height: 400px;
background-color: rgb(90, 137, 179);
}
.zi{
height: 30px;
width: 80px;
color: rgb(43, 226, 98);
}
</style>
</head>
<body>
<div class="fu" onclick="addEle()">父元素</div>
</body>
<script>
function addEle(){
var fuEle = document.getElementsByClassName("fu");
var ziEle = document.createElement("button");
ziEle.innerText = "子元素"
ziEle.classList.add("zi");
ziEle.addEventListener("click",removeEle);
fuEle[0].appendChild(ziEle); // 添加子节点
}
function removeEle(e){
e.stopPropagation(); // 阻止事件冒泡
var fuEle = document.getElementsByClassName("fu");
var ziEle = document.getElementsByClassName("zi");
fuEle[0].removeChild(ziEle[0]); // 删除子节点
}
</script>
</html>
4.3 属性操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src = "..."
4.4 类操作
var Ele = document.getElementById("i1");
Ele.classList.remove(cls) 删除指定类
Ele.classList.add(cls) 添加类
Ele.classList.contains(cls) 存在返回true，否则返回false
Ele.classList.toggle(cls) 存在就删除，否则添加
4.5 事件
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
onclick // 当用户点击某个对象时调用的事件句柄。
ondblclick // 当用户双击某个对象时调用的事件句柄。
onfocus // 元素获得焦点。
onblur // 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange // 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown // 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress // 某个键盘按键被按下并松开。
onkeyup // 某个键盘按键被松开。
onload // 一张页面或一幅图像完成加载。
onmousedown // 鼠标按钮被按下。
onmousemove // 鼠标被移动。
onmouseout // 鼠标从某元素移开。
onmouseover // 鼠标移到某元素之上。
onselect // 在文本框中的文本被选中时发生。
onsubmit // 确认按钮被点击，使用的对象是form。