先看题目：
<!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">
© 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">
© 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设置属性，如果非要设置，请在页面加载完之后再设。