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;
}

查看全文

相关阅读:
ognl的应用1
未命名
 flash钟表的实现
 文本显示输入字数
 HttpServlet session的用法： (2)
$.fx与$.fn.fx 区别
 javascript 事件冒泡和冒泡事件阻止
 (function($){...})(jQuery) 含义
 选择城市插件 jQuery
offset().left 用法

原文地址：https://www.cnblogs.com/positive/p/3677871.html