zoukankan      html  css  js  c++  java
  • 【DOM编程艺术】styleHeaderSibling函数以及nextSibling延伸(-获取下个元素节点)

    <!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;
    }
  • 相关阅读:
    设计者模式详解--代理模式
    设计者模式详解--适配器模式
    设计者模式详解--原型模式
    设计者模式详解--建造者模式
    设计者模式详解--单例模式
    设计者模式详解--抽象工厂模式
    设计者模式详解--工厂方法模式
    angularjs 选项卡 --- 自定义属性
    AngularJS 自定义指令
    Jquery中的prop()方法 全选或全不选
  • 原文地址:https://www.cnblogs.com/positive/p/3677871.html
Copyright © 2011-2022 走看看