以前很多时候为了快速开发,都是直接使用jQuery等框架。
直到有一天由于网络原因jQuery官网打不开手边又没带U盘,于是写起了原生JS,手下各种不顺。
从来只是用,却没思考过JQuery是怎么实现那些方便快捷的DOM操作,到了这个时候也不得不思考一下了。
于是写了几个函数应急,在此记录一下姿势水平。
等到将来我学习了一个,回过头来再看吧。
'use strict'
function prevSiblings(element, attributeName, attributeValue) {
//arguments:element[, attributeName, attributeValue]
//typeof attributeName == 'string'&& typeof attributeValue == 'string'
var t = [];
var p = element.previousElementSibling;
if (p) {
if (attributeName && attributeValue) {
if (attributeName.toLowerCase() === 'class') {
if (hasClass(element, attributeValue)) {
t.unshift(p);
prevSiblings(p, attributeName, attributeValue);
}
else {
prevSiblings(p, attributeName, attributeValue);
}
}
else if (p.getAttribute(attributeName) === attributeValue) {
t.unshift(p);
prevSiblings(p, attributeName, attributeValue);
}
else {
prevSiblings(p, attributeName, attributeValue);
}
}
else {
t.unshift(p);
prevSiblings(p);
}
}
return t;
}
function nextSiblings(element, attributeName, attributeValue) {
//arguments:element[, attributeName, attributeValue]
//typeof attributeName == 'string' && typeof attributeValue == 'string'
var t = [];
var p = element.nextElementSibling;
if (p) {
if (attributeName && attributeValue) {
if (toLowerCase(attributeName) === 'class') {
if (hasClass(element, attributeValue)) {
t.push(p);
nextSiblings(p, attributeName, attributeValue);
}
else {
nextSiblings(p, attributeName, attributeValue);
}
}
else if (p.getAttribute(attributeName) === attributeValue) {
t.push(p);
nextSiblings(p, attributeName, attributeValue);
}
else {
nextSiblings(p, attributeName, attributeValue);
}
}
else {
t.push(p);
nextSiblings(p);
}
}
return t;
}
function elementChildren(element, attributeName, attributeValue) {
//arguments:element[, attributeName, attributeValue]
//typeof attributeName == 'string' && typeof attributeValue == 'string'
var t = [];
if (element && element.hasChildNodes()) {
var c = element.childNodes;
for (var i = 0; i < c.length; i++) {
if (c[i].nodeName.indexOf('#') == -1) {
if (attributeName && attributeValue) {
if (toLowerCase(attributeName) === 'class' && hasClass(c[i], attributeValue)) {
t.push(c[i]);
}
else if (c[i].getAttribute(attributeName) === attributeValue) {
t.push(c[i]);
}
}
else {
t.push(c[i]);
}
}
}
}
return t;
}
function hasClass(element, classStr) {
//arguments:element[, classStr, classStr, ...]
//typeof classStr == 'string'
if (element.className === null || undefined || '') {
return false;
}
else {
var t = element.split(' ');
for (var i = 0; i < t.length; i++) {
if (t[i] === classStr) {
return true;
break;
}
}
return false;
}
}
function removeClass(element, classStr) {
//arguments:element[, classStr, classStr, ...]
//typeof classStr == 'string'
if (!hasClass(element, classStr)) {
return;
}
else {
var t = element.className.split(' ');
if (t.length > 0) {
for (var i = 0; i < t.length; i++) {
if (t[i] == classStr) {
t.splice(i, 1);
element.className = t.join(' ');
return;
break;
}
}
return;
}
}
}