1. 了解什么是WebAPI
前面学习的JS分为三大部分：
ECMAScript：基础语法部分
DOM API：操作页面结构
BOM API：操作浏览器
WebAPI就包括了DOM和BOM，API是一个广义的概念，而WebAPI是一个更具体的概念，指DOM+BOM，所谓API的本质就是一些现成的函数/对象，程序员可直接拿来用，方便开发
2. 认识DOM
DOM全称为Document Object Model
W3C标准为我们提供了一些列函数，使得我们可以操作：网页内容，网页结构，网页样式
DOM树：一个页面的结构是一个树形结构，称为DOM树
页面结构
DOM树结构
重要概念：
文档：一个页面就是一个文档，使用document表示
元素：页面中所有的标签都称为元素，使用element表示
节点：网页中所有的内容都可以称为节点（标签节点，注释节点，文本节点，属性节点），使用node表示
3. 获取页面元素
这部分工作类似CSS选择器功能
3.1 querySelector
使用querySelector能够完全复用前面所学的CSS选择器知识，达到更快捷更精准的方式获取到元素对象
var element = document.querySelector(selector);
说明：获取页面的一个selector标签元素，如果有多个相同的标签，则匹配第一个
<body> <div> <span></span> </div> <p>111</p> <p>222</p> </body> <script> var div = document.querySelector("div"); var p = document.querySelector("p"); console.log(div); console.log(p); </script>
注意：querySelector可以被任何元素调用，不仅仅是document，调用这个方法的元素将作为本次查找的根元素
<script> var div = document.querySelector("div"); var span = div.querySelector("span"); console.log(span); </script>
3.2 querySelectorAll
与querySelector不同的是querySelectorAll获得与之匹配的页面所有的元素，以数组的形式保存
<body> <div id="i1">111</div> <div id="i2">222</div> </body> <script> var divArr = document.querySelectorAll("div"); console.log(divArr); </script>
4. 认识事件
JS要构建动态页面，就需要感知用户的行为，用户对页面的一些操作（点击，选择，修改等）都会在浏览器中产生一个个事件，被JS获取到，从而进行更复杂的交互操作
事件的三要素：
事件源：哪个元素触发的
事件类型：点击，修改，选中等
事件处理程序：通常是一个回调函数，当事件发生后，浏览器自动调用回调函数，来完成与用户的交互
示例：点击按钮，弹出“你好”的警示窗口
<body> <input type="button" value="按钮"> </body> <script> var btu = document.querySelector("input"); btu.onclick = function(){ alert("你好"); } </script>
注意：这个匿名函数是一个回调函数，当事件发生后，由浏览器自动调用
5. 操作元素
5.1 获取/修改元素内容
5.1.1 innerText
Element.innerText表示获取一个节点及其后代渲染的文本内容
示例：获取元素的内容
<body> <div> <p>111</p> <p>222</p> </div> </body> <script> var div = document.querySelector("div"); console.log(div.innerText); </script>
示例：修改元素的内容
<body> <p>111</p> <span></span> <div></div> </body> <script> var p = document.querySelector("p"); p.innerText = "333"; //将p中的111改为333 var span = document.querySelector("span"); span.innerText = "444"; //给span中填444 var div = document.querySelector("div"); div.innerText = "<span>555</span>" </script>
从中可以发现innerText无法获得div内部的html结构，只能得到文本内容，修改元素内容时，也会把span标签当作文本内容进行设置
5.1.2 innerHTML
Element.innerHTML会设置或获取html语法表示的元素的后代
示例：获取页面元素
<body> <div> <span>111</span> <span>222</span> <span>333</span> </div> </body> <script> var div = document.querySelector("div"); console.log(div.innerHTML); </script>
示例：修改元素内容
<body> <p>111</p> <div></div> </body> <script> var p = document.querySelector("p"); p.innerHTML = "222"; //将p中的111修改为222 var div = document.querySelector("div"); div.innerHTML = "<span>1</span><br><span>2</span>"; </script>
从中可以看到，innerHTML不光能获取到页面的html结构，也能修改结构，并且获取的内容保留空格和换行
5.2 获取/修改元素属性
使用console.dir()可以打印对象属性
示例：获取一张图片的属性
<body> <img src="1.jpg" alt="小女孩儿"> </body> <script> var img = document.querySelector("img"); console.dir(img); </script>
我们可以直接通过这些属性获取属性值
示例：直接获取图片路径和alt
<body> <img src="1.jpg" alt="小女孩儿"> </body> <script> var img = document.querySelector("img"); console.log(img.src); console.log(img.alt); </script>
还可以直接修改属性
示例：点击切换图片
<body> <img src="1.jpg" width="400px" height="300px"> </body> <script> var img = document.querySelector("img"); img.onclick = function(){ if(img.src.lastIndexOf("1.jpg")!=-1){ img.src = "2.jpg"; }else { img.src = "1.jpg"; } } </script>
5.3 获取/修改表单元素属性
表单主要是指input标签的以下属性都可以通过DOM来修改
value：input的值
disabled：禁用
checked：复选框会使用
selected：下拉框会使用
type：input的类型（文本，密码，按钮，文件等）
input具有一个重要的属性value，value决定了表单元素的内容，如果是输入框，value表示输入框的内容，修改这个值会影响到界面显示，如果是按钮，value为按钮的内容，可以通过value来实现按钮中文本的切换
示例：点击替换按钮的文本，在“播放”，“暂停”之间切换
<body> <input type="button" value="播放"> </body> <script> var inp = document.querySelector("input"); inp.onclick = function(){ if(inp.value=="播放"){ inp.value = "暂停"; }else { inp.value = "播放"; } } </script>
示例：点击计数
使用一个输入框输入初始值，每次点击，值+1
<body> <input type="text" id="text" value="0"> <input type="button" id="button" value="点击"> </body> <script> var text = document.querySelector("#text"); var button = document.querySelector("#button"); button.onclick = function(){ var num = text.value; num++; text.value = num; } </script>
示例：全选/取消全选按钮
<body> <input type="checkbox" id="all">全选 <input type="checkbox" class="ball">篮球 <input type="checkbox" class="ball">足球 <input type="checkbox" class="ball">排球 <input type="checkbox" class="ball">棒球 </body> <script> var all = document.querySelector("#all"); var balls = document.querySelectorAll(".ball"); //实现全选，或者取消全选 all.onclick = function(){ for(var i = 0;i < balls.length;i++){ balls[i].checked = all.checked; } } //查看是否全部选中 function ischeckAll(){ for(var i = 0;i < balls.length;i++){ if(!balls[i].checked){ return false; } } return true; } //每选一个判断是否全选，若已经全选，则勾选全选，若无则不勾选全选 for(var i = 0;i < balls.length;i++){ balls[i].onclick = function(){ if(ischeckAll()){ all.checked = true; }else { all.checked = false; } } } </script>
5.4 获取/修改样式属性
CSS中的元素属性都可以通过JS来修改
5.4.1 行内样式操作
element.style.[属性名] = [属性值];
style中的属性都是使用驼峰命名方式和CSS属性对应的，例：font-size---fontSize，background-color---backgroundColor
示例：点击修改文字颜色和修改文字大小
<body> <div style="color: red; font-size: 1em;">我爱学习</div> </body> <script> var div = document.querySelector("div"); div.onclick = function(){ if(div.style.color!="blue"){ div.style.color = "blue"; div.style.fontSize = "2em"; }else { div.style.color = "red"; div.style.fontSize = "1em"; } } </script>
5.4.2 类名样式操作
通过修改元素CSS样式的类名，来切换不同的场景
element.className = [CSS 类名];
示例：点解切换“日间”，“夜间”模式
<body> <div class="d1"> 窗前明月光<br> 疑是地上霜<br> 举头望明月<br> 低头思故乡<br> </div> </body> <script> var div = document.querySelector("div"); div.onclick = function(){ if(div.className=="d1"){ div.className = "d2"; }else { div.className = "d1"; } } </script> <style> .d1 { color: black; background-color: whitesmoke; } .d2 { color: white; background-color: black; } </style>
6. 操作节点
6.1 新增节点
新增分为两步：
创建元素节点
把元素节点插入dom树中
6.1.1 创建元素节点
使用createElement方法创建一个元素
示例
<body> </body> <script> var div = document.createElement("div"); div.id = "mydiv"; div.innerHTML = "哈哈"; console.log(div); </script>
发现虽然div标签创建成功了，但是没有在页面上显示出来，原因就是我们还没有将其插入到DOM树中
上面是创建元素节点，还可以创建：
createTextNode：创建文本节点
createComment：创建注释节点
createAttribute：创建属性节点
6.1.2 往dom树中插入节点
使用appendChild将节点插入到指定节点的最后一个孩之后
语法：element.appendChild(aChild)
示例：
<body> <div id="d1"> <div>111</div> <div>222</div> </div> </body> <script> var div = document.createElement("div"); div.id = "mydiv"; div.innerHTML = "哈哈"; var div1 = document.querySelector("#d1"); div1.appendChild(div); </script>
使用insertBefore将节点插入到指定节点之前
语法：parentNode.insertBefore(newNode,referenceNode)
说明：
parentNode：被插入节点的父节点
newNode：待插入的节点
referenceNode：新节点插入这个节点之前
如果referenceNode为null，则newNode将被插入子节点的末尾
示例：
<body> <div id="d1"> <div>111</div> <div>222</div> <div>333</div> <div>444</div> </div> </body> <script> var div = document.createElement("div"); div.id = "mydiv"; div.innerHTML = "哈哈"; var div1 = document.querySelector("#d1"); div1.insertBefore(div,div1.children[0]); </script>
注意：如果一个节点插入两次，则只有最后一次生效
<body> <div id="d1"> <div>111</div> <div>222</div> <div>333</div> <div>444</div> </div> </body> <script> var div = document.createElement("div"); div.id = "mydiv"; div.innerHTML = "哈哈"; var div1 = document.querySelector("#d1"); div1.insertBefore(div,div1.children[0]); div1.insertBefore(div,div1.children[2]); </script>
6.2 删除节点
使用removeChild删除子节点
语法：oldChild = element.removeChild(chid);
child为待删除结点
element为child的父节点
返回值为被删除的结点
被删除的结点只是从dom树中被删除了，但是仍然在内存中，可以随时加入dom树的其他位置
如果上child不是element的子结点，则该方法会抛出异常
示例：
<body> <div id="i1"> <div>111</div> <div>222</div> <div>222</div> <div>333</div> </div> </body> <script> var i1 = document.querySelector("#i1"); i1.removeChild(i1.children[2]); </script>
