Добавляем...


Справочник JavaScript Функций
Все основные частоиспользуемые функции, пример их использования и краткое описание.
Раздел в тестовом режиме, функции постоянно добавляем.

getElementById() функция доступа к элементу по его 'id'
<div id='t1'>Текст!</div>
<input type="text" id='k1' value='текст'>
<script>
document.getElementById('t1').style.color='red';
alert(document.getElementById('k1').value);
</script>
getElementsByName() возвращает ссылку на элементы которые имеют общее 'name', возвращает массив значений
<input type="text" name="a1" value='текст'>
<input type="text" name="a1" value='еще текст'>
<script>
alert(document.getElementsByName('a1').item(0).value);
// или 
alert(document.getElementsByName("a1")[1].value);
</script>
перебирая значение item(№элемента) или [№элемента] получаем доступ ко всем элементам на странице. Лучше использовать оператор for( )
getElementsByTagName() функция доступа к элементу по имени 'name' возвращает массив значений
<input type="text" name="a1" value='текст'>
<div> еще текст</div>
<script>
alert(document.getElementsByTagName('input').item(0).value);
// или 
alert(document.getElementsByTagName("div")[0].innerHTML);
</script>
перебирая значение item(№элемента) или [№элемента] получаем доступ ко всем элементам на странице. Лучше использовать оператор for( )
parseInt() преобразовывает введенное значение в числовой тип данных
alert(parseInt('7')+1); ответ 8;
или
alert(parseInt('7g')+1); тоже 8
т.к функция parseInt смотрит строку до первого не числового символа, и возвращает число до этого символа.
charAt()возвращает символ из указанной позиции
var t='текст';
alert(t.charAt(1));
//вернет символ "е".
charCodeAt() возвращает код символа из указанной позиции
var t='а';
alert(t.charCodeAt(0));
//вернет 1072
indexOf('substr',n) возвращает индекс первого вхождения подстроки 'substr' в исходной строке начиная с n символа.
var t='тут много текста';
alert(t.indexOf('мн',1));
//вернет 4 т.к 'мн' начинается с 4-го символа в строке.
childNodes[ ] Коллекция дочерних узлов объекта, элементы которой доступны только для чтения. (IE5+, MOZ/N6+, DOM1)
<div  id='r'>
  <p>1111</p>
  <p>2222</p>
  <p>3333</p>
</div> 

<script>
var r=document.getElementById("r");
i=0;
 for (i=0; i<r.childNodes.length; i++){ 
  alert(r.childNodes[i].innerHTML);
  }
</script>
children[ ] Коллекция дочерних узлов, элементы которой доступны только для чтения. Это эквивалент childNodes[ ], использовавшийся в IE до принятия стандарта DOM. (IE4+)
<div  id='r'>
  <p>1111</p>
  <p>2222</p>
  <p>3333</p>
</div> 

<script>
var r=document.getElementById("r");
i=0;
 for (i=0; i<r.children.length; i++){ 
  alert(r.children[i].innerHTML);
  }
</script>
className Строка, содержащая значение class того класса CSS, которому принадлежит элемент. (IE4+, MOZ/N6+, DOM1)
<div  class='cldiv' onclick="alert(this.className)">
        Много текста 
</div>
clientHeight Числовое значение, доступное только для чтения и указывающее высоту области содержимого элемента в пикселях. (IE4+). Так же он учитывает padding элемента
<div  id='r' style='height:90px; border:1px solid; padding:10px'>
    Много текста <BR>
</div>
<script> 
	alert(document.getElementById('r').clientHeight);
</script>
clientWidth Числовое значение, доступное только для чтения и указывающее ширину области содержимого данного элемента в пикселях. (IE4+)
<div  id='r' style='height:90px; border:1px solid; padding:10px'>
    Много текста <BR>
</div>
<script> 
	alert(document.getElementById('r').clientWidth);
