Js dom
元素节点:
分类：元素节点，属性节点，文本节点，注释节点
nodeName nodeValue nodeType
元素节点 标签名 null 1
属性节点 属性名 属性值 2
文本节点 #text 文本值 3
注释节点#comment 注释内容 8
获取节点所有的子节点： 节点.childNodes
获取节点所有属性节点： 节点.attributes
元素节点的4种获取方式
document.getElementById(传入id名);
document.getElementsByClassName(传入样式名x)[0];表示第一个样式名为x的标签
document.getElementsByTagName(传入标签名y)[0];表示第一个标签名为y的标签
Document.getElementsByName(传入name属性名z)[0];表示第一个name属性名为z的标签
获取的所有子节点返回的是一个数组：
Demo：
<div id="box" class="div" style=" 30px;height: 50px;" name="nana">我是一个文本节 点<!--我是注释节点--><span name="nana">我是一个span标签</span></div>
var oDiv = document.getElementById("box");
console.log( oDiv.childNodes );
var oDivChilds = oDiv.childNodes;
console.log( oDivChilds[0].nodeName,oDivChilds[0].nodeValue,oDivChilds[0].nodeType );
console.log( oDivChilds[1].nodeName,oDivChilds[1].nodeValue,oDivChilds[1].nodeType );
节点的层次关系：
var oDiv = $("box");
console.log( oDiv.innerText );
console.log( oDiv.innerHTML);
innerText和innerHTML的区别：
前者是获取标签内的内容，把标签里的标签视为内容读出，包括标签里的标签的内 容。
或者是获取标签的内容，把标签里的标签视为内容读出；
console.log( oDiv.firstChild );获取标签内的第一个子节点
注意：第一个节点不一定是标签内的元素，还有可能为回车！！
console.log( oDiv.lastChild );获取标签内的最后一个子节点
console.log( oDiv.parentNode );获取标签的父节点
兄弟节点：
console.log( oDiv.previousSibling );获取前一个兄弟节点
console.log( oDiv.nextSibling);获取下一个兄弟节点
console.log( oDiv.owerDocument );获取根节点
创建元素节点：
document.creatElement(“div”);创建一个div标签
var oDiv = document.createElement("div");
设置样式：
oDiv.className = "box";
oDiv.style.backgroundColor = randomColor();
操作元素节点：
document.createElement();创建元素节点
添加到父节点：
父节点.appendChild(子节点);
父节点.insertBefore(新节点，旧节点);在旧节点的父元素下的旧节点之前添加节点
父节点.removeChild(子节点);删除节点
父节点.replaceChild(新节点,旧节点);替换节点
父节点.cloneNode();克隆节点，不克隆子节点；
父节点.cloneNode(true);克隆节点，克隆子节点；
document.creatTextNode(“文本值”);创建文本节点；