getElement-Что такое getElementById

Содержание.
Как вывести текст с помощью getElementById
Как вывести картинку с помощью getElementById
Как скрыть картинку с помощью getElementById
Как вывести картинку с задержкой
Как сократить запись кода document.getElementById
Как упростить запись кода document.getElementById с задержкой
Как в код document.getElementById("id") ввести сразу несколько идентификаторов
Сходство и различие между innerHTML и getElementById
Слайдшоу с помощью getElementById - простой скрипт
Слайдшоу по клику с нумерацией фото и текстом на фото
 
   Метод getElementById позволяет обратится к элементу web-страницы по
его идентификатору. Он позволяет производить самые разнообразные изменения 
в текущем окне по ходу исполнения скрипта. В этом его большое сходство 
со свойством  innerhtml. Что такое идентификатор и что такое innerHTML
смотри здесь 
    Идентификатор ID (в коде он записывается строчными буквами id)
заключается в кавычки и помещается в скобки после записи getElementById.
После идентификатора, точнее после закрывающей скобки, ставят точку и
указывают свойство, к которому идет обращение. Перед всей конструкцией 
необходимо записать document и поставить точку.

Как вывести текст с помощью getElementById
document.getElementById("am").innerHTML=b
Здесь am- идентификатор (записывается перед скриптом),  b - переменная, 
содержащая выводимый текст.
Она записывается в строке перед выводом и должна содержать 
описание стиля (выравнивание, размер и цвет шрифта):
b="<p align=center><span style='font-size:40;color:red'> здесь пишем 
текст, который нужно вывести с помощью getElementById</span></p>"
В целом скрипт выглядит так


<p id="am" ></p>
<script>
function WGT(){
b="<span style='font-size:40;color:red'><p align=center>< текст выведен c помощью getElementById</span>"
document.getElementById('am').innerHTML=b
setTimeout("am.innerHTML=''",2000)       //убираем текст через 2 секунды
}
</script>
<body>
<input type="button" value="нажми" onclick="WGT()">
 



Как вывести картинку с помощью getElementById
      Картинка с помощью getElementById выводится по коду:
document.getElementById("mm").innerHTML="<img  src='3.jpg'>"
Идентификатор "mm" должен быть записан до скрипта.
В целом скрипт выглядит так

<p id="mm" ></p>
<script>
function WG(){
q="<img  src='531.jpg' style='width:300; height:200'> "
document.getElementById("mm").innerHTML=q
setTimeout("mm.innerHTML=''",2000)       //убираем рисунок через 2 секунды
}
</script>
<body>
<input type="button" value="get" onclick="WG()">
  




Еще один способ вывести картинку с помощью getElementById
  В коде вывода вместо innerHTML можно использовать src. В этом случае картинка 
с помощью getElementById выводится по коду:
document.getElementById('tak').src="18.jpg"
В целом скрипт выглядит так
<p id="tak" style="display: none; width:300; height:200"></p>
<script>
function WGS(){
tak.style.display ='block'
document.getElementById("tak").src="18.jpg"
setTimeout("mm.innerHTML=''",2000)       //убираем рисунок через 2 секунды
}
</script>
<body>
<input type="button" value="щелкни" onclick="WGS()">



Как скрыть картинку 
      Картинка, выведенная с помощью getElementById может быть скрыта двумя 
способами: либо по коду:
id.innerHTML=''
либо по коду:
id.style.display='none'
здесь  - id символ идентификатора.
Идентификатор "id" должен быть записан до скрипта.
В целом скрипт выглядит так

<p id="mm" ></p>
<script>
function WGH(){
q="<img  src='531.jpg' style='width:300; height:200'> "
document.getElementById("mm").innerHTML=q
setTimeout("mm.innerHTML=''",2000)       //скрываем рисунок через 2 секунды
}
</script>
<body>
<input type="button" value="get" onclick="WGH()">






Как вывести картинку с задержкой
Скрипт задержки похож на скрипт скрытия, только в нем добавлена еще одна строка, 
содержащая setTimeout. В результате рисунок появляется с задержкой в 1,5 сек. и 
исчезает через 4 сек. 

