Dome.prototype.addClass = function (classes) { var className = ""; if (typeof classes !== "string") { for (var i = 0; i < classes.length; i++) { className += " " + classes[i]; } } else { className = " " + classes; } return this.forEach(function (el) { el.className += className; }); };
很直观吧？嘿嘿
现在，写下removeClass()，同样简单。不过每次只允许删除一个class名称。
Dome.prototype.removeClass = function (clazz) { return this.forEach(function (el) { var cs = el.className.split(" "), i; while ( (i = cs.indexOf(clazz)) > -1) { cs = cs.slice(0, i).concat(cs.slice(++i)); } el.className = cs.join(" "); }); };
对于每一个元素，我们都将el.className 分割成一个字符串数组。那么我们使用一个while循环连接，直到cs.indexOf(clazz)返回值大于-1。我们将得到的结果join成el.className。
第七步: 修复一个IE引起的BUG
我们处理的最糟浏览器是IE8.在这个小小的库中,只有一个IE引起的BUG需要去修复; 并且谢天谢地,修复它非常简单.IE8不支持Array的方法indexOf;我们需要在removeClass方法中使用到它, 下面让我们来完成它:
if (typeof Array.prototype.indexOf !== "function") { Array.prototype.indexOf = function (item) { for(var i = 0; i < this.length; i++) { if (this[i] === item) { return i; } } return -1; }; }
它看上去非常简单,并且它不是完整实现(不支持使用第二个参数),但是它能实现我们的目标.
第8步: 调整属性
现在,我们想要一个attr函数。这将很容易，因为它几乎和text方法或者html方法是一样的。像这些方法，我们都能够设置和得到属性：我们将设置一个属性的名称和值，同时只通过参数名来得到值。
Dome.prototype.attr = function (attr, val) { if (typeof val !== "undefined") { return this.forEach(function(el) { el.setAttribute(attr, val); }); } else { return this.mapOne(function (el) { return el.getAttribute(attr); }); } };
如果形参有一个值，我们将遍历元素并通过元素的setAttribute方法设置属性值。另外，我们将使用mapOne返回通过getAttribute方法得到参数。
第9步: 创建元素
像任何一个优秀的框架一样，我们也应该能够创建元素。当然，在Demo实例中没有一个好的方法，所以让我们来把方法加入到demo工程中。
var dome = { // get method here create: function (tagName, attrs) { } };
正如你所看到的：我们需要两个形参：元素名，和一个参数对象。大多数的属性通过我们的arrt方法被使用，但是tagName和attrs却有特殊待遇。我们为className属性使用addClass方法，为text属性使用text方法。当然，我们首先要创建元素，和Demo对象。下面就是所有的作用：
create: function (tagName, attrs) { var el = new Dome([document.createElement(tagName)]); if (attrs) { if (attrs.className) { el.addClass(attrs.className); delete attrs.className; } if (attrs.text) { el.text(attrs.text); delete attrs.text; } for (var key in attrs) { if (attrs.hasOwnProperty(key)) { el.attr(key, attrs[key]); } } } return el; }
如上，我们创建了元素，将他发送到新的Dmoe对象中。接着，我们处理所有属性。注意：当使用完className和text属性后，我们不得不删除他们。这将保证当我们遍历其他的键时，它们还能被使用。当然，我们最终通过返回这个新的Demo对象。
我们创建了新的元素，我们想要将这些元素插入到DOM，对吧？
第10步：尾部添加（Appending）与头部添加（Prepending）元素
下一步，我们来实现尾部添加与头部添加方法。考虑到多种场景，实现这些方法可能有些棘手。下面是我们的想要达到的效果：
dome1.append(dome2); dome1.prepend(dome2);
IE8对我们来说就是一奇葩。
尾部添加或头部添加，包括以下几种场景：
单个新元素添加至单个或多个已存在元素中
多个新元素添加至单个或多个已存在元素中
单个已存在元素添加至单个或多个已存在元素中
多个已存在元素添加至单个或多个已存在元素中
注意：这里的”新元素“表示还未加入DOM中节点元素，”已存在元素“指已存在于DOM中的节点元素。
现在让我们一步步来实现之：
Dome.prototype.append = function (els) { this.forEach(function (parEl, i) { els.forEach(function (childEl) { }); }); };