Deerua about Coding -> Заметки с тегом «id»

У нас есть вот такой список HTML тэгов

<label for="text">Enter text</label>
<input name="text" type="text">

Если вызвать функцию, от имени инпута, и потом попытаться повлиять на его previousSibling, которым по идее есть label, мы упрёмся в текстовую ноду (.style is undefined — у которой нету понятия стиль и т. д., а обидно ;) ). Быстрый способ это вылечить, это написать весь HTML в одну строку, то есть убрать перенос, но это блин не выход ;)

Для этого можно написать «свой», «правильный» previousSibling, или, по желанию, модифицировать существующий, что, на моё мнение, будет излишним ;) Как всегда, залезем в прототип и дадим стране угля Обжектам, типа Нод Element (crossbrowser fix, thx Сергей Морозов), новую функцию

Element.prototype.pSib = function() { 
	var node = this; 
	while (node = node.previousSibling) { 
		// нам не нужен текст, йо ;)
		if (node.nodeType != 3) continue; 
	} 
	return node; 
}
// использовать вот так
var sometop = someid.pSib().style.top;

Иногда нужно объект скопировать, и вставить в другое место.
Для этого, можно использовать вот такую простую функцию, найденую на просторах интернетов ;)

function clone(o) {
	if(!o || "object" !== typeof o)  {
		return o;
	}
	varc = "function" === typeof o.pop ? [] : {};
	var p, v;
	for(p in o) {
		if(o.hasOwnProperty(p)) {
			v = o[p];
			if(v && "object" === typeof v) {
				c[p] = clone(v);
			}
		else c[p] = v;
		}
	}
	return c;
}

Если вы хотите перенести кусок HTML, то не забывайте о innerHTML, будет гораздо быстрее :D. Если же работа на прямую с объектами, то ещё легко можно пользоваться функцией eval().

Иногда, в каком-то блоке, нужно выбрать какой-то тег, и вывести его простым списком, или таким же списком обработать. Написал простую функцию для этого:

function getAllTagsInTag (tagid, tagname, aTags, j) {
	var tagaelm = $(tagid).getElementsByTagName('*');
	var aTags = aTags == null ? Object() : aTags;
	var j = j == null ? 0 : j;
	for(var i=0; i < tagaelm.length; i++) {
		if (tagaelm[i].nodeName == tagname.toUpperCase()) {
			aTags[j] = tagaelm[i];
			j++;
			//print_object(tagaelm[i]);
		}
		var inner = tagaelm[i].getElementsByTagName('*');
		if (inner.length > 0) {
			aTags = getAllTagsInTag(tagaelm[i], tagname, aTags, j);
		}
	}
	return aTags;
}

Очень часто нужно глянуть элементу внутрь, для этого можно использовать простую дампалку:

function print_object(obj) {
	var str = "<pre>";
	for(prop in obj){
		str+=prop + " = '"+ obj[prop]+"'\n";
	}
	str+="</pre>";
	document.write(str);
}

Лего модифицировать эту функцию, можно заставить её отдавать строку ;)

Есть на свете браузер клёвый ИЕ (кИЕ) и хорошая контора Microsoft, и любит эта контора в свой кИЕ напихать функций нестандартных, вот одина из них «removeNode». По хорошему должна быть функция removeChild :) , но что делать, если нужно поддержать какой нить огромный проект, типа Битрикс, что очень любит фишечки с кИЕ :) Для этого можно в прототайп добавить небольшую обёрточку, и жизнь станет на порядок легче ;)

if(window.HTMLElement){
  HTMLElement.prototype.removeNode = function(removeChildren) {
    if (Boolean(removeChildren) )
      return this.parentNode.removeChild(this);
    else {
      var r=document.createRange();
      r.selectNodeContents(this);
      return this.parentNode.replaceChild(r.extractContents(),this);
    }
  }
}

зы: Это же касается чудесных кИЕ методов для options.remove

Для этого нужно всего лишь найти тег и по ветке DOM ( parentNode ) вставить перед тегом ( insertBefore ) , тег (созданым, например, через document.createElement ). Что бы вставить после определённого тега, к его id приписываем .nextSibling

Например:

id.parentNode.insertBefore(optg,id);// вставить тег перед тегом
id.parentNode.insertBefore(optg,id.nextSibling);// вставить тег после тега

• Посмотреть пример
• Скачать пример (zip 4.7Kb)

Если очень захотеть, то можно расширить Node.prototype и добавить полезную функцию insertAfter, что бы часто не писать nextSibling, заодно мы проверяем есть ли парент элемент, если нет, то создаём ;)

Node.prototype.insertAfter = function(newNode, refNode) {
	return refNode.nextSibling 
	? this.insertBefore(newNode, refNode.nextSibling) 
	: this.appendChild(newNode);
}

JavaScript setAttribute «class» not work in IE

//Хорошо работает везде, кроме ИЕ - good for all but not IE
setAttribute(’class‘, ‘value’);
//в ИЕ работает вот так - IE only
setAttribute(’className‘, ‘value’);
//везде работает вот так ;) - good for all browsers
someElement.className = ‘value’; 

В мозиллке (фаерфоксе — Mozilla Firefox) когда добавляешь/изменяешь джаваскриптом длину(width), высоту(height) или другой параметр в пикселях(px), он не работает :( и получаешь ошибку ксс «параметр задан неправильно или не установлен» («The parameter is incorrect»). Всего лишь нужно вконец величины дописать «px» :)

Вот так:

id.style.width = somewidth + 'px';

Найдено методом тыка! :)
После часового копания в свалке доков и стандартов

Все просто:

<a id="id_elementa" onClick="alert(this.id)">click</a>