<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom</title>
<script>
/**
* 子节点 childNode (有兼容问题)
* ie6-8 没问题
* nodeType==3 文本节点
* nodeType==1 元素节点
* children 都兼容
* 父节点 parentNode
* 有定位的父级 offsetParent
* 首尾节点(有兼容问题)
* ie6-8 (chrome)
* firstChild firstElementCHild
* lastChild lastElementChild
* 兄弟节点(有兼容问题)
* nextSibling nextElementSibling
* previousSibling previousElementSibling
*
* dom操作属性
* 获取 getAttribute(名称)
* 设置 setAttribute(名称、值)
* 删除 removeAttribute(名称)
* 根据class获取元素函数的封装
*
* dom的应用
* 创建dom元素 creatElement(标签名)
* 追加节点 appendChild(节点)
* 在原有节点前插入节点 insertBefor(节点，原有节点)
* 删除节点 removeChild(节点)
*/
function getByClass(oParent, sClass) {
var oResult = [];
var oEle = oParent.getElementsByTagName('*');
for (var i = 0; i < oEle.length; i++) {
if (oEle[i].className == sClass) {
oResult.push(oEle[i]);
}
}
return oResult;
}
window.onload = function() {
var oUl = document.getElementById("ul1");
var oLi = getByClass(oUl, "item");
for (var i = 0; i < oLi.length; i++) {
oLi[i].style.background = "red";
}
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li class="item"></li>
<li></li>
<li class="item"></li>
<li></li>
</ul>
</body>
</html>