1 Web APls
JavaScript的组成
ECMAScript
Web APls
BOM - 浏览器对象模型
一套操作浏览器功能的API
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
DOM - 文档对象模型
一套操作页面元素的API
DOM可以把HTML看作时文档树，通过DOM提供的API可以对树上的节点进行操作
2 DOM
2.1 基本概念
文档对象模型（Documnet Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口
它是一种与平台和语言无关的应用程序接口，它可以动态的访问程序和脚本，更新其内容、结构和文档的风格
2.2 DOM又称为文档树模型
1）概念
文档：一个网页可以称为文档
节点：网页中的所有内容都是节点（标签、属性、文本、注释）
元素：网页中的标签
属性：标签的属性
2）DOM常用操作
获取文档元素
对文档元素进行增删改查操作
事件操作
2.3 window和document
1）window
所有的浏览器都支持window对象，它支持浏览器窗口
所有的js全局对象、函数以及变量都能自动称为window对象的成员
全局变量是window对象的属性，全局函数是window对象的方法
2）document
document也是window对象的属性之一
document对象是documentHTML的一个实例，也是window对象的一个属性，因此可以将document对象作为一个全局对象来访问
常用属性
console.log(document);
console.log(document.childNodes);
console.log(document.head);
console.log(document.body);
docment.title = "测试";
//获取id
<div id = "box"></div>
<script>
var box = document.getElementById('box');
</script>
2.4 事件
1）事件
触发 - 响应机制
用户和浏览器之间的交互行为，比如：点击按钮，鼠标进入/离开
2）事件三要素
事件源：触发（被）事件的元素
事件名称：click点击事件
事件处理程序：事件出发后要执行的代码（函数形式）
3）使用方式
<button id = "btn"></button>
<script>
var btn = document.getElementById('btn');
btn.onclick = fucntion(ev) { //ev 匿名函数
alert('点了')；
}
</script>
2.5 文档加载过程
浏览器加载页面是自上而下的顺序加载的
建议把script放在最后
2.6 文档页面元素获取
1）根据id获取元素
document.getElementById('string')
2）根据标签名获取元素
document.getElementsBytagName('string')[0]
3）根据name获取元素
document.getElementsByName('string')[0]
4）根据类名获取元素
document.getElementsByClassName('string')[0]
拿到的是一个集合（数组），因为class可以多次名命
5）根据选择器获取元素
document.querySelector('string')
document.querySelectorAll('string')[0]
2.7 节点之间的关系
<div id = "box">
<button id = "btn"></button>
<span id = "span">
<a id="lk" href = "#">明日香</a>
</span>
<p id = "yes"></p>
<div id = "box2"></div>
</div>
<script>
//获取父节点
window.onload = function(ev) {
var a = document.getElementsById('lk');
console.log(a);
console.log(a.parentNode); //span
console.log(a.parentNode.parentNode); //div
//获取兄弟节点
var span = document.getElementById('span');
var nextEle = span.nextElementSibling || span.nextSibling; //注意：换行也是一个节点
console.log(nextEle); //p
var preEle = span.previousElementSibling || span.previousSibling;
console.log(preEle); //button
}
//第一个子元素和最后一个子元素
var box = docment.getElementById('box');
box.firstElementChild || box.firstChild;
box.lastElementChild || box.lastChild;
//获取所有的节点
box.childNodes; //所有节点（包括空格、回车等）
box.children; //所有元素节点
</script>
nodeType
每个节点都有一个 nodeType属性，用于表明节点的类型，节点类型由Node类型中定义12个常量表示
//过滤
window.onload = function(ev) {
//获取标签
var box = document.getElementById('box');
//获取标签内部的所有节点
var allNodeLists = box.childNodes;
//过滤元素节点
var newListArr = [];
allNodelists.forEach(function (value,index,array) {
if(value.nodeType === 1) {
newListArr.push(value);
}
});
}
2.8 节点操作
1）CRUD（增删改查）
<div id = "box">
<p id = "word">MRX</p?
<button id = "btn">点我</button>
</div>
<script>
window.onload = function(ev) {
var box = document.getElementsById('box');
var btn = document.getElementsById('btn');
//创建节点
var img = document.createElement('img'); //创建一个新的元素‘img’
img.src = 'img/img_01.jpg';
box.appendChild(img); //追加
//insertBefore(需要插入的节点对象，在其之前插入);
box.insertBefore(img,btn); //插入
//删除节点
btn.remove(); //删除自身
box.removeChild(btn); //删除box子节点btn
//克隆标签，不能有id，以下只是举例
/*
var newBox = box.cloneNode(); //浅克隆，只克隆本身；()内是布尔类型
var newBox = box.coneNode(true); //深克隆，克隆全部
document.body.appendChild(newBox);
*/
}
</script>
2）节点属性操作
获取：getAttribute(名称);
设置：setAttribute(名称，值);
删除：removeAttribute(名称)
<div id = "box">
<p id = "word">MRX</p?
<button id = "btn">点我</button>
<img />
</div>
<script>
window.onload = function(ex) {
//获取节点
var img = document.getElementsByTagName('img');
//获取标签属性
img.getAttribute('src'); //输出null
img.alt; //不常用，输出空白
//设置属性
img.setAttribute('src','img/img_01.jpg');
img.setAttribute('alt','这是一个图片');
//删除属性
img.removeAttribute('src');
img.removeAttribute('alt');
}
</script>
