一道题目引发页面取title自定义属性的深思

先看题目：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title objName="test0">HTML</title>
<script>
/*
* 题目：取出该html中所有的自定义属性为objName的对象，注意效率和兼容问题
*/
function getObjName() {            
}
</script>
    </head>
    <body>
        <div>
            <header objName="test1">
                <h1>HTML</h1>
            </header>
            <nav objName="test2">
                <p objName="test3">
                    <a href="/" objName="test4">Home</a>
                </p>
                <p>
                    <a href="/contact">Contact</a>
                </p>
                <p>
                    <input type="text"  objName="test5" />
                </p>
            </nav>
            <div objName="test6"></div>
            <div></div>
            <footer>
                <p objName="test7">
                    &copy; Copyright  by Administrator
                </p>
            </footer>
        </div>
    
    </body>
</html>

 

开始做题（暂时不考虑onload与DOMContentLoaded的性能问题）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title objName="test0">HTML</title>
<script>
/*
* 题目：取出该html中所有的自定义属性为objName的对象，注意效率和兼容问题
*/
function getObjName() { 
    if(document.querySelectorAll){
        return document.querySelectorAll ("[objName]");
    }else{
        var doms = document.getElementsByTagName("*"),
            len = doms.length,
            domCache = [],
            i = 0;
        for( ;i < len; i++ ){
            doms[i].hasAttribute("objname") && domCache.push(doms[i]);
        }
        return domCache;
    }               
}
window.onload = function() {
    alert(getObjName().length);
    console.log("doms",getObjName());
    console.log("doms",getObjName().length);
}
</script>
    </head>
    <body>
        <div>
            <header objName="test1">
                <h1>HTML</h1>
            </header>
            <nav objName="test2">
                <p objName="test3">
                    <a href="/" objName="test4">Home</a>
                </p>
                <p>
                    <a href="/contact">Contact</a>
                </p>
                <p>
                    <input type="text"  objName="test5" />
                </p>
            </nav>
            <div objName="test6"></div>
            <div></div>
            <footer>
                <p objName="test7">
                    &copy; Copyright  by Administrator
                </p>
            </footer>
        </div>
    
    </body>
</html>

结果：在ie6，7，8下面取不出title，其他浏览器下能够全部取出。

去伪存真，我们再看下面的源码：

<html>
    <head>
        <title objName="test0">HTML</title>
<script>
window.onload = function() {
    alert(document.getElementsByTagName("*")[2].getAttribute("objName"));
    alert(document.getElementsByTagName("*")[5].getAttribute("objName"));
}
</script>
    </head>
    <body>
        <div objName="test1">1</div>
    </body>
</html>

ie下面取出的是：null,test1 而其他浏览器下取出的是test0,test1。

都不行，那我们借用无敌的jquery看看吧。

<html>
    <head>
        <title objName="test0">HTML</title>
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
window.onload = function() {
    alert($("[objName]")[0].nodeName);
}

</script>
    </head>
    <body>
        <div objName="test1">1</div>
    </body>
</html>

ie下结果：DIV 其他浏览器下结果：TITLE

结果依然不同，这是不是jquery的bug我们暂且不管，先解决问题，再看下面的源码。

<html>
    <head objName="test">
        <title objName="test0">HTML</title>
        <meta objName="test1" />
    </head>
    <body>
        <div objName="test2">1</div>
    </body>
    <script>
    alert(document.getElementsByTagName("*")[1].getAttribute("objName"));
    alert(document.getElementsByTagName("*")[2].getAttribute("objName"));
    alert(document.getElementsByTagName("*")[3].getAttribute("objName"));
    alert(document.getElementsByTagName("*")[5].getAttribute("objName"));
</script>
</html>

问题症结终于找到了，原来在ie下取title的自定义数据取不到的。那么该怎么解决这个问题呢？

我们进入ie的调试工具看一下：

title的objName没有了！原来ie在做dom解析的时候就已经把title过滤了。

我们再看下面的源码：

<html>
    <head objName="test">
        <title objName="test0" id="t1" name="t2">HTML</title>
<script>
    alert(document.getElementsByTagName("title")[0].outerHTML);
</script>
        <meta objName="test1" />
    </head>
    <body>
        <div objName="test2">1</div>
    </body>
    
</html>

ie的调试工具：

貌似title的属性只认id。那么我们看看title能不能动态设置属性：

<html>
    <head objName="test">
        <title objName="test0">HTML</title>
<script>
var title = document.getElementsByTagName("title")[0];
title.setAttribute("objName","test1");
alert(title.outerHTML);
</script>
        <meta objName="test1" />
    </head>
    <body>
        <div objName="test2">1</div>
    </body>
</html>

ie和其他浏览器都可以。

由此得出结论，ie在页面渲染的时候就已经把title的自定义属性给过滤掉了，所以取不到值。所以，在给对象设置属性的时候建议不要给title设置属性，如果非要设置，请在页面加载完之后再设。

 

posted @ 2012-07-23 15:06  xpbb  阅读(498)  评论(0)    收藏  举报