AJAX загрузка
home

С помощью предопределенных свойств и методов Вы можете производить различные манипуляции над DOM.

Методы HTML DOM

С помощью метода getElementById() Вы можете обратиться к элементу с указанным id.

Пример 

function change(){
   document.getElementById("par").innerHTML="Я изучаю HTML DOM на 
   <b>wisdomweb.ru</b>!";
}
function changeback(){
   document.getElementById("par").innerHTML="Я изучаю JavaScript.";
}
Попробовать в редакторе
Быстрый просмотр

С помощью метода getElementsByTagName() Вы можете обратиться ко всем элементам с указанным именем тэга.

Метод возвращает массив элементов. Нумерация элементов в массиве начинается с 0.

Пример 

//Узнаем содержимое первого абзаца на странице и запишем результат в x
x=document.getElementsByTagName("p")[0].innerHTML;
//Выведим результат на страницу
document.write(x+"<br />");
//Узнаем содержимое второго абзаца и запишем результат в y
y=document.getElementsByTagName("p")[1].innerHTML;
//Выведим результат на страницу
document.write(y);
Попробовать в редакторе
Быстрый просмотр

С помощью метода createElement() Вы можете создать элемент.

С помощью метода appendChild() Вы можете вставить созданный элемент в произвольный узел.

Пример 

var i=0;
function elCreate(){
   //Создадим новый абзац
   var newpar = document.createElement("p");
   i++;
   //Запишем созданный абзац в body
   document.body.appendChild(newpar).innerHTML="<b>Я созданный элемент номер "+i+"</b>.";
}
Попробовать в редакторе

С помощью метода removeChild() Вы можете удалить узел потомок из элемента.

Данный метод возвращает удаленный узел.

Пример 

function mvParFrom(){
   var rcont = document.getElementById("container");
   var rpar= document.getElementById("par");
   /* Удалим из элемента с id=container элемент с id=par и вернем 
   удаленный элемент в rel */
   var rel=rcont.removeChild(rpar);
   //Выведем содержимое текстового узла удаленного элемента на страницу
   document.getElementById("res").innerHTML=rel.innerHTML;
   }
function mvParTo(){
   document.getElementById("cont").style.display="none";
   document.getElementById("container").appendChild(document.getElementById("res"));
}
Попробовать в редакторе
Быстрый просмотр

Сделайте сами

Задание 1 выведите на страницу содержимое элементов с id="elem1" и id="elem2".

Пример 

<p id="par1">Это первый абзац на странице. </p>
<p id="elem1">Я элемент 1. Попробуйте вывести мое содержимое на страницу </p>
<p id="par2"> Это второй абзац на странице. </p>
<div id="wrap1">
<p id="elem2">Я элемент 2. Попробуйте вывести мое содержимое на страницу. </p>
</div>
Попробовать в редакторе

Задание 2 добавьте абзац с содержимым "Добавьте меня в синюю рамку" в элемент с id="wrapb", а заголовок h3 с содержимым "Добавьте меня к красную рамку" в элемент с id="wrapr" (элементы p и h3 должны быть предварительно созданы в скрипте с помощью createElement). Также предусмотрите удаление созданных элементов.

Пример 

function addElement(){
   document.getElementById("but1").style.display="none";
   document.getElementById("but2").style.display="inline";
   /* Пишите код здесь */
}
function delElement(){
   document.getElementById("but1").style.display="inline";
   document.getElementById("but2").style.display="none";
   /* Пишите код здесь */
}
Попробовать в редакторе