DOM

获取各种类型节点：

元素节点、文本节点、属性节点、注释节点

元素节点标签名 null 1

属性节点属性名属性值 2
文本节点 #text 文本值 3

注释节点#comment 注释内容 8

//获取节点所有的子节点节点.childNodes

//获取节点的子元素.children。
//获取节点所有属性节点节点.attributes

//1. 元素节点 4种方式获取
var oDiv = document.getElementById("box"); //通过id获取元素节点
var oDiv = document.getElementsByClassName("div")[0]; //通过样式名字获取节点（class名字）
var oDiv = document.getElementsByTagName("div")[0]; //通过标签名字获取节点（用div，p，li）
var oDiv = document.getElementsByName("nana")[1]; //通过name元素获取节点

//2.文本节点
console.log( oDivChilds[0].nodeName,oDivChilds[0].nodeValue,oDivChilds[0].nodeType );

//3.注释节点
console.log( oDivChilds[1].nodeName,oDivChilds[1].nodeValue,oDivChilds[1].nodeType );

//4.获取元素节点的属性节点
console.log( oDiv.attributes );
var oDivAttris = oDiv.attributes;

console.log( oDivAttris[0].nodeName,oDivAttris[0].nodeValue,oDivAttris[0].nodeType );

节点的层次关系：

var oDiv = $("box");
  // 1.获取所有的子节点 childNodes
  console.log( oDiv.innerText );
  // 2.获取第一个子节点 firstChild
  console.log( oDiv.firstChild );
  // 3.获取最后一个子节点 lastChild
  console.log( oDiv.lastChild );
  // 4.获取父节点 parentNode
  console.log( oDiv.parentNode );

  ////////////////兄弟关系/////////////////
  // 5.获取前一个兄弟节点 previousSibling
  console.log( oDiv.previousSibling );
  // 6.获取下一个兄弟节点 nextSibling
  console.log( oDiv.nextSibling );

  ///////////////////根节点/////////////////
  console.log( oDiv.ownerDocument );

创建元素节点

节点操作

在某个子节点的前面插入父节点。insertBefore（“新来的”，“旧节点”）

例子：

function createLi(){
   var str = prompt("请输入点东西");
   var oLi = document.createElement("li");
   oLi.innerHTML= str;
   var oUl = document.getElementById("list");    //找到子元素的父级然后填入li标签里
   oUl.appendChild(oLi);    //添加在了最后
  }

function createLiAtFirst(){

var str = prompt("请输入点东西");
   var oLi = document.createElement("li");
   oLi.innerHTML = str;
   var oUl = document.getElementById("list");
   oUl.insertBefore(oLi,oUl.firstChild);    //添加在第一个li标签之前

}

（js中只有insertBefore() 没有insertAfter
自定义函数实现insertAfter的功能）

1.创建元素节点 document.createElement(标签名) （document.getElementById）找到这个元素节点
  2.添加到父节点
     父节点.appendChild(子节点)
                父节点.insertBefore(新节点,旧节点)
  3.删除节点  父节点.removeChild(子节点)
  4.替换节点  父节点.replaceChild(新节点,旧节点)
  5.克隆节点   节点.cloneNode() 克隆节点，不克隆子节点
     节点.cloneNode(true)克隆节点，克隆子节点
  6.创建文本节点 document.createTextNode("文本值")

例子：

function deleteDiv(){
   //将div从父节点body中删除
   // 父节点.removeChild(子节点)
   var oDiv = document.getElementById("box");
   document.body.removeChild(oDiv);
  }
  function replaceDiv(){
   //将子节点替换成另一个节点
   // 父节点.replaceChild(新节点,旧节点)
   var oImg = document.createElement("img");
   oImg.src = "利利.jpg";
   oImg.style.width = "400px";
   oImg.style.height = "400px";

var oDiv = document.getElementById("box");

document.body.replaceChild(oImg,oDiv);

  }

  function cloneDiv(){
   var oDiv = document.getElementById("box");
   //节点.cloneNode() 克隆当前的节点
   // 不传值默认是false 不会克隆子节点
   // 传值 true 克隆子节点
   console.log( oDiv.cloneNode(true) );
   document.body.appendChild( oDiv.cloneNode(true) );
  }
  function createText(){
   var tNode = document.createTextNode("文本节点");
   document.body.appendChild(tNode);
  }

创建表格：

1.获取行列

2.创建表格 table标签
   2.1 创建table标签，然后添加到body上
   2.2 外层循环创建tr,然后把tr添加table;
   2.3 内层循环创建td,给td设置宽高背景色。然后把td添加到tr上

示范

function createTable(){
    var rows = parseInt( $("rw").value );
    var cols = parseInt( $("cl").value );
    var oTb =document.createElement("table");
    document.body.appendChild(oTb);
    for (var i=0; i<rows; i++){
     var oTr =document.createElement("tr");
     oTb.appendChild(oTr);
     for(var j=0; j<cols; j++){
      var oTd =document.createElement("td");
      oTd.style.height="15px";
      oTd.style.width="20px";
      oTd.style.backgroundColor=randomColor()
      oTr.appendChild(oTd);
     }
    }

}

选项卡例子：

html