【DOM编程艺术】styleHeaderSibling函数以及nextSibling延伸(-获取下个元素节点）

最新推荐文章于 2024-07-18 13:52:01 发布

weixin_34259159

最新推荐文章于 2024-07-18 13:52:01 发布

阅读量140

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/positive/p/3677871.html

版权

<!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获取到的是换行符\n

function getNextElement(node){
    if(node.nodeType == 1){
        return node;
    }
    if(node.nextSibling){
        return getNextElement(node.nextSibling);    
    }
    return null;
}

转载于:https://www.cnblogs.com/positive/p/3677871.html

weixin_34259159

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【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><...
复制链接

扫一扫