此笔记分为两部分（上午、下午）
第二部分“JavaScript进阶课堂笔记 第一天（下午）”
一、javascript
javascript由DOM、BOM、ECMAScript组成。
DOM: document object model 文档对象模型 体现在代码中是document
BOM：browser object model 浏览器对象模型 体现在代码中是window
ECMAScript: 核心语法。
包含如何定义变量、循环语句、运算符、表达式、流程控制语句、数据类型。
js基础部分我们学习的是核心语法，进阶部分我们学习另外两个。
二、DOM
可以通过dom的getElementById来获取元素
可以通过dom的onclick, onmousedown, onmouseup来添加事件
可以通过dom的style来设置样式
等等……
2.1 DOM的组成
dom是由节点组成。 元素/标签仅仅是节点的一种。
节点一共分为12种：
我们需要记住的有四种：
1 元素类型
3 文本类型
8 注释类型
9 文档类型
全部节点类型： 元素节点 Node.ELEMENT_NODE(1) 属性节点 Node.ATTRIBUTE_NODE(2) 文本节点 Node.TEXT_NODE(3) CDATA节点 Node.CDATA_SECTION_NODE(4) 实体引用名称节点 Node.ENTRY_REFERENCE_NODE(5) 实体名称节点 Node.ENTITY_NODE(6) 处理指令节点 Node.PROCESSING_INSTRUCTION_NODE(7) 注释节点 Node.COMMENT_NODE(8) 文档节点 Node.DOCUMENT_NODE(9) 文档类型节点 Node.DOCUMENT_TYPE_NODE(10) 文档片段节点 Node.DOCUMENT_FRAGMENT_NODE(11) DTD声明节点 Node.NOTATION_NODE(12) 1 |
2.2 节点类型
每一个元素都是节点，但是每一个节点不一定是元素。 元素只是节点的一个分类。
元素.nodeType
1 / 获取元素 2 var box = document.getElementById("box"); 3 // 查看节点类型 4 console.log(box.nodeType) // 输出1 是元素类型 |
文本.nodeType
1 |
注释.nodeType
1 |
文档.nodeType
1 |
2.3 childNodes属性
它指向调用该属性的节点的所有子节点的集合。
DOM结构：
1 <div id="box"> 2 <div></div> 3 你好 4 <!-- 我是一个注释 --> 5 </div> |
执行代码：
1 // 获取元素 2 var box = document.getElementById("box"); 3 // 输出box的所有子节点 4 console.log(box.childNodes); |
经过观察，我们明明写了3个节点， 但是在输出的时候却输出5个节点。
这是因为，高级浏览器会将空白折叠现象形成的空白符当做一个文本类型的节点存在。
然后，我们再到IE中去观察：
由于IE中的控制台打不开，我们输出box.childNodes.length
查看结果：
1 |
此时，IE反而比高级浏览器好用。
2.4 封装轮子统一浏览器的变现
1 function ChildNodes(dom) { 2 // 定义一个空数组 3 var arr = []; 4 // 查看元素所有子节点的类型有没有文本类型， 5 // 如果有文本类型，还要查看是否是空文本 6 for (var i = 0; i < dom.childNodes.length; i++) { 7 // 查看节点类型 8 console.log(dom.childNodes[i].nodeType); 9 if (dom.childNodes[i].nodeType === 3) { 10 // 说明是文本类型,查看是否是空文本 11 // 通过data属性可以查看文本类型的内容 12 // 定义正则表达式 13 var reg = /^\s+$/; 14 // 验证 15 if (reg.test(dom.childNodes[i].data)) { 16 console.log("第" + i + "项" + "是纯空白"); 17 } else { 18 // 不是空白符，就要进入数组中 19 arr.push(dom.childNodes[i]); 20 } 21 22 } else { 23 // 不是文本类型的，直接进入数组 24 arr.push(dom.childNodes[i]); 25 } 26 } 27 // 返回数组 28 return arr; 29 } |
2.5 节点属性
nodeType: 该属性标记节点的类型
nodeName: 该属性标记节点的名称
nodeValue: 该属性标记节点的值
Dom结构：
1 <div id="box"> 2 <div></div> 3 你好，世界 4 <!-- 我是一个注释 --> 5 </div> |
执行代码：
1 // 获取元素 2 var box = document.getElementById("box"); 3 4 // 输出box的所有子节点 5 var arr = ChildNodes(box); 6 for (var i = 0; i < arr.length; i++) { 7 // nodeType属性标记该节点的类型 8 console.log(arr[i].nodeType); 9 // nodeName属性标记该节点的名称 10 console.log(arr[i].nodeName); 11 // nodeValue属性标记该节点的值 12 console.log(arr[i].nodeValue); 13 } |
输出结果：
1 2 3 // 元素类型的节点名称，是元素标签名称大写字符串 4 // 文本类型的节点名称，永远是#text字符串 5 // 注释类型的节点名称，永远是#comment 6 // 文档类型的节点名称，是#document 7 8 // 元素类型的节点值， 是Null 9 // 文本类型的节点值， 就是书写的文本内容 10 // 注释类型的值，就是注释的内容 11 // 文档类型的值， 也是null |
2.6 节点关系
一共分为3种：
父子、字父、兄弟
父子：
1 father.childNodes[index] // 获取某一个儿子节点 2 father.firstChild // 获取第一个子节点 3 father.lastChild // 获取最后一个子节点 |
子父：
1 child.parentNode // 父节点 |
兄弟：
1 node.previousSibling // 获取上一个兄弟节点 2 node.nextSibling // 获取下一个兄弟节点 |
1 // 获取ul的第一个子节点 2 var first = ul.firstChild; 3 4 // 获取ul的最后一个子节点 5 var last = ul.lastChild; 6 7 // 中间的li没有办法直接获取，可以通过childNodes[1|2|3]来获取某一个。 8 9 // 获取父节点 10 var father = first.parentNode; 11 var father1 = last.parentNode; 12 13 console.log(father === father1); 14 15 16 // 兄弟之间的关系 17 var li3 = ul.childNodes[2]; 18 // 获取上一个兄弟节点 19 var li2 = li3.previousSibling; 20 // 获取下一个兄弟节点 21 var li4 = li3.nextSibling; |
三、元素操作
3.1 创建元素
使用方式:
document.createElement(type)
type: 元素类型（标签名字符串）
返回值： 创建出来的元素。
举例：
1 // 创建元素 2 // 我们可以使用DOM提供相应的API 来创建元素 3 var p = document.createElement("p"); 4 console.log(p); |
结果：
3.2 上树
使用方式：
father.appendChild(child)
child: 要追加的子节点
father: 父节点
返回值：child
最终效果：将child追加到father中，作为father的childNodes中的最后一个子元素存在
结构：
1 <div id="box"></div> |
执行代码：
1 // 获取box 2 var box = document.getElementById("box"); 3 // 将创建出来的p元素追加到box中 4 box.appendChild(p); |
结果：
1 |
3.3 下树
使用方式：
father.removeChild(child)
child: 要移除的子节点
father: 父节点
返回值： child
最终效果： child从father的子节点中移除
举例：
1 //点击btn让p元素下树 2 // 获取btn 3 var btn = document.getElementById("btn"); 4 btn.onclick = function() { 5 box.removeChild(p); 6 } |
结果：
1 |
