Chrome console 出现的 Uncaught TypeError: Cannot read property 'attributes' of undefined 应该怎么排查呢？

[isbase]

Uncaught TypeError: Cannot read property 'attributes' of undefined
Uncaught TypeError: Cannot read property 'nodeType' of undefined



这是出问题代码片段
element = document.getElementsByTagName('*');
var l = element.length;
for (var j = 0; j < l; j++) {
if (element[j].attributes['class'] != undefined && element[j].attributes['class'].value === 'github') {
element = element[j];
}
}




我在 console 里手工测试 document.getElementsByTagName('*')[key].attributes['class'] != undefined && document.getElementsByTagName('*')[key].attributes['class'].value === 'github' 是没问题的
循环中会出现的元素我都在console手工测试过，所以元素明明都是可以使用attributes和nodeType的

[tudou527]

这个报错不是已经很明确了吗？你要找 xxx.attributes 和 ooo.nodeType ，但是 xxx 和 ooo 不存在。

[oxyflour]

element = element[j];

说一下你想对 element 做什么奇怪的事情？

[jings]

@tudou527 泥垢了😅
^﹏^
用原生的 DOM 写是有多累。

[aivier]

@jings 我觉得比带几百 K 的库好多了，楼主写法比较奇特...所以看着很累，让我写的话，
document.get....("*").forEach(func (){
});

[isbase]

@tudou527 就是疑惑为什么会找不到呢 我在 chrome 控制台手工输入是可以找到的

[isbase]

@oxyflour
@tudou527
@aivier


完整代码

function $(selector) {
var str = selector.split(' '),
temp,
element = document;
for (var i = 0; i < str.length; i++) {//ID
if (str[i].indexOf('#') === 0) {
temp = str[i].replace('#', '');
element = element.getElementById(temp);
}
else if (str[i].indexOf('.') === 0) {//Class
temp = str[i].replace('.', '');
element = element.getElementsByClassName(temp)[0];
}
else if (str[i].indexOf('#') === -1 && str[i].indexOf('.') === -1 && str[i].indexOf('[') === -1) {//Tag
element = element.getElementsByTagName(str[i])[0];
}
else if (str[i].indexOf('[') === 0 && str[i].indexOf('=') === -1) {//属性
temp = str[i].replace('[', '').replace(']', '');
for (var element = element.getElementsByTagName('*'), j = 0; j < element.length; j++) {
if (element[j].hasAttribute(temp) === true) {
element = element[j];
}
}
}
else {//属性值
temp = str[i].replace('[', '').replace(']', '');
temp = temp.split('=');
element = element.getElementsByTagName('*');
var l = element.length;
for (var j = 0; j < l; j++) {
if (element[j].attributes[temp[0]] != undefined && element[j].attributes[temp[0]].value === temp[1]) {
element = element[j];
}
}
}
}
return element;
}

[xwartz]

= = 打个断点就可以查看哪里不对啊。。这样的代码格式，谁愿意看。。

[isbase]

@xwartz 回复不能用 Markdown

[Slienc7]

可以 gist 贴代码
逐步 console.log 出来即可

[isbase]

@xgowex
@tudou527
@oxyflour
@xwartz


JS CODE
https://gist.github.com/isbaseby/774d363544c4abeadcd0

HTML CODE
https://gist.github.com/isbaseby/14f5903b85ad51f78613

在 chrome console 输入 $("[class=baidu]") 就会出现错误

[xwartz]

@isbase = = 运行了下，没报错