Document Object Model
文档对象模型
提供结构化表示
提供了JS脚本访问结构的方式
文档节点 Node
document.getElementById()
document.getElementsByClassName() 此方法有兼容性问题
document.getElementsByTagName()
解决方案
getElementsByClassName的兼容写法
window.onload = function () {
function funIsContain(sObject,sTarget) {
var aObject = sObject.split(" ");
for (var i=0,l=aObject.length;i<l;i++) {
if (aObject[i] == sTarget)
return true;
}
return false;
}
function funGetClass(sClassName,sId) {
var oParent = null;
if (sId) {
oParent = document.getElementById(sId);
}else{
oParent = document;
}
if (oParent.getElementsByClassName)
return oParent.getElementsByClassName(sClassName);
var aNodes = oParent.getElementsByTagName("*");
var aContent = [];
for (var i=0,l=aNodes.length;i<l;i++) {
if (funIsContain(aNodes[i].className,sClassName))
aContent.push(aNodes[i]);
}
return aContent;
}
}
节点间的关系
父节点 oOBject.parentNode
var oparentNode = oOBject.parentNode;
兄弟节点 oOBject.previousSibling 仅IE678支持
oOBject.previousElementSibling 仅其他浏览器支持
oOBject.nextSibling 仅IE678
oOBject.nextElementSibling 仅其他浏览器支持
var oPreviousSibling= oOBject.previousElementSibling || oOBject.previousSibling;
var oNextSibling = oOBject.nextElementSibling || oOBject.nextSibling;
子节点
oOBject.firstChild 仅IE678支持
oOBject.firstElementChild 仅其他浏览器支持仅其他浏览器支持
oOBject.lastChild 仅IE678支持
oOBject.lastElementChild 仅其他浏览器支持仅其他浏览器支持
所有子节点
oOBject.childNodes
oOBject.children
function funGetChildNodes(oObject) {
var aResult = [];
for (var i=0,l=oObject.childNodes.length;i<l;i++) {
if(oObject.childNodes[i].nodeType-1) continue;
aResult.push(oObject.childNodes[i]);
}
return aResult;
}
创建节点
var oBody = document.getElementsByTagName("body")[0];
var oNewElement = document.createElement("li");
添加节点
oBody.appendChild(oNewElement);
oBody.insertBefore(oNewElement,funGetChildNodes(oBody)[0]);
删除节点
oBody.removeChild(funGetChildNodes(oBody)[0]);
克隆节点
oBody.appendChild(funGetChildNodes(oBody)[0].cloneNode(true));
/**
* 获取节点属性
*/
var sLunBoClassName = oLunBo.getAttribute("class");
/**
* 设置节点属性
*/
oLunBo.setAttribute("class","Sery");
console.log(oLunBo.getAttribute("class"));
/**
* 删除节点属性
*/
oLunBo.removeAttribute("class");