【DOM编程艺术】综合示例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Jay Skript And The Domsters</title>
  <script src="scripts/modernizr-1.6.min.js"></script>
  <link rel="stylesheet" media="screen" href="styles/basic.css" />
</head>
<body>
  <header>
    <img src="images/logo.gif" alt="Jay Skript and the Domsters" />
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="photos.html">Photos</a></li>
        <li><a href="live.html">Live</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  <article>
    <h1>Welcome</h1>
    <p id="intro">Welcome to the official website of Jay Skript and the Domsters. Here, you can <a href="about.html">learn more about the band</a>, view <a href="photos.html">photos of the band</a>, find out about <a href="live.html">tour dates</a> and <a href="contact.html">get in touch with the band</a>.</p>
  </article>
  <script src="scripts/global.js"></script>
</body>
</html>

global.js

function addLoadEvent(func){
    var oldonload = window.onload;
    if(typeof window.onload != 'function'){
        window.onload = func;
    }else{
        window.onload = function(){
            oldonload();
            func();
        }
    }    
}

function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;
    if( parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

function addClass(element,value){
    if(!element.className){
        element.className = value;
    }else{
        newClassName = element.className;
        newClassName += ' ';
        newClassName += value;
        element.className = newClassName;
    }
}

function highlightPage(){
    if( !document.getElementById) return false;
    if( !document.getElementsByTagName ) return false;
    var headers = document.getElementsByTagName('header');
    if( headers.length == 0) return false;
    var navs = headers[0].getElementsByTagName('nav');
    if( navs.length == 0 ) return false;
    var links = navs[0].getElementsByTagName('a');
    var url = window.location.href;
    for(var i=0;i<links.length;i++){
        var linkurl = links[i].getAttribute('href');
        if( url.indexOf(linkurl) != -1 ){
            links[i].setAttribute('href','#');
            links[i].className = 'here' ;
        }
    }
}
addLoadEvent(highlightPage);

 

posted @ 2014-04-29 16:20  Western Journey  阅读(246)  评论(0)  编辑  收藏  举报