<p id="tako" ></p>
<script>
function WGW(){
qq="<img  src='18.jpg' style='width:300; height:200'> "
setTimeout('document.getElementById("tako").innerHTML=qq',1500)     //появление фото с задержкой 1.5 сек.
setTimeout('tako.innerHTML=""',4000)      //удаление фото с задержкой 4 сек.
</script>
<body>
<input type="button" value="смотри задержку" onclick="WGW()">




 

Как сократить запись кода document.getElementById 

Если по коду document.getElementById("id") требуется выполнить несколько действий, 
то вместо того, чтобы каждый раз писать document.getElementById можно ограничиться 
одной записью
elem=document.getElementById
и затем в коде определенной операции писать только символ переменной elem
Например, вместо
document.getElementById('id').style.borderColor = "blue" 
писать 
elem.style.borderColor = "blue"
Ниже представлен скрипт, в котором с помощью метода document.getElementById 
(используется сокращенная запись кода) у объекта (прямоугольник) после наведения 
курсора меняется несколько свойств: размер, цвет фона, цвет рамки, толщина рамки, 
исчезают текст и изображение. При этом переменные elem и elem1 и elem2 заменяют 
написание document.getElementById в 16 строках.
Краткое пояснение к скрипту 
Идентификатор 'idm' задает исходные атрибуты объекта (прямоугольник). Идентификатор 'imkg' задает 
исходные атрибуты изображения. Идентификатор 'tex' задает атрибуты текста. Программу запускает  
и возвращает к исходному состоянию код (наведение и уход курсора):
onmouseover = "change1(this)" onmouseout = "back1(this). 
Все цифры позиционирования условны.

<style>
#tex
{
font-size:20px;font-weight: bold; color:red;
position: absolute; margin-left:127;margin-top:120px;
line-height:30px;
}
#imkg{
position: absolute;margin-top:8px;margin-left:30px;
width:150px; height:100px;
}
</style>
<script>
function change1(elem)                    /* функция, изменящая атрибуты прямоугольника*/
{
var elem = document.getElementById('idm');
var elem1 = document.getElementById('tex');
var elem2 = document.getElementById('imkg');
if (elem.style.backgroundColor == "green") 
{    elem.style.backgroundColor = "red";           /* задаём  новый фон прямоугольника */
elem.style.borderColor = "green"          /* задаём  новый цвет бордюра прямоугольника */
elem.style.borderWidth = "10px"        /* задаём  новую толщину бордюра прямоугольника */
elem.style.width = "350px"                      /* задаём  новую ширину прямоугольника */
elem.style.height = "350px"                     /* задаём  новую высоту прямоугольника */
elem1.style.fontSize = "0px"                          /* удаляем шрифт*/
elem2.style.display='none'                        /* удаляем изображение*/
}
}
function back1(elem)        /* функция, восстанавливающая исходные атрибуты прямоугольника*/
{var elem1 = document.getElementById('tex');
var elem2 = document.getElementById('imkg')
  if (elem.style.backgroundColor == "red") {
    elem.style.backgroundColor = "green";
elem.style.borderColor = "00bfff"
elem.style.borderWidth = "5px"
elem.style.width = "200"
elem.style.height = "110px"
elem1.style.fontSize = "20px"
elem2.style.display='block'
  };
};
</script>
</head>
<body>
<div id="idm" style='margin-left:80;margin-top:40px;position: absolute;
border-width:5px; border-style: solid; border-color:violet; background-color:green;
WIDTH:200; height:110;'
onmouseover = "change1(this)"onmouseout = "back1(this);"><img id='imkg'src="3.jpg">
</div><a id='tex'>наведи курсор</a> 



наведи курсорКак упростить запись кода document.getElementById с задержкой 

Если по коду, основанному на  document.getElementById, нужно произвести какое-либо 
действие с задержкой, то кодовая строка получается очень длинной. Например, для 
изменения цвета фона фигуры с задержкой:
setTimeout('document.getElementById("my").style.backgroundColor = "yellow"',2000)
Можно упростить написание кода, если разбить его на части, сделав каждую часть 
переменной:
xs='document.getElementById("my")'
ys='.style.backgroundColor = "blue"'
zs=xs+ys  
setTimeout(zs,3000)

В представленном примере у фигуры (прямоугольник), код которой содержит 
идентификатор 'my', через 2 секунды происходит смена  фона. Длинный код меняет 
фон с зеленого на желтый, код, разбитый на части - с желтого на синий. Окно 
закрывается автоматически.
P.S. переменную zs в коде задержки ставить в кавычки не надо.


 Как в код document.getElementById("id") ввести сразу 
