в JS нет худших и лучших функций, все нужны и полезны в конкретных ситуациях

Я бы еще добавил динамическую подгрузку JavaScript файлов, например этот метод: http://www.artlebedev.ru/tools/technogrette/js/include/

или метод который используется в Scriptalicous

Не нашел куда написать, поэтому пишу сюда. Я написал самое компактное определение IE из всех которые я знаю. Думаю пригодится:

var ie=!-[1,];
alert(ie);

можно и в 5 символов, но будет возвращаться false в эксплорере

var notie=-[1,];
alert(notie);

Используется баг с подсчетом элементов массива.

Подробнее здесь: линк

Статью переписал. Как следствие, многие комментарии перестали относиться к переписанному варианту и были убраны.
По виду, получилось более актуально чем было...

Функции setCookie и getCookie работают в FireFox, но не работают в Chrome:

setCookie('Test1', 'TestText1', "");
alert(getCookie('Test1'));

В чём тут дело? Либо можно пример вызова, который точно работает?

Объясните пожалуйста, зачем в функции getElementsByClass():
a) нужна переменная key
b) нужны границы слова в

'\\b' + classArray[j] + '\\b'

Всё. Дошло. На самом деле "\\b" нужно не для того чтобы обрабатывать элементы с несколькими классами. А для таких случаев, если у меня есть один элемент с "class1" и другой элемент с "class11111". Без "\\b" по запросу "class1" будут найдены оба элемента.

Пожалуйста верните комментарий, в котором приведены аналоги на JQuery.
Он был очень полезным.

Нашел красивейшую функцию по замене inArray:

function oc(a) {
	var o = {};
	
	for (var i = 0, l = a.length; i < l; i++) {
		o[a[i]] = '';
	}
	
	return o;
}

alert('test' in oc(['te', 'st', 'test']));
alert('test' in oc(['te', 'st', 'es', 't']));
alert(25 in oc([1, 2, 3, 4, 25]));
alert(1 in oc([2, 3, 4, 25]));

Источник

Функция insertAfter не будет работать, если попытаться вставить ноду после последнего элемента в узле, т.к. его nextSibling == null. Вот рабочий вариант:

function insertAfter(node, ref_node) {
	var next = ref_node.nextSibling;

	if (next) next.parentNode.insertBefore(node, next);
	else ref_node.parentNode.appendChild(node);
}

Можно обойтись и без дополнительной переменной next, но так наглядней...

Отличная подборка сценариев Обожаю ваш блог и ваш труд

Илья, мне кажется пример с getElementsByClassName() может ввести в заблуждение новичков, потому как этот метод по спецификации принимает один аргумент, а у тебя в примере использования их несколько причем еще и ID. Для этого есть querySelector(), querySelectorAll();

К тому же код можно упростить, сделать более универсальным, а также значительно увеличить производительность:

<script type="text/javascript">
window.onload = function() {
	getElementsByClass = function(getClass){
		if(document.querySelectorAll) {
			return document.querySelectorAll("." + getClass);
		}
		else if(document.getElementsByClassName) {
			return document.getElementsByClassName(getClass);
		}
		else {
			var list = document.getElementsByTagName('*'), i = list.length,
			classArray = getClass.split(/\s+/), result = [];
			while(i--) {
				if(list[i].className.search('\\b' + classArray + '\\b') != -1) {
					result.push(list[i]);
				}
			}
			return result;
		}
	};
	getElementsByClass('class')[0].style.color = 'red';
};
</script>
<p class="class">text</p>

PS: добавление querySelectorAll() дает нам возможность работать с IE8+, а обратный цикл уменьшает время выполнения функции в несколько раз

Функция getElementsByClass() работает неверно в IE при поиске узлов с несколькими классами.

