javaScript--DOM
一、JavaScript
JavaScript这门语言由 DOM、BOM、ECMAScript 组成。
DOM：document object model 文档对象模型。体现在代码中就是 document 对象。
BOM：browser object model 浏览器对象模型。体现在代码中就是window对象。
ECMA：核心语法。包含如何定义变量、循环语句、运算符、表达式、流程控制语句、数据类型。
二、DOM
我们可以使用 dom 的 getElementById 获取元素。
我们可以通过 dom 的 onclick、onmousedown、onmouseup 进行事件的设置。
我们可以通过 dom 的 style 进行样式的设置。。。。。。
2.1 dom 组成
DOM是由节点组成的。DOM 节点一共有12种，元素/标签仅仅是其中一种。
全部节点类型（红色需要重点记忆）：
元素节点 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)
2.2 节点类型（.nodeType）
var oBox = document.getElementById("box"); console.log(oBox.nodeType); //输出结果是1
文本.nodeType = 3 、注释.nodeType = 8 、文档.nodeType = 9 。
2.3 childNodes 属性
他指向调用该属性的节点的所有子节点集合。
高级浏览器会将空白折叠现象形成的空白符也当做一个文本节点。IE不会。
同意浏览器表现方式：
function getChildNodes(dom) { // 定义一个数组 var arr = []; // 先输出所有的节点的类型 如果是3 查看是不是空文本 for(var i = 0; i < dom.childNodes.length; i++) { // 判断当前节点的类型是不是文本 if(dom.childNodes[i].nodeType === 3) { // 使用正则表达式匹配dom.childNodes[i].data 是不是空白符 // 定义正则表达式 var reg = /^\s+$/; if(reg.test(dom.childNodes[i].data)) { // 既然是空白符 就不要进入了 } else { // 如果是一个文本并且内容不是空的 也要进入数组 arr.push(dom.childNodes[i]); } } else { // 如果不是文本 直接进入数组 arr.push(dom.childNodes[i]); } } // 循环体内主要是在检查哪一项是空白 return arr; }
2.5 节点属性（nodeName、nodeValue）
元素类型的 nodeName 是该元素的标签名大写字符串（toLowerCase 字符串变小写）。
文本类型的 nodeName 永远是#text 字符串。
注释类型的 nodeName 永远是#comment 。
文档类型的 nodeName 是#document 。
元素类型的 nodeValue 永远是 null 。
文本类型的 nodeValue 就是文本的书写内容。
注释类型的 nodeValue 就是注释内容。
文档类型的 nodeValue 是 null 。
2.6 节点关系
节点关系分为：父子、子父、兄弟
父子：
parent.childNodes[index] ;//第 index 个子元素 parent.firstChild ; //第一个子节点 parent.lastChild ; //最后一个子节点
子父：
child.parentNode;
兄弟：
node.previousSibling ; //前一个兄弟 node.nextSibling ; //下一个兄弟
三、元素操作
3.1 创建元素
document.createElement(type);
type：元素类型（标签名）字符串；
返回值：被创建的元素，天生是一个孤儿节点；
var p = document.createElement("p");
3.2 上树
father.appendChild(child);
child：被追加的子节点
father：父节点
最终效果：让 child 到 father 的childNodes 中作为最后一个子元素存在。
返回值：child。
3.3 下树
father.removeChild(child);
child：被删除的子节点。
father：父节点。
最终效果：从 father 中将 child 删除。
返回值：child。
3.4 插入
insertBefore(newChild, oldChild);
3.5 替换
father.replaceChild(newChild, oldChild);
返回值：oldChild
3.6 克隆
node.cloneNode(boolean)
boolean：是一个布尔值，如果是 false , 则只复制自身元素，如果是 true 则连子元素一起复制。
四、jQuery 中的元素操作
4.1 创建元素
使用 $ 函数创建元素
$("<div id='box' class='ccc' data-info='nihao'>content</div>")
4.2 上树
jQuery 中的上树分很多种，可以子元素选择父元素，可以父元素选择子元素，可以兄弟选择兄弟。
// 子元素选择父元素 appendTo(selector | jQuery | element) //往父元素后边追加子元素 prependTo(selector | jQuery | element) //往父元素前边追加子元素 // 父元素选择子元素 append(selector | jQuery | element) //往父元素的后边追加 prepend(selector | jQuery | element) //往父元素的前边追加 // 兄弟之间插入 $("#box").after(selector | jQuery | element | function); //往#box后面放元素 $("#box").insertAfter(selector | jQuery | element); //将#box往后面参数据顶的元素后面放 $("#box").before(selector | jQuery | element | function); //往#box前面放元素 $("#box").insertBefore(selector | jQuery | element ); //将#box往后面参数决定的元素前面放
4.3 warp
将参数转换成元素，并包裹住$选择的元素
$("#s").wrap("<h1></h1>");
4.4 unwarp
将所选择的的元素的父元素去掉
$("#s1").unwrap();
