返回信息流下面是要求，自己不会写，参考下别人的，很惭愧，看不懂，掩面~~o(>_<)o ~~，小语句不懂，大一点的功能也不明白。。。大神能不能解答一下疑惑，疑问在代码注释中，多谢[ema41]
功能要求
$("#adom"); // 返回id为adom的DOM对象
// 可以通过tagName获取DOM对象，例如
$("a"); // 返回第一个<a>对象
// 可以通过样式名称获取DOM对象，例如
$(".classa"); // 返回第一个样式定义包含classa的对象
// 可以通过attribute匹配获取DOM对象，例如
$("[data-log]"); // 返回第一个包含属性data-log的对象
$("[data-time=2015]"); // 返回第一个包含属性data-time且值为2015的对象
// 可以通过简单的组合提高查询便利性，例如
$("#adom .classa");//返回id为adom的DOM所包含的所有子节点中，第一个样式定义包含classa的对象
代码如下：
<script>
/**
*mini $
*@param {string} selector选择器
*@return {Array.<HTMLElement>} 返回匹配的元素列表
*/
function $(selector) {
/[color=#0000FF]/疑问一？？ \w 不是包括[A-Z a-z 0-9_] 。么，那\w_什么意思。[/color]
var idReg = /^#([\w_\-]+)/;
var classReg = /^.([\w_\-]+)/;
var tagReg = /^\w+$/i;
// [data-log]
// [data-log = "test"]
// [data-log = test]
// [data-log = 'test']
//疑问二??正则表达式含义不懂 且\3查不到，感觉应该写为/^\[(\w+)? (=["']?(\w+)["']?)?/
// 但是怎么能实现 双引号和单引号一致，正则里可不可以用三目运算符
var attrReg = /(\w+)?\[([^=\]]+)(?:=(["'])?([^\]"']+)\3?)?\]/;
//不考虑‘>’、‘~’等嵌套关系
//父子选择器之间用空格相隔
var context = document;
//疑问三？？本函数是什么意思 blank,且下面actions的取值
function blank() {}
function direct(part, actions) {
actions = actions || {
id: blank,
className: blank,
tag: blank,
attribute: blank
};
var fn;
//疑问四 ？？？什么意思,且result在本函数中未声明
var params = [].slice.call(arguments, 2);
//id
if (result = part.match(idReg)) {
fn = 'id';
params.push(result[1]);
}
//class
else if (result = part.match(classReg)) {
fn = 'className';
params.push(result[1]);
}
//tag
else if (result = part.match(tagReg)) {
fn = 'tag';
params.push(result[0]);
}
//attribute
else if (result = part.match(attrReg)) {
fn = 'attribute';
var tag = result[1];
var key = result[2];
var value = result[4];
params.push(tag, key, value);
}
//疑问五？？ actions的参数
return actions[fn].apply(null,params);
}
function find(parts, context) {
var part = parts.pop();
var actions = {
id: function (id) {
//疑问六：？？为何用[]，这是json，数组么
return [
document.getElementById(id);
];
},
className: function (className) {
var result = [];
if(context.getElementsByClassName) {
//疑问六，不是没有 这个getElementsByClassName的方法，要不要加函数？？？？
result = context.getElementsByClassName(className )
}
else {
//从html标签开始从上向下依次遍历所有便签元素
var temp = context.getElementsByTagName('*');
for (var i = 0, len = temp.length; i < len;i++) {
var node = temp[i];
//若节点中有className，则堆入result中
if(hasClass(node, className)) {
result.push(node);
}
}
}
return result;
} ,
tag: function (tag) {
return context.getElementsByTagName(tag);
},
attribute: function (tag, key, value) {
var result = [];
//获得tag或所有html标签
var temp = context.getElementsByTagName(tag || '*');
for (var i = 0, len = temp.length; i < len; i++) {
var node = temp[i];
if(value) {
//获取 key 属性的值
var v = node.getAttribute(key);
//疑问七： 下面式子什么意思，都执行还是逻辑值,要是逻辑值写在这里干什么
(v === value) && result.push(node);
}
//element.hasAttribute(attributename),返回boolean值，若存在 返回true
//若属性没有值，把 key给result
else if(node.hasAttribute(key)) {
result.push(node);
}
}
return result;
}
};
//direct 的获取,,上有函数
var ret = direct(part, actions);
//to array
//疑问八： 把ret转换成数组，把数组slice？？如何slice，没有 call(ret,n)之类的
ret = [].slice.call(ret);
//三目运算符，
return parts[0] && ret[0] ? filterParents(parts, ret) : ret;
}
function filterParents(parts, ret) {
var parentPart = parts.pop();
var result = [];//空数组
for (var i = 0, len = ret.length; i < len; i++) {
var node = ret[i];
var p = node;
// 如果p无父元素
while (p = p.parentNode) {
var actions = {
id: function (el, id) {
return (el.id === id);
},
className: function (el, className) {
return hasClass(el,className);
},
tag: function (el, tag) {
return (el.tagName.toLowerCase()) === tag);
},
attribute: function (el, tag, key, value) {
var valid = true;
if(tag) {
valid = actions.tag(el, tag);
}
valid = valid && (value === el.getAttribute(key));
if (value) {
valid = valid && (value === el.getAttribute(key))
}
return valid;
}
};
var matches = direct(parentPart, actions, p);
if(matches) {
break;
}
}
if(matches) {
result.push(node);
}
}
return parts[0] && result[0] ? filterParents(parts, result) :result;
}
var result = find(selector.split(/\s+/), context);
return result;
}
function hasClass(element, className){
var classNames = element.calssName;
if(!className) {
return false;
}
classNames = classNames.split(/\s+/);
for (var i = 0, len = classNames.length; i < len; i++) {
//原来用match 做的， className[i] === 第一次用要记住
if(classNames[i] === className) {
return true;
}
}
return false;
}
</script>
这是一条镜像帖。来源：北邮人论坛 / www-technology / #30472同步于 2015/6/9
该镜像源已超过 30 天没有更新，可能在源站已被删除。
WWWTechnology机器人发帖
[问题]求指导，示例代码看不懂，实现DOM元素获取，不用JQUERY
yunjunian
2015/6/9镜像同步19 回复
订阅后，新回复会通过你的通知中心匿名送达。
9 条回复
这就是jquery啊，不是dom。jquery返回的都是jquery对象，里面有jquery方法，以及被选的dom节点。可以看下jquery 的api，里面的注释说明不全是对的
发自「贵邮」
...\w是单词字符啊，不包括'_'，所以『\w_』就是匹配单词字符和下划线呗。楼主还是不懂正则吧？
其实他的做法就是先正则匹配，判断是ID，还是class，还是attr。然后分别调用原生的getElementById啊
之类的方法。
【 在 biger 的大作中提到: 】
: ...\w是单词字符啊，不包括'_'，所以『\w_』就是匹配单词字符和下划线呗。楼主还是不懂正则吧？
: 其实他的做法就是先正则匹配，判断是ID，还是class，还是attr。然后分别调用原生的getElementById啊
: 之类的方法。
就是有的说明\w 表示任意单一字符，包括a~z 、A~Z 、0~9 或下划线，所以就想再确认一下 ，这个正则里面的 \3 确实不懂。。 这段大致思路肯定是懂得，就是细究起来有不明白的地方，百度相关信息比较少。。题主会再慢慢看的，谢谢您了
从头学，完整的学，千万不要靠百度学前端，费时还没效果，另外别用百度，太坑爹。。
另外建议去看下JQuery入门书（我看的是《锋利的JQuery》），浏览式的那种就行，用心看的话一天就能过完
一行一行细看代码是没有问题的，但在这之前如果储备些基本的知识，你就不会有越级打怪的问题了
咦，我之前测试不包括下划线啊。。难道我看错了么。
【 在 yunjunian 的大作中提到: 】
: 就是有的说明\w 表示任意单一字符，包括a~z 、A~Z 、0~9 或下划线，所以就想再确认一下 ，这个正则里面的 \3 确实不懂。。 这段大致思路肯定是懂得，就是细究起来有不明白的地方，百度相关信息比较少。。题主会再慢慢看的，谢谢您了