<script type="text/javascript">
if(document.getElementsByClassName) {

	getElementsByClass = function(classList, node) {    
		return (node || document).getElementsByClassName(classList)
	}

} else {

	getElementsByClass = function(classList, node) {			
		var node = node || document,
		list = node.getElementsByTagName('*'), 
		length = list.length,  
		classArray = classList.split(/\s+/), 
		classes = classArray.length, 
		result = [], i,j
		for(i = 0; i < length; i++) {
			for(j = 0; j < classes; j++)  {
				if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
					result.push(list[i])
					break
				}
			}
		}
	
		return result
	}
}

		elems=getElementsByClass('par par1');
		for (var i=0;elems.length;i++)
			elems[i].style.color='red';
		</script>

<p class="par">Текстовый блок</p>
<p class="par par1">Текстовый блок под номером два</p>

В FF и Opera будет выделен второй абзац, т.к. используется встроенная функция, а IE выделит оба.

8) getElementsByClass()
Все таки не представлен настоящии универсальный метод:(
По моему самый лучшии вариант от monolithed
НО он загружает только 1 класс
Как правильно сделать полный обход?

var classl=getElementsByClass('class1').length;
for (var i=0; i<classl; i++) {
getElementsByClass('class1')[i].style.color='red';
};// пока только так придумал.. подскажите плиз

Я для себя написал вот такой inArray, он работает и для многомерных массивов

Array.prototype.inArray = Array.prototype.indexOf ? function(elem){
		for(var i = 0, len = this.length; i < len; i ++){
			if(this.indexOf(elem) != -1 || (this[i] instanceof Array && this[i].inArray(elem))){
				return true;
			}
		}
		return false;
	} : function(elem){
			for(var i = 0, len = this.length; i < len; i ++){
				if(elem === this[i] || (this[i] instanceof Array && this[i].inArray(elem))){
					return true;
				}
			}
			return false;
		}

Точнее так

Array.prototype.inArray = Array.prototype.indexOf ? function(elem){
		if(this.indexOf(elem) != -1){
			return true;
		}else{
			for(var i = 0, len = this.length; i < len; i ++){
				if(this[i] instanceof Array && this[i].inArray(elem)){
					return true;
				}
			}
		}
		return false;
	} : function(elem){
			for(var i = 0, len = this.length; i < len; i ++){
				if(elem === this[i] || (this[i] instanceof Array && this[i].inArray(elem))){
					return true;
				}
			}
			return false;
		}

Ошибка в inArray(), строка 8. вместо a[] надо arr[]

document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};

GET
CLASS

Как по мне, так такой вариант выборки классов будет побыстрее:

getElementsByClassName = function(klass, root) {
	root = root || document;
	if (root.querySelectorAll) {
		return root.querySelectorAll('.' + klass)
	} else if (root.getElementsByClassName) {
		return root.getElementsByClassName(klass)
	} else {
		var list = root.all || root.getElementsByTagName('*');
		var result = [];
		for (var index = 0,
		elem; elem = list[index++];) {
			if (elem.className && (' ' + elem.className + ' ').indexOf(' ' + klass + ' ') > -1) {
				result[result.length] = elem
			}
		}
		return result
	}
};

мой вариант функции inArray
без цикла, и символов меньше

А не легче использовать такой код:

document.getElementsByClassName = function (cl) {
     return document.querySelectorAll('.' + cl);
}

Или я чего-то не понимаю?

8) getElementsByClass()

if(document.getElementsByClassName){
 /*
 Здесь логика AND:
 getElementsByClassName - ищет строгое соответствие строке classList
 т.е. к элементу должно быть применено class1 && class2
*/
}else{
 /*
 Здесь логика OR:
 разбор строки classList
 т.е. к элементу может быть применено море классов и поиск такой
 class1 || class2
*/
}

Вариант:

if(document.getElementsByClassName){
  var getElementsByClass = function(classList, node){
  var node = node || document,
       classArray = classList.split(/\s+/),
       result=[];
  for(i=0; i<classArray.length; i++){
    j=node.getElementsByClassName(classArray[i]);
    if(j!='undefined'){
     result.push(node.getElementsByClassName(classArray[i]));
    }
  }
  return result;//aray nodes
 }
}else{
// ... для недобраузеров код прежний
}