несколько идентификаторов Если по коду document.getElementById("id") 
нужно вывести сразу несколько идентификаторов,
то вместо записи нескольких однотипных строчек с разными идентификаторами в круглых
скобках можно ограничиться всего одной. Ниже представлен скрипт по выводу на экран и 
скрытию двух групп картинок, причем вывод и скрытие происходят в разное время.
<head>
<style>
img{
margin-left:30px; 
float:left;
display: none;
width:300;  height:200;
}
</style>
<script>
x=['im1','im2', 'im3' ]
z=['im4','im5', 'im6' ]
t=500
function WW(x){
for (i = 0; i <= 4; i++)
document.getElementById(x[i]).style.display ='block'}
setTimeout("WW(x)",t)
t=3500
function WD(x){
for (i = 0; i <= 4; i++)
document.getElementById(x[i]).style.display = 'none'}
setTimeout("WD(x)",t)
t=1500; setTimeout("WW(z)",t)
t=4500; setTimeout("WD(z)",t)
</script>
<body>
<img id="im1" src="3.jpg" style='border: 6px solid red'>
<img id="im2" src="17.jpg" style='border: 6px solid red'>
<img id="im3" src="19.jpg" style='border: 6px solid red'><BR>
<img id="im4" SRC="18.jpg" style='border: 6px solid yellow; margin-top:35px'>
<img id="im5" SRC="15.jpg" style='border: 6px solid yellow; margin-top:35px'>
<img id="im6" SRC="14.jpg" style='border: 6px solid yellow; margin-top:35px'>



Пояснения к скрипту
Группы идентификаторов задаются как массивы
x=['im1','im2', 'im3' ]первые три картинки
z=['im4','im5', 'im6' ]вторые три картинки
Чтобы  в коде каждого изображения не перечислять его атрибуты (размеры, 
его исходное, скрытие) используется внутренний стиль
<style>
img{
margin-left:30px; 
float:left;
display: none;
width:150;  hight:100;
}
</style>
Функция WW() отображает изображения, а функция WD()
скрывает их. 
Для второй (и последующих групп, если они будут) идентификаторов коды отображения 
и скрытия предельно короткие
t=1500; setTimeout("WW(z)",t)
t=5500; setTimeout("WD(z)",t)
Задержка позволяет выводить рисунки группами в разное время и совершать 
над ними действия (например, убирать через какое-то время с экрана)

Сходство и различие между innerHTML и getElementById.   
 Как было указано выше,одну и ту же операцию можно осуществить как 
с помощью getElementById, так и с помощью innerhtml. Приведем 
пример вывода текста Cкрипт этого примера таков.
<HTML>
<HEAD>
<TITLE>get1</TITLE>
<p  id="tmy"> 
<p  id="ttt"></p>
<p id="tet"></p>
<script language="JavaScript">
var x=0;
setInterval('WW()',100)
function WW(){
x++;
if (x>5)
{
q="<p align=center><span style='font-size:40;color:red'>выводим текст с помощью getElementById
по коду:
document.getElementById('tmy').innerHTML=q</span></p>"
document.getElementById("tmy").innerHTML=q
}
if (x>25)
{
d="<p align=center>
<span style='font-size:40;color:blue'>выводим текст с помощью innerHTML по коду:
ttt.innerHTML=d</span></p>";
ttt.innerHTML=d
}
}
WW()
<script>
</HEAD>
<body bgcolor="00ff00">
</body>
</html>

Здесь х - переменная, пропорциональная времени, позволяющая задать 
динамический сценарий.
     Приведем теперь пример вывода изображения
Cкрипт этого примера таков.
<HTML>
<HEAD>
<TITLE>get2</TITLE>
<p  id="my"></p> 
<p  id="mym"></p>
<p  id="tam"></p>
<p  id="tet"></p> 
<p align=center><img id="tim" SRC=""    width=300 height=200 ></p>
<script language="JavaScript">
var x=0;
setInterval('WW()',100)
function WW(){
x++;
if (x>5)
{
w="выводим  рисунок 
 с помощью getElementById"
my.innerHTML="<p align=center><span style='font-size:30;color:brown'>"+w+"<<span>>lt/p>"
document.getElementById("tim").src="1.jpg"
}
if (x>35)
{
w="замещаем  рисунок 
 с помощью getElementById"
my.innerHTML="<p align=center><span style='font-size:30;color:red'>"+w+"</span></p>"
document.getElementById("tim").src="18.jpg"
}
if (x>75)
{
tim.outerHTML='<style.display="none">';
my.outerHTML='<style.display="none">';
w="выводим  рисунок  
с помощью innerHTML"
mym.innerHTML="<p align=center><span  style='font-size:30;color:blue'>"+w+"</span></p>"
tam.innerHTML="<img  SRC='533.jpg'  width=300 height=200>"
}
}
WW()
</script>
</HEAD>
<body bgcolor="00ff00">
</body>
</html>

