每日小结2.26

DOM基础

• childNodes
  返回指定元素的子元素集合，在IE6-8下，只返回元素节点，在IE9和chrome下会连同文本节点一起返回，所以需要通过if判断obj[i] == 1，来筛选元素节点。
• children
  返回指定元素子元素的集合，只包括元素节点，且是一级子元素
• nodeType
  返回节点类型
• parentNode
  返回父节点，可以做点击隐藏父节点
• offsetParent
  返回一个指向最近的包含该元素的定位元素，比如一个元素position为absolute，使用element.offsetParent可以知道该元素相对谁定位
• firstChild和firstElementChild
  用于选取改元素的第一个子元素，前者支持ie6-8，后者支持高级浏览器，相似的还有lastChild和lastElementChild、nextSibling和nextElementSibling（下一个兄弟元素）、previousSibling和previousElementSibling
• getAttribute(属性名称)
  获取元素的属性
• setAttribute（属性名称，属性值）
  设置属性值
• 通过className选择元素

var aLi = document.getElementsByTagName("li");
for (var i = 0; i < aLi.length; i++) {
    if (aLi[i].className == "tored") {
        aLi[i].style.backgroundColor = "red";
}
}

封装一个getByClass函数

function getByClass(parent, class) {
    var result = [];
    var aEle = parent.getElementsByTagName("*");
    for (var i = 0; i < aEle.length; i++) {
        if (aEle[i].className == class) {
        result.push(aEle[i]);
}
}
return result;
}

• createElement() 创建一个节点

var =createLi = document.createElement("li");

• appendChild() 向当前节点的子节点末尾添加新的子节点

node.appendChild(createLi)

• insertBefore() 在当前节点某个子节点之前再插入一个子节点

node.insertBefore(createLi, 某个子节点)

• removeChild() 删除当前节点的某个子节点

node.removeChild(某个子节点)