Главная RSS Онлайн игры WarCraft Приколы Карта сайта О блоге Поиск Добавить пост Ваши посты
500 рублей помощь регистрации домена и на хосте и перенос сайта туда связь


+ Подписаться

В этой книге представлены основы по HTML 5. В ней рассказывается, как создавать свою графику и анимацию, а так же работа с мышкой и клавиатурой.

Скачать


Создание, добавление и удаление узлов к дереву.

0

Добавил: AlexMaster

Дата: 22.09.2016


Создание, добавление и удаление узлов к дереву - здесь мы рассмотрим способы создание узлов, добавление узлов и удаление в html 5.


Существует два способа добавление узлов createElement и createTextNode.
createElement(element) – функция создает элемент узел, который может принимать указанное имя (тег) . Например, можно создать узел с тегом input, div, p, canvas и т.д.
createTextNode() – функция создает текстовый узел с указанным текстом. Можно в скобках, в кавычках указать любой текст и при запуске в браузере html - документа текст отобразится.
appendChild() – функция добавляет элемент в html - документ, тем самым отображая его в браузере.
insertBefore() – Вставляет узел, как дочерний узел - элемент, для которого вызывается эта функция. Принимает два параметра первый - это узел, который вы хотите добавить, второй - это дочерний узел элемента, перед которым нужно вставить узел.
В листинге 1 вы можете видеть добавление узлов в html документ. Функция getElementById находит тег в html документе по id list. Существуют и другие функции нахождения тегов в html документе getElementsByName(), getElementByTagName(), getElementByClassName() querySelector() или querySelectorAll(). Функция createElement создает элемент(тэг) (<li></li>) в списке. InsertBefore добавляет тег (<li></li>) в начало списка. createTextNode – создает текст для каждого тега (<li></li>). Несколько функций appendChild – добавляет все теги и текст в html документа. Результат в браузере выведет список из двух строк “Первая строка списка” и “Вторая строка списка”.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Create element</title>
<script type="text/javascript">
function main()
{
var elementOL = document.getElementById("list");
var elementLI2 = document.createElement("LI");
elementOL.appendChild(elementLI2);
var elementLI1 = document.createElement("LI");
elementOL.insertBefore(elementLI1,elementOL.firstChild);
textSmart = document.createTextNode("Первая строка списка.");
elementLI1.appendChild(textSmart);
textSmart = document.createTextNode("Вторая строка списка.");
elementLI2.appendChild(textSmart);
}
</script>
</head>
<body onload="main()">
<ol id="list"></ol>
</body>
</html>

В листинге 2 продемонстрировано, как удалить элемент из списка. Для удаления элемента из списка используется функция removeChild. Чтобы выбрать нужный элемент из списка, нужно написать в скобках этой функции list.children[0], где 0 – означает элемент массива, так как у нас три строки, то значит три элемента. Нумерация в массиве начинается с 0, в итоге получается 0,1,2.
В браузере с помощью функции alert будет выводиться количество элементов до удаления и после удаления.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Удаление элемента</title>
<script type="text/javascript">
function main()
{
var list = document.getElementById("list");
alert(list.children.length);
var removed = list.removeChild(list.children[0]);
alert(list.children.length);
alert(removed);
}
</script>
</head>
<body onload="main()">
<ul id="list">
<li>Первая строка списка.</li>
<li>Вторая строка списка.</li>
<li>Третья строка списка.</li>
</ul>
</body>
</html>

