Deerua about Coding: последние заметки с тегом «id»

javascript: "Bug" with previousSibling

Mon, 17 Aug 2009 20:42:15 +0200

У нас есть вот такой список 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;

Комментарии к заметке

Теги:
javascript > id > previousSibling

Клонирование объекта в Javascript (Clone object)

Tue, 02 Jun 2009 16:44:55 +0200

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

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().

Комментарии к заметке

Теги:
javascript > id > clone

get list of some tags from some element :D

Tue, 05 May 2009 16:58:58 +0200

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

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);

}

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

Комментарии к заметке

Теги:
javascript > id > getElementsByTagName

removeNode и Mozilla FireFox :)

Sat, 14 Feb 2009 16:10:17 +0200

Есть на свете браузер клёвый ИЕ (кИЕ) и хорошая контора 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

Комментарии к заметке

Теги:
browsers > microsoft > Internet Explorer
browsers > mozilla > firefox
javascript > id > removeChild
javascript > id > removeNode

removeNode и Mozilla FireFox :)

Sat, 14 Feb 2009 16:10:17 +0200

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

Комментарии к заметке

Теги:
browsers > microsoft > Internet Explorer
browsers > mozilla > firefox
javascript > id > removeChild
javascript > id > removeNode

Javascript: вставить тег перед каким-то определённым тегом (или после)

Sat, 06 Dec 2008 22:55:23 +0200

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

Например:

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

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

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

Комментарии к заметке

Теги:
javascript > id > parentNode > insertBefore
javascript > id > nextSibling

Javascript: вставить тег перед каким-то определённым тегом (или после)

Sat, 06 Dec 2008 22:55:23 +0200

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

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

Комментарии к заметке

Теги:
javascript > id > parentNode > insertBefore
javascript > id > nextSibling

setAttribute("class") не работает в ИЕ (Internet Explorer)

Fri, 15 Aug 2008 10:59:57 +0200

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’;

Комментарии к заметке

Теги:
bugs > className
browsers > microsoft > Internet Explorer
javascript > id > setAttribute

Mozilla(firefox) javascript problem with the assignment width or height

Sat, 28 Jun 2008 14:02:38 +0200

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

Вот так:

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

Комментарии к заметке

Теги:
css > width
javascript > id > style
css > height
browsers > mozilla > firefox
bugs

Как получить название id элемента через this?

Fri, 27 Jun 2008 13:27:52 +0200

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

Все просто:

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

Комментарии к заметке

Теги:
javascript > id
html