Подскажите, пожалуйста setCookie(name, value, props)
как у эту функцию установить время или дату.
я так понимаю что она сидит в props
как задать в него параметры

подскожите пож. как из .csv где есть много строк, наити самыю длиныю строку и выведить её ,при етом показати сколько букв содержит строка и какой ряд?

Предлагаю свой вариант работы с классами:

var has_class=function(obj,class_name){	return _has_class.apply(null,arguments); };
	var _has_class=function(obj,class_name){
		
		var hc1=function( obj , class_name ){ return obj.classList.contains(class_name); }
		var hc2=function( obj , class_name ){ class_name = " " + class_name + " "; return ( (' '+obj.className+' ').indexOf(class_name) >= 0 );	}
		
		if( obj.classList ){ _has_class=hc2; }else{	_has_class=hc2;	}		
		hc1=hc2=null;
		return _has_class.apply(null,arguments);
	};
	
	var add_class=function( obj , class_name ){return _add_class.apply(null,arguments); };
	var _add_class=function( obj , class_name ){
		var ac1=function( obj , class_name ){	obj.classList.add(class_name); return this;}			
		var ac2=function( obj , class_name ){
			var re = new RegExp("(^|\\s)" + class_name + "(\\s|$)", "g");
			if (!re.test(obj.className)) {obj.className = (obj.className + " " + class_name).replace(/\s+/g, " ").replace(/(^ | $)/g, "");}
		};
		
		if( obj.classList ){ _add_class=ac1; }else{ _add_class=ac2;	}
		ac1=ac2=null;
		_add_class.apply( null, arguments );
	};
	
	var remove_class=function( obj , class_name ){ return _remove_class.apply(null,arguments); };
	var _remove_class=function( obj , class_name ){
		var rc1=function( obj , class_name ){ obj.classList.remove(class_name); };			
		var rc2=function( obj , class_name ){
			var re = new RegExp("(^|\\s)" + class_name + "(\\s|$)", "g"); obj.className = obj.className.replace(re, "$1").replace(/\s+/g, " ").replace(/(^ | $)/g, "");
		}
		if( obj.classList ){_remove_class=rc1;}else{_remove_class=rc2;}
		rc1=rc2=null;
		remove_class.apply(null,arguments);
	};

Немного сжато, рабочий вариант.
Применен шаблон самоопределяемых функций.
Функции обертки нужны, чтобы иметь возможность правильно импортировать функции из области видимости.

Преимущества: определение пути выполнения осуществляется только один раз, при первом вызове функции, при этом используются возможности HTML5. Нормальные браузеры будут работать еще быстрее (чем в JQuery, но не проверял), не нормальные - на том же уровне.

Немного переживаю за излишнее замыкание, но пошел на наго из-за компактности.

Еще пара функций:

var get_offset=function(elem){ return _get_offset(elem); };
	var _get_offset=function(elem){
	
		var __getOffsetRect=function(elem) {
			var box = elem.getBoundingClientRect();
			var body = document.body;
			var docElem = document.documentElement;
			var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
			var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
			var clientTop = docElem.clientTop || body.clientTop || 0;
			var clientLeft = docElem.clientLeft || body.clientLeft || 0;
			var top  = box.top +  scrollTop - clientTop;
			var left = box.left + scrollLeft - clientLeft;
			return { top: Math.round(top), left: Math.round(left) };
		};
		
		var __getOffsetSum=function(elem) {
			var top=0, left=0;
			while(elem) {top = top + parseInt(elem.offsetTop);left = left + parseInt(elem.offsetLeft);elem = elem.offsetParent ;}
			return {top: top, left: left};
		};
	
		if (elem.getBoundingClientRect) { _get_offset=__getOffsetRect; } else { _get_offset=__getOffsetSum; }
		
		__getOffsetRect=__getOffsetSum=null;
		
		return _get_offset(elem);
	};
	
	var fix_event=function(e){ return _fix_event(e); };
	var _fix_event=function(e){
		var __fix_event_ie=function(e){	
			e = e || window.event;
			var html = document.documentElement;
			var body = document.body;
			e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
			e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
			if (e.button & 1) { e.which = 1; } else if (e.button & 4) { e.which = 2; } else if (e.button & 2) {e.which = 3;}
			e.target=e.srcElement;
			return e;
		};
		var __fix_event_html5=function(e){ return e; };
		e = e || window.event;
		if( e.pageX == null && e.clientX != null ){ _fix_event=__fix_event_ie; }else{ _fix_event=__fix_event_html5; }
		__fix_event_ie=__fix_event_html5=null;
		return _fix_event(e);
	};