Слайдшоу с помощью getElementById
С помощью метода getElementById можно создать простой 
и короткий скрипт слайдшоу смотри
Cкрипт этого примера таков.
<HTML>
<HEAD>
<TITLE>get3</TITLE>
<p  id="my"></p> 
<script>
w="ПАРОВОЗЫ"
my.innerHTML="<span style='font-size:40;color:blue'>'+w+'</span>"
par= new Array
massive_length=6
par=["112.jpg","120.jpg","126.jpg","532.jpg","533.jpg","150.jpg"] 
var  n=0
function ST(){
  setInterval(SH, 2000)
} 
function SH(){
if (n<6)
{
document.getElementById('tam').src=par[n++]
}
else
w="КОНЕЦ"
my.innerHTML="<p align=center><span style='font-size:40;color:red'>"+w+"</span></p>"
}
ST() 
</script>
</HEAD>
<body bgcolor="00ff00">
<p align=center><img  id='tam'  src="112.jpg"  width=750 height=550></img></p>
</body>
</html>

Слайдшоу по клику с нумерацией фото и текстом на фото
В приведенных примерах время нахождения каждого фото на экране задается в скрипте 
и является фиксированным. Иногда требуется на отдельных фото задержаться подольше. 
Это можно сделать, вызывая каждое фото по клику. Кроме того, полезно пронумеровать 
фото. Скрипт такого сценария приводится ниже. Переход к следующему фото - по клику. 
Верхняя кнопка для ориентировки, поскольку кликать можно в любом мест 
(либо по ней, либо вокруг нее). Каждый клик продвигает сценарий без 
кнопки - это обеспечивает функция document.addEventListener("click", имя функции). 
Нижняя кнопка (обновление) нужна в случае повторения сценария.
При воспроизводстве скрипта с экрана пояснительные записи /*...*/ должны быть 
удалены.
 
<style>
#idn{position: absolute;  margin-left:1035;margin-top:125px;display:none;
 width:45px; height: 78px; border-color:green; border-style: solid;  border-width: 3px; font-size:80;color:red;
font-weight: bold; background-color: cfc;z-index:100; 
}                /*стиль рамки номера фото*/
#butS                                          /*стиль псевдокнопки запуска */
{position: absolute;
text-align:center;
font-size:25px; color:purple;  
border:6px solid red;  
background-color:cyan; 
border-radius: 10px;
width: 310px;
height: 10px;
padding-bottom:50px;
line-height:30px;
}
img1{position: absolute;margin-top: 16px;margin-left: 360px;}
</style>
<body>
<div>
    <center id="idn">0</center>
</div>
<p  id="myt" style='margin-left: 485px;margin-top:110px;position: absolute;'></p>/*позиционирование фото */
<p  id="mym" style='font-size:15; width:245px; background-color: cfc; 
height: 25px; border-color:red; border-style:solid; border-width:3px;
display:none;margin-left: 488px;margin-top: 490px;position: absolute;
text-align:center'>                /*стиль текста в рамке */
</p>
<script>
var x = 0;
function WC() {                    /*Счетчик кликов-номер фото */
  x++
    document.getElementById("idn").innerHTML = x;     /*вывод цифр*/
document.getElementById("idn").style.display = "block"
}
document.addEventListener("click", WC);
 par=["156","140","112","155","608"]
 par1=["ПАРОВОЗ серии 'Нв'","Паровоз серии Аб","Паровоз серии С","Паровоз серии Су","Паровоз серии П36"]
var m = 0; var n=0; 
	function WW()              /*Функция вывода фото и текста */ 
{
if (x < 6)
{
var w=".jpg"
y=par[m]+w
wr="<img  class='img1'  src='"+y+"'  width='600' height='400'  >
"
m++
z=wr
myt.innerHTML="<span >"+z+"</span>"          /*вывод  фото */
document.getElementById("mym").style.display = "block"
q1=par1[n]
n++
q11="<font size=4 color=red>"+q1+"</p>";
mym.innerHTML=q11                           /*вывод  текста поверх фото */
}
  else {                                          /*окончание слайдшоу */
document.getElementById("idn").style.display = "none"
document.getElementById("myt").style.display = "none"
document.getElementById("mym").style.display = "none"
}
}
document.addEventListener("click", WW);
</script>
<div id='butS' >Кликни 
и кликай дальше</div>      /*псевдокнопка запуска*/
</body>




    0





  

Для повтора кликни здесь и 
вернись к верхней кнопке
Оглавление (простые скрипты для основных приложений JavaScript)