</script>
clientTop Числовое значение, доступное только для чтения и указывающее разность в пикселях между значением свойства offsetTop и значением, задающим начало области содержимого элемента.
Другими словами показывает границу вашего элемента.
<div  id='r' style='height:90px; border:10px solid;'>
    Много текста <BR>
</div>
<script> 
	alert(document.getElementById('r').clientTop);
</script>
clientLeft Числовое значение, доступное только для чтения и указывающее разность в пикселях между значением свойства offsetLeft и значением, задающим начало области содержимого элемента.
Другими словами показывает границу вашего элемента.
<div  id='r' style='height:90px; border:10px solid;'>
    Много текста <BR>
</div>
<script> 
	alert(document.getElementById('r').clientLeft);
</script>
contentEditable Строка, указывающая возможность редактирования содержимого элемента. Допустимыми значениями являются "inherit", "true" и "false". Значение "inherit" означает, что эта возможность наследуется по значению свойства contentEditable родительского элемента (это значение используется по умолчанию). Данное свойство оказывается полезным, когда необходимо обеспечить редактирование данных в ячейках таблицы. Элементы, для которых значением disabled является true, оказываются не редактируемыми вне зависимости от того, какое значение имеет свойство. Соответствует атрибуту contenteditable. (IЕ5.5+)
<div id='r' contentEditable='true' style='border:1px red solid;'>
  Впиши сюда текст
</div>
currentStyle Доступная только для чтения ссылка, указывающая на объект Style, отражающий все примененные к элементу стили, включая global (используемый по умолчанию). (IE5+)
<div id='r' style='height:90px; border:10px solid; color:black;'>
    Много текста  
</div>
<script> 
for (MyElement in document.getElementById('r').currentStyle)
{
alert(MyElement+': '+document.getElementById('r').currentStyle[MyElement]);
}
</script>
firstChild Доступная только для чтения ссылка, указывающая на первый дочерний узел элемента, если таковой существует (иначе возвращается null) (IE5+, MOZ/N6+, DOM1)
<div id='r'><span>Много разного</span> текста</div> 
<script> 
document.getElementById('r').firstChild.style.color='red';
</script>
innerHTML Строка, содержащая HTML-содержимое, заключенное в дескрипторы элемента
<div id='r'>Много текста...</div>
<script>
alert('Получили: '+document.getElementById('r').innerHTML);
document.getElementById('r').innerHTML=
"<p style='color:red;'><b>Много текста...</b></p>";
</script>
innerText Строка, содержащая текст, заключенный в дескрипторы данного элемента. Этот текст не интерпретируется как HTML, так что при установке значения "<Ь>Важно" будет отображено "<Ь>Важно", а не слово "Важно", записанное полужирным шрифтом.
<div id='r'><b>Много текста...</b></div>
<script>
alert('Получили: '+document.getElementById('r').innerText);
</script>
outerHTML Строка, содержащая HTML-содержимое, заключенное в рамках дескрипторов элемента (включая сами дескрипторы). (IE4+)
<div id='r'><span>Много текста...</style></div>
<script>
alert('Получили: '+document.getElementById('r').outerHTML );
document.getElementById('r').outerHTML =
"<p style='color:red;'><b>Много текста...</b></p>";
</script>
outerText Строка, содержащая текст, заключенный в рамках дескрипторов элемента (включая сами дескрипторы).
<div id='r'><span>Много текста...</style></div>
<script>
alert('Получили: '+document.getElementById('r').outerText);
document.getElementById('r').outerText=
"<p style='color:red;'><b>Много текста...</b></p>";
</script>
lastChild Доступная только для чтения ссылка, указывающая на последний дочерний узел элемента, если таковой существует (иначе возвращается null).
<div id='r'><span>Много разного</span> <span>текста</span></div> 
<script> 
document.getElementById('r').lastChild.style.color='red';
</script>
nextSibling Доступная только для чтения ссылка, указывающая на следующий сестринский узел для данного узла, когда, например, родительский узел имеет несколько дочерних.
<div id='r'><span>Много разного</span> текста</div>
  <div> Первый сосед для id='r'</div>