Добрый день.

Не могу разобраться с клонированием картинок при перетаскивании. Можете направить где копать?

addClass
Какая-то стрёмная замена classList.add()

function insertAfter(parent, node, referenceNode) {
parent.insertBefore(node, referenceNode.nextSibling);
}

И где тут проверка, что это не младший сын?

Эти приемы слишком не соответствуют сути прототипно-ориентированного языка.

Почему бы не myObject.addEvent?

как де queryString?

Где демонстрация работы с динамическими элементами?

Да, порой фреймворк использовать не получается (покажите мне такой, в ЛС), но это плохой подход.

ПС: Кину свою мини-библиотеку нужнрых мне порой функций.

Array.prototype.last = function(){ return this[this.length - 1]; }
Array.prototype.unique = function(){
   var u = {}, a = [];
   for(var i = 0, l = this.length; i < l; ++i){
      if(u.hasOwnProperty(this[i])) {
         continue;
      }
      a.push(this[i]);
      u[this[i]] = 1;
   }
   return a;
}
Array.prototype.remove = function(i){ this.splice(i, 1); }

String.prototype.times = function(n){
	var s = '';
	for (var i = 0; i < n; i++){ s += this; }
	return s;
}
ObjLength = function(obj) { if(typeof(obj) != "object") return null; var n = 0; for(var i in obj){ n++; } return n; }
String.prototype.zp = function(n) { return '0'.times(n - this.length) + this; }
Number.prototype.zp = function(n) { return this.toString().zp(n); }
String.prototype.zt = function(n) { return this + '0'.times(n - this.length); } 
Number.prototype.zt = function(n) { return this.toString().zt(n); }

String.prototype.toInt = function() { return parseInt(this); }
String.prototype.toFloat = function() { return parseFloat(this); }
String.prototype.toNumber = function() { return parseFloat(this); }
Number.prototype.toInt = function() { return parseInt(this); }
Number.prototype.toFloat = function() { return parseFloat(this); }
Number.prototype.toNumber = function() { return parseFloat(this); }

Date.prototype.daysInMonth = function() {
	return 33 - new Date(this.getFullYear(), this.getMonth(), 33).getDate();
};

HTMLElement.prototype.remove = function(){ if(this.parentNode != null) this.parentNode.removeChild(this); else delete(this); }
HTMLElement.prototype.insertAfter = function(elem){ this.parentNode.insertBefore(elem, this.nextSibling); }
HTMLElement.prototype.replace = function(elem){ this.parentNode.insertBefore(elem, this.nextSibling); this.remove(); }

var webStore = 
{
	setItem: function (name, object)
		{
			localStorage.setItem(name, JSON.stringify(object))
		},
	getItem: function (name)
		{
			return JSON.parse(localStorage.getItem(name))
		},
	clear: function (name)
		{
			localStorage.clear()
		}
}

ПС2: Пользуйтесь jQ, Angular, polymer и все будет в порядке.

onReady() дала течь. Вернулся к windows.onload

onReady(function () {
	var out = document.getElementById('out');
	var n7 = getElementsByClass('n7')[0];
	var fff = getComputedStyle(n7);

	//Выводит ложные данные!
	out.innerHTML = n7.offsetTop + '<br>';
	out.innerHTML += fff.width;
});

А jQuery использовать мешает высокомерие - мы же крутые JS-разработчики а не х.пойми что )))

K;/K//LK/L