创建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