<script>
document.getElementById('r').nextSibling.style.color='red';
</script>
nodeName Доступная только для чтения строка, содержащая имя узла, имя дескриптора, которому соответствует данный объект, например "div".
<div id='r'>sdsd</div>
   <script type="text/javascript">
    var doc=document.getElementById('r');
	alert(doc.nodeName);
   </script>
nodeType Числовое значение, доступное только для чтения и соответствующее типу узла, определенному в DOM. Например, узлы элементов имеют тип 1. Список наиболее часто используемых типов узлов приводится ниже.
<div id='r'>sdsd</div>
   <script type="text/javascript">
    var doc=document.getElementById('r');
	alert(doc.nodeType);
   </script>

Номер типа узлаТипОписаниеПример
1ЭлементЭлемент HTML или XML<р>...</р>
2АтрибутАтрибут элемента HTML или XMLalign="center"
3ТекстФрагмент текста, который может быть включен в элемент HTML или XMLЭто фрагмент текста.
8КомментарийHTML-комментарий
9ДокументКорневой объект документа, т.е. верхний элемент дерева анализа <html>
10Тип документаОпределение типа документа<!DOCTYPE HTML PUBLIC "-//W3C //DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ loose.dtd">
offsetHeight Числовое значение, доступное только для чтения и указывающее высоту элемента в пикселях.
   <div id='r'> Много текста </div>
   <div id='rr'> Много <br> текста </div>
   <script type="text/javascript"> 
  alert('Высота первого элемента: '+
    document.getElementById('r').offsetHeight);
  alert('Высота второго элемента: '+ 
    document.getElementById('rr').offsetHeight);
   </script>
offsetWidth Числовое значение, доступное только для чтения и указывающее ширину элемента в пикселях.
   <span id='r'> Много текста </span>  
   <span id='rr'> Много разного текста </span>
   <script type="text/javascript"> 
  alert('Высота первого элемента: '+
    document.getElementById('r').offsetWidth);
  alert('Высота второго элемента: '+ 
    document.getElementById('rr').offsetWidth);
   </script>
offsetLeft Числовое значение, доступное только для чтения и указывающее смещение в пикселях для левого края элемента относительно offsetParent (от родителя).
<div style='padding:10px; border:1px solid;'>
   <div id='r' style='border:1px blue solid;'> Много текста </div>   
</div>
   <script type="text/javascript"> 
 alert('Отступ от родителя: '+document.getElementById('r').offsetLeft+'рх');
   </script>
offsetTop Числовое значение, доступное только для чтения и указывающее смещение в пикселях для верхнего края элемента относительно offsetParent.
<div style='padding:10px; border:1px solid;'>
   <div id='r' style='border:1px blue solid;'> Много текста </div>   
</div>
   <script type="text/javascript"> 
 alert('Отступ от родителя: '+document.getElementById('r').offsetTop+'рх');
   </script>
offsetParent Доступная только для чтения ссылка, указывающая на объект, по отношению к которому вычисляются значения offsetHeight/Width/Left/Top. (IE4+, MOZ/N6+).
<div style='padding:10px; border:1px solid;'> Родитель 
   <div id='r' style='border:1px blue solid;'> Много текста </div>   
</div>
   <script type="text/javascript"> 
   document.getElementById('r').offsetParent.style.border = '6px solid red';
   </script>
ownerDocument Доступная только для чтения ссылка, указывающая на объект Document, в котором содержится элемент. (IE5+, MOZ/N6+, DOM1).
<div id='r'><span>Много текста...</style></div>
<script>
var el = document.createElement('span'); 
document.getElementById('r').appendChild(el);
alert(el.ownerDocument.documentElement.nodeName);
</script>


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика