Веб-программирование

Обучение программированию

Делаете первые шаги в программировании? Представляем вашему вниманию пошаговое обучение самостоятельного создания сайтов любой сложности на примерах! На страницах сайта KobRU вы найдете все самое необходимое, для того чтобы по праву считаться веб-мастером по созданию привлекательных динамически изменяемых интернет-страниц, используя основные инструменты веб-разработчиков: HTML; CSS; PHP; MySQL; JAVASCRIPT и другие. Сайт KobRU - наиболее полное и качественно структурированное руководство с предельно понятными пояснениями и поэтапным изложением материала, который поможет вам в совершенстве овладеть искусством программирования. Добавьте динамики и интерактивность в свои веб-проекты!

Вход в личный кабинет

Забыли пароль?

Не зарегистрированны?


Конструкторское Web-бюро
12.01 JavaScript замена контента на странице

Автор: Denisido

Дата: 2010-12-24

Чтобы изменить структуру страницы можно прибегнуть к самым простым способам, например, знакомый нам метод write() или метод writeln() объекта HTMLDocument помогут нам в реализации данной задачи. Но у этих методов есть существенный недостаток - они как правило вызываются в момент загрузки и вставляют содержимое в том месте, где встречаются эти вызовы. Если они вызываются после окончания загрузки (к примеру, в обработчике события), то удаляют первоначальное содержимое и записывают новое.

Применение методов Объектной модели документа

В отличие от ранее описанных методов этот способ изменить контент на странице является самым универсальным. С их помощью мы можем найти нужный элемент страницы, создать новый узел, удалить и т.п. Приступим, непосредственно, к изучению данных методов объекта HTMLElement.

Метод createElement()

С помощью этого метода мы можем создать новый элемент, а далее поместить его в нужное место. В качестве параметра передаем имя тега в строковом виде:

// javascript замена
  
document.createElement('div');

Метод createTextNode()

Данный метод создает текстовый узел:

// javascript замена
  
document.createTextNode('Сам текст');

Метод appendChild()

Метод помещает узел, переданный ему в качестве параметра, в текущий элемент, делая его последним в списке потомков:

Запустить javascript пример!
// javascript замена
  
var cep = document.createElement('p');    // создаем абзац
var cebr = document.createElement('br');  // создаем тег переноса
var ctn1 = document.createTextNode('Текстовый узел1');
var ctn2 = document.createTextNode(' Текстовый узел2');
window.onload = afterLoad;     // ф-ция будет выполняться после загрузки док-та
function afterLoad() {
	document.body.appendChild(cep); // в теле док-та выводим абзац
	cep.appendChild(ctn1); // Текстовый узел1
	cep.appendChild(cebr)  // подставили тег переноса br
	cep.appendChild(ctn2); // Текстовый узел2
}; // end func afterLoad

Метод insertBefore()

Данный метод позволяет разместить элемент страницы перед произвольно выбранным узлом. В качестве первого параметра указываем сам элемент, вторым параметром указываем на тот узел, перед которым произойдет нужная вставка:

Запустить javascript пример!
// javascript замена
  
var cep = document.createElement('p');
var cebr = document.createElement('br');
var ctn1 = document.createTextNode('Текстовый узел1');
var ctn2 = document.createTextNode(' Текстовый узел2');
var ctn3 = document.createTextNode('Вставляем новый текст в произвольное место');
window.onload = afterLoad;
function afterLoad() {
	document.body.appendChild(cep);
	cep.appendChild(ctn1); // Текстовый узел1
	cep.appendChild(cebr);  // подставили тег переноса br
	cep.appendChild(ctn2); // Текстовый узел2
	cep.insertBefore(ctn3,ctn1); 
}; // end func afterLoad

Метод cloneNode()

Этот метод возвращает клонированную копию текущего узла. В качестве единственного параметра пишем булево значение. True - включает потомки и атрибуты, если такие имели место. False - копируется только сам элемент:

Запустить javascript пример!
// javascript замена
  
var cep = document.createElement('p');
var ctn1 = document.createTextNode('Текстовый узел1');
  
window.onload = afterLoad;
function afterLoad() {
	document.body.appendChild(cep);
	cep.appendChild(ctn1); // Текстовый узел1
	var newPar = cep.cloneNode(true);
	document.body.appendChild(newPar); // клон
}; // end func afterLoad

Метод replaceChild()

Данный метод заменяет один элемент страницы другим. Первый параметр метода - то, на что хотим заменить, второй параметр - тот узел, который хотим изменить:

Запустить javascript пример!
// javascript замена
  
var cep = document.createElement('p');
var ctn1 = document.createTextNode('Текстовый узел1');
var ceh = document.createElement('h1');
var cehName = document.createTextNode('Javascript замена');
ceh.appendChild(cehName);
window.onload = afterLoad;
function afterLoad() {
	document.body.appendChild(cep);
	cep.appendChild(ctn1); // Текстовый узел1
	var newPar = cep.cloneNode(true);
	document.body.appendChild(newPar); // клон
	var newHead = document.body.replaceChild(ceh, cep);
}; // end func afterLoad

Метод removeChild()

Метод удаляет заданный потомок текущего элемента страницы. Единственным параметром передается потомок текущего узла, который необходимо удалить. Этот метод возвращает экземпляр соответствующего объекта, представляющий удаленный потомок, который мы можем в дальнейшем использовать, например, поместить его в другое место на странице:

Запустить javascript пример!
// javascript замена
  
var cep = document.createElement('p');
var ctn1 = document.createTextNode('Текстовый узел1');
var ceh = document.createElement('h1');
window.onload = afterLoad;
function afterLoad() {
	document.body.appendChild(ceh);
	document.body.appendChild(cep);
	cep.appendChild(ctn1); // Текстовый узел1
	var qwerty = cep.removeChild(ctn1); // удалили текстовый узел 
	ceh.appendChild(qwerty); // перемещаем узел в заголовок
}; // end func afterLoad



Оцените материал по 5-ти бальной шкале: 1 2 3 4 5



Коментарии:

Добавить новый коментарий:

Текст коментария:

Введите результат с картинки

Просмотров: 21763

Метки раздела JavaScript

Основы web программирования, var javascript, javascript функции, javascript обучение, javascript простые примеры, html javascript, javascript примеры, javascript random, уроки сайтостроения, java script, регулярные выражения, appendchild javascript, javascript бесплатно, javascript document write, javascript справочник, javascript примеры.