<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Man bites dog</title> </head> <body> <h1>Hold the front page</h1> <p>This first paragraph leads you in.</p> <p>Now you get the nitty-gritty of the story</p> <p>The most important information is delivered first</p> <h1>Extra! Extra!</h1> <p>Further development are unfolding.</p> <p>You can read all about it here.</p> <script> addLoadEvent(styleHeaderSibling); function styleHeaderSibling(){ var headers=document.getElementsByTagName('h1'); for(var i=0;i<headers.length;i++){ var elem=getNextElement(headers[i].nextSibling); //调用函数获取h1后面的元素节点 elem.style.fontWeight = 'bold'; elem.style.fontSize = '1.2em'; } } function getNextElement(node){ if(node.nodeType == 1){ return node; } if(node.nextSibling){ return getNextElement(node.nextSibling); } return null; } function addLoadEvent(func){ var oldEvent = window.onload; if(typeof window.onload != 'function') { window.onload = func; }else{ window.onload = function(){ oloEvent(); func(); } } } </script> </body> </html>
nextSibling是获取下一个节点,而不是获取元素节点。nextSibling获取到的是换行符
function getNextElement(node){
if(node.nodeType == 1){
return node;
}
if(node.nextSibling){
return getNextElement(node.nextSibling);
}
return null;
}