【DOM编程艺术】对styleHeaderSibling函数进行抽象
把一个非常具体的东西改进为一个较为通用的东西的过程叫做抽象
先看下styleHeaderSibling函数,会发现它仅适用于h1元素,而且className属性值intro也是硬编码在函数里的:
function styleHeaderSibling(){ var headers=document.getElementsByTagName('h1'); for(var i=0;i<headers.length;i++){ var elem=getNextElement(headers[i].nextSibling); //调用函数获取h1后面的元素节点 addClass(elem,'intro'); //调用函数添加新样式 } }
把这些具体的值转为函数的参数,就可以让它成为一个更通用的函数。把改进后的新函数命名为styleElementSibling并给它添加两个
参数----tage和theclass:
function styleElementSibling(tag,theClass){
var elems=document.getElementsByTagName(tag);
for(var i=0;i<elems.length;i++){
var elem=getNextElement(headers[i].nextSibling); //调用函数获取h1后面的元素节点
addClass(elem,theClass); //调用函数添加新样式
}
}