В листинге 3 показан пример, как создать таблицу (createElement) и добавить таблицу в html документ (appendChild). Так же еще добавлено несколько кнопок, с помощью которых можно раскрасить таблицу. Весь код вы можете видеть в листинге 3. CSS позволяет придать стиль таблицам и кнопкам. Чтобы задать стиль тегу: в javascript есть переменная className, которая дает имя тегу и если в CSS это имя указано, то стиль тега меняется. Теперь о функциях, которые я создал в листинге 3.
Функция newGame – удаляет таблицу, если она существует и с помощью функции TestTable() создает новую. Обе функции принимают два значения: количество ячеек таблицы в высоту и ширину. При создании таблицы нужно указать, сколько строк и ячеек следует, добавить. Делается это с помощью insertRow и insertCell.
insertRow – вставляет новую строку.
insertCell – вставляет новую ячейку.
Чтобы добавить 20 строк и 20 ячеек используется цикл for. Там же в цикле нужно вызвать событие мыши, которая при щелчке закрашивает одну ячейку. В переменной color по умолчанию стоит черный цвет закрашиваемой ячейки. Но есть возможность поменять его для этого (как я писал выше) нужно добавить несколько элементов кнопок и для каждой кнопки вызвать событие мыши. Внутри события просто менять значение переменной color на цвет, я например выбрал шесть цветов зеленый, красный, желтый, синий, черный и белый. Так же существует еще одна кнопка, которая очищает таблицу. На самом деле таблица не очищается, а просто удаляется (removeChild) и создается новая. Последняя функция showInfo закрашивает задний фон одной ячейки. Вы можете скопировать код в html документ и протестировать, необязательно использовать мои цвета выберете свои, для этого вам нужен любой графический редактор и инструмент палитра. Например:

На этом все. Создание и добавления таблиц я использовал при разработки игры “Сапер”.
Пример листинг 3.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Создание таблицы</title>
<style>

.game-board {
border: 0;
border-spacing: 0;
border-collapse: collapse;
}
.game-board td {
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border: #9cb0ca 1px solid;
}
input.greenB {
background: #008000;
}
input.redB {
background: #ff0000;
}
input.yellowB {
background: #ffff00;
}
input.blueB {
background: #0000ff;
color: #ffffff;
}
input.blackB {
background: #000000;
color: #ffffff;
}
input.whiteB {
background: #ffffff;

}
</style>
</head>
<body>
<script>

var W = 20;
var H = 20;
var color = "#000000";
var board, table;

function main()
{
var green = document.createElement('input');
green.type = 'button';
green.value = 'Зеленый';
green.className = 'greenB';

var red = document.createElement('input');
red.type = 'button';
red.value = 'Красный';
red.className = 'redB';

var yellow = document.createElement('input');
yellow.type = 'button';
yellow.value = 'Желтый';
yellow.className = 'yellowB';

var blue = document.createElement('input');
blue.type = 'button';
blue.value = 'Синий';
blue.className = 'blueB';

var black = document.createElement('input');
black.type = 'button';
black.value = 'Черный';
black.className = 'blackB';

var white = document.createElement('input');
white.type = 'button';
white.value = 'Белый';
white.className = 'whiteB';

var clear = document.createElement('input');
clear.type = 'button';
clear.value = 'Очистить поле';


var greenClick = function()
{
color = "#008000";
}
var redClick = function()
{
color = "#ff0000";
}
var yellowClick = function()
{
color = "#ffff00";
}

var blueClick = function()
{
color = "#0000ff";
}
var blackClick = function()
{
color = "#000000";
}
var whiteClick = function()
{
color = "#ffffff";
}

var clearClick = function()
{
newGame(H,W);
}

document.body.appendChild(green);
document.body.appendChild(red);
document.body.appendChild(yellow);
document.body.appendChild(blue);
document.body.appendChild(black);
document.body.appendChild(white);
document.body.appendChild(clear);
green.addEventListener("mousedown", greenClick);
red.addEventListener("mousedown", redClick);
yellow.addEventListener("mousedown", yellowClick);
blue.addEventListener("mousedown", blueClick);
black.addEventListener("mousedown", blackClick);
white.addEventListener("mousedown", whiteClick);
clear.addEventListener("mousedown", clearClick);
newGame(H,W);
}

function newGame(H,W)
{
if (board)
{
board.parentNode.removeChild(board);
board = null;
}
board = TestTable(H, W);
board.className = 'game-board';
document.body.appendChild(board);
}

function TestTable(H, W)
{
var self = this;
table = document.createElement('table');
for (var i = 0; i < H; i++)
{
var r = table.insertRow(i);
for (var j = 0; j < W; j++)
{
var c = r.insertCell(j);

c.num = 0;
c.index = [i, j];

c.clickHandler = function()
{
self.showInfo(this);
}
c.addEventListener("mousedown", c.clickHandler);
}
}
return table;
}

function showInfo(elem)
{
if(color)
{
elem.style.background = color;
}
}
main();
</script>

</body>
</html>

Скачайте исходнике.

Назад

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

Комментарий к этой заметки:

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

Введите капчу

 

Яндекс.Метрика