IFE_part2_JavaScript_DOM的具体用法
// DOM // 为element增加一个样式名为newClassName的新样式 // 另一种方法,element.classList.add('newClassName'),但是存在兼容性问题(不兼容IE10以下) function addClass(element, newClassName) { if (!hasClass(element, newClassName)) { element.className += " " + newClassName; // element.className += " " // element.className += newClassName } } // 移除element中的样式oldClassName // 也可以这样子写 // function removeClass(element, oldClassName) { // if (hasClass(element,oldClassName)) { // // 先获取element的所有classname // var elementClassName = element.className; // // 然后把oldclassname替换掉 // var newElementClassName = elementClassName.replace(oldClassName,""); // element.className = newElementClassName; // // 简写 element.className = element.className.replace(oldClassName,"") // } // } function removeClass(element, oldClassName) { if (hasClass(element,oldClassName)) { var oldClassNameReg = new RegExp("(\\s|^)" + oldClassName + "(\\s|$)"); element.className = element.className.replace(oldClassNameReg,""); } } // 判断siblingNode和element是否为同一个父元素下的同一级的元素,返回bool值 // var a = document.getElementByIdx_x_x("dom"); // var b = a.childNodes; 获取a的全部子节点 // var c = a.parentNode; 获取a的父节点 // var d = a.nextSbiling; 获取a的下一个兄弟节点 // var e = a.previousSbiling;获取a的上一个兄弟节点 // var f = a.firstChild; 获取a的第一个子节点 // var g = a.lastChild; 获取a的最后一个子节点 function isSiblingNode(element, siblingNode) { return element.parentNode === siblingNode.parentNode } // 获取element相对于浏览器窗口的位置,返回一个对象{x, y} // max() 方法可返回两个指定的数中带有较大的值的那个数。 function getPosition(element) { var position = {}; position.x = element.getBoundingClientRect().left + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);//获取相对位置+滚动距离=绝对位置. position.y = element.getBoundingClientRect().top + Math.max(document.documentElement.scrollTop, document.body.scrollTop); return position; } // 实现一个简单的Query function VQuery(selector, root) { //用来保存选择的元素 var elements = []; //保存结果节点数组 var allChildren = null; //用来保存获取到的临时节点数组 root = root || document; //若没有给root,赋值document switch (selector.charAt(0)) { //charAt() 方法可返回指定位置的字符。 case "#": //id选择器 elements.push(root.getElementById(selector.substring(1))); //push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。 break; case ".": //class选择器 if (root.getElementsByClassName) { //标准 elements = root.getElementsByClassName(selector.substring(1));//substring() 方法用于提取字符串中介于两个指定下标之间的字符。 } else { //兼容低版本浏览器 var reg = new RegExp("\\b" + selector.substring(1) + "\\b"); allChildren = root.getElementsByTagName("*"); for (var i = 0, len = allChildren.length; i < len; i++) { if (reg.test(allChildren[i].className)) { elements.push(allChildren[i]); } } } break; case "[": //属性选择器 // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 if (selector.indexOf("=") === -1) { //只有属性没有值的情况 allChildren = root.getElementsByTagName("*"); for (var i = 0, len = allChildren.length; i < len; i++) { if (allChildren[i].getAttribute(selector.slice(1, -1)) !== null) { elements.push(allChildren[i]); } } } else { //既有属性又有值的情况 var index = selector.indexOf("="); //缓存=出现的索引位置。 allChildren = root.getElementsByTagName("*"); for (var i = 0, len = allChildren.length; i < len; i++) { if (allChildren[i].getAttribute(selector.slice(1, index)) === selector.slice(index + 1, -1)) { elements.push(allChildren[i]); } } } break; default: //tagName elements = root.getElementsByTagName(selector); } return elements } /** * 模仿jQuery的迷你$选择符。 * @param {string} selector CSS方式的选择器,支持简单的后代选择器(只支持一级) * @returns {object} 返回获取到的第一个节点对象,后代选择器时,返回第一个对象中的第一个符合条件的对象 */ function $(selector) { //这里trim处理输入时两端出现空格的情况,支持ie9+。但是这个函数实现起来也特别简单,可以参考我task0002(-)前面有trim函数的实现。稍微修改一下,这样就没兼容性问题了。 if (selector == document) { return document; } selector = selector.trim(); //存在空格时,使用后代选择器 // selector去除前后空格后,若是字符串里面还有空格 if (selector.indexOf(" ") !== -1) { var selectorArr = selector.split(/\s+/); //分割成数组,第一项为parent,第二项为chlid。 //这里没去考虑特别多的情况了,只是简单的把参数传入。 return VQuery(selectorArr[1], VQuery(selectorArr[0])[0])[0]; } else { //普通情况,只返回获取到的第一个对象 return VQuery(selector,document)[0]; } }
其中实现简易query参考了这篇博文,感谢这位博主。