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往后面参数决定的元素前面放