js操作DOM

创建dom

//创建一个li标签
var oLi = document.createElement("li");
//父.appendChild(oLi);插到后面的位置（变成最后一个子节点）
//兄弟.insertBefore(oLi);插到这个兄弟节点之前

删除一个dom

//父.removeChild(oLi)
.parentNode()

文档碎片增快速度

var fragment = document.createDocumentFragment();

var oLi = document.createElement("li");
oLi.innerHTML = "Xujiguang";
//oLi.innerText = "xu";
fragment.appendChild(oLi); //然后把fragment加到父节点

dom节点

• 父节点
• 子节点

oUl.childNodes //获取子节点，只是子一层，在firefox中空行也会算子节点（文本节点）
//获取节点种类
document.body.childNodes[0].NodeType
// 3  -- 文本节点
//1   -- 元素节点
//火狐中获取子节点要和NodeType结合才能正确的获取子节点
//
oUl.children   //获取子节点(一层)，不算文本节点childNodes的兼容版本
//
oLi.parentNode //获取父节点
//
//隐藏节点
this.parentNode.style.display = none; 

offsetParent

ps:小知识
position:absolute 从文档流中脱出，根据left,right,top,buttom进行定位
（相对于 static 定位以外的第一个父元素进行定位）
//
position:relative  对象不可层叠，但将依据left，right，top，bottom等属性
              在正常文档流中偏移位置（相对于自身在原来的文档呢流中的位置）

offsetParent获取相对定位的父对象

继续子节点

var oCh = oUl.firstElementChild || oUl.firstChild
var oCh = oUl.lastElementChild || oUl.lastChild

兄弟节点

oLi.previousSibling || oLi.previousElementSibling
//
oLi.nextSibling || oLi.nextElemetnSibling

操纵元素属性

//
oIn.value = "123"; //设置表单控件的value
//
oIn["value"] = "123";
//
oIn.setAttribute("value", "xujiguagn");
//获取元素属性
var v = oIn.getAttribute("id");

//删掉元素属性
oIn.removeAttribute("class");

//
oIn.style.display = "none";
oIn.style["display"] = "none";

通过class选取元素

function getByClass(oParent, sClass) {
  var aEle = oParent.getElementsByTagName("*");
  var aReault = [];
  for (var i = 0; i< aEle.length; i++) {
    if(aEle[i].className == sClass) {
      aResult.push(aEle[i]);
    }
  }
}

js事件

//window的事件包括onload、onscroll、onresize
//其他的事件
window.open("www.baidu.com", "_self"); //可以指定在哪个frame打开，默认_blank