Все мы (ну или большинство из нас) привыкли работать с javascript применяя библиотеку Jquery. Однако не всегда это возможно. И когда это так — многие начинают испытывать проблемы. Сегодня я решил рассказать о том как работать с DOM на чистом javascript.
На самом деле «чистый» javascript не сложнее jquery. Конечно приходится писать больше кода, но с другой стороны этот код будет более понятен людям, разбирающимся в языках программирования PHP, C#, JAVA и других. Рассмотрим работу описанных выше функций. В качестве рабочего полотна возьмем чистый HTML файл:
<html> <head></head> <body> <script></script> </body> </html>
Все действия будем выполнять на чистом Javascript. В качестве цели поставим задачу — генерацию таблицы с возможностью удаления и добавления строк. Чтобы понять код необходимо понять, что функция document.createElement создает переменную тега (например как селектор в jquery). Вся остальная работа с данной переменной ни чем не отличается от работы с обычным DOM объектом.
<html>
<head></head>
<body>
<script>
//Создадим title страницы
var title = document.createElement('title');
title.innerHTML = 'Page title';
document.getElementsByTagName('head')[0].appendChild(title); //getElementsByTagName возвращает массив
//Создадим таблицу
var table = document.createElement('table');
table.setAttribute('id', 'tableId');
table.setAttribute('border', '1');
//Создадим строку
var headRow = document.createElement('tr');
for(var i = 1; i <= 5; ++i) { //Создадим пять колонок
var headColumn = document.createElement('th');
if(i < 5) {
headColumn.innerHTML = i;
} else {
var buttonAddRow = document.createElement('button');
buttonAddRow.innerHTML = 'Add row';
buttonAddRow.onclick = function() { //Функция добавления строки (по сути тоже самое)
var table = document.getElementById('tableId');
var row = document.createElement('tr');
for(var i = 1; i <= 5; ++i) {
var column = document.createElement('th');
if(i < 5) {
column.innerHTML = i;
} else {
var buttonDeleteRow = document.createElement('button');
buttonDeleteRow.innerHTML = 'Delete row';
buttonDeleteRow.onclick = function() {
var buttonTr = this.parentNode.parentNode; //Получаем тег Tr в которой находится нажатая кнопка
buttonTr.parentNode.removeChild(buttonTr); //Удаляем строку
}
column.appendChild(buttonDeleteRow);
}
row.appendChild(column);
}
table.appendChild(row);
}
headColumn.appendChild(buttonAddRow);
}
headRow.appendChild(headColumn);
}
table.appendChild(headRow);
document.getElementsByTagName('body')[0].appendChild(table);
</script>
</body>
</html>
Код получился немного страшным. И имеет повторы. Приведем код в более приличный вид.
<html>
<head></head>
<body>
<script>
function deleteRow() {
var buttonTr = this.parentNode.parentNode; //Получаем тег Tr в которой находится нажатая кнопка
buttonTr.parentNode.removeChild(buttonTr); //Удаляем строку
}
function addRow(tableId, columnTag, columnsCount, lastRowFunction) {
lastRowFunction = lastRowFunction || null;
var isLastRowFunction = typeof(lastRowFunction) == 'function';
var table = document.getElementById(tableId);
var row = document.createElement('tr');
for(var i = 1; i <= columnsCount; ++i) {
var column = document.createElement(columnTag);
if(i < 5 || !isLastRowFunction) {
column.innerHTML = i;
} else {
lastRowFunction(column);
}
row.appendChild(column);
}
table.appendChild(row);
}
//Создадим title страницы
var title = document.createElement('title');
title.innerHTML = 'Page title';
document.getElementsByTagName('head')[0].appendChild(title); //getElementsByTagName возвращает массив
//Создадим таблицу
var tableId = 'tableId', tableColumnCount = 5, table = document.createElement('table');
table.setAttribute('id', tableId);
table.setAttribute('border', '1');
document.getElementsByTagName('body')[0].appendChild(table);
//Создадим строку заголовка
addRow(tableId, 'th', tableColumnCount, function(columnElement) {
var buttonAddRow = document.createElement('button');
buttonAddRow.innerHTML = 'Add row';
buttonAddRow.onclick = function() {
addRow(tableId, 'td', tableColumnCount, function(columnElement) {
var buttonDeleteRow = document.createElement('button');
buttonDeleteRow.innerHTML = 'Delete row';
buttonDeleteRow.onclick = deleteRow;
columnElement.appendChild(buttonDeleteRow);
});
}
columnElement.appendChild(buttonAddRow);
});
</script>
</body>
</html>
Согласитесь красиво и ни чем не хуже jquery? 🙂
