Требование: Заполните работу добавления, удаления, изменения и копирования узла
Используются методы и атрибуты:
1. Получите родительский узел узла
Атрибут ParentNode
2. Получите сборку поднодея узла
Атрибут Childnodes
3. Создание нового узла
CreateTextNode (Содержание текста узла) Метод объекта документа не очень совместим в некоторых браузерах
CreateElement (объект) объект документа, такой как: Document.CreateElement ("a");
4. Добавьте атрибуты и значения атрибутов в объект узла
SettalTtribute (атрибут, значение атрибута);
5. Замените подпрограмму под определенный узел
Replacechild (новый узел, атомный узел);
6. Добавьте узел в узле
AppendChild (узел, который будет добавлен)
7. Клонг определенный узел
CloneNode () не передает параметр в качестве параметра True, указывая, что узел клона включает в себя подметки
Код кода копирования следующим образом:
<!
<html>
<голова>
<Title> node_curd.html </title>
<meta http-eviv = "Keywords" content = "Keyword1, Keyword2, Keyword3">
<meta http-equiv = "description" content = "Это моя страница" >>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<!-<link rel = "styleSheet" type = "text/ css" href = "./ styles.css">->
<Стиль типа = "text/css">
Div {
Граница: красный 1px твердый;
Ширина: 200px;
Высота: 50px;
Маржа: 20px 30px;
Заполнение: 20px;
}
#div_1 {{
Ясно: оба;
фоновый цвет:#ff3366;
}
#div_2 {{
Ясно: оба;
фоновый цвет:#6699ff;
}
#div_3 {{
Ясно: оба;
фоновый цвет:#cccc99;
}
#div_4 {{
Ясно: оба;
фоновый цвет:#00CC33;
}
</style>
<script type = "text/javascript">
// Добавить метод 1: добавить текст в первую область Div
функция addText () {
// 1. Получить узел, чтобы добавить текстовое содержимое
var Dig_1node = document.getElementById ("div_1");
// 2. Создать текстовый узел. CreatextNode Метод объекта документа. Некоторые браузеры не поддерживаются.
var textNode = document.createTextNode ("Разве это не отображается?");
// 3. Добавить текстовый узел в метод AppendChild (экземпляр Sub -Node) в узлом
дивизион
}
// Добавить метод 2: добавить кнопку в первую область Div
функция addbutton () {
// 1. Получить узел, чтобы добавить текстовое содержимое
var Dig_1node = document.getElementById ("div_1");
// 2. Создать узел. CreateElement () объекта документа
var anode = document.createElement ("input");
// 3. Добавить атрибут и значение атрибута в указанный объект
//anode.setattribute 18 ", type", "button"); // Это то же самое, что и эффект следующего кода
anode.type = "кнопка";
anode.setattribute ("value", "кнопка");
Anode.setattribute ("onclick", "deleteText ('div_1')");
// 4. Добавить текстовый узел в метод ApendChild (экземпляр Sub -Node для добавления) под добавленным узлом
дивизион
}
// Удалить Метод 1: Удалить подпроводник узлов во второй области
функция deleteText (Nodeid) {
// 1. Получите узел
var dignode = document.getElementbyId (узлоид);
// 2. Получите подпроводник, то есть текстовый узел
var chilenode = divnode.childnodes [0];
// 3. Удалить, пройти параметр true удалит все под -доды под ним
//Chilenode.removenode ();
Divnode.removechild (Chilenode);
}
// удалить метод второй: удалить элементы
функция deleteElement () {
// 1. Получите узел
var Dig_2node = document.getElementById ("div_2");
// 2. Получите родительский узел,
var parentnode = div_2node.
// 3. Удалить
Parentnode.removechild (div_2node);
}
// Исправлять
function updateText () {
// 1 Получите узел области, где вы хотите изменить символ
var Dig_3node = document.getElementById ("div_3");
// 2. Получите сборку Sub -Node на первом шаге, укажите узел, который будет изменен
var childnode = div_3node.childnodes [0];
// 3. Создать текстовый узел
var newnode = document.createTextNode («Ха -ха, я заменил тебя»);
// 4. Используйте 3 шага, чтобы заменить узел на шаге 2 шага
//Childnode.replacenode (newnode); // Этот метод не совместим с Firefox и Google
дивизион
}
// клон
Функция copynode () {
// 1. Получить четвертый региональный узел
var Dig_1node = document.getElementById ("div_1");
// 2. Получить первый узел области
var Dig_4node = document.getElementById ("div_4");
// 3. Получить новый узел через четвертый узел клона
var newnode = div
// 4. Замените новый узел шага 3, чтобы удалить исходный первый узел
дивизион
}
</script>
</head>
<тело>
<div id = "div_1"> </div>
<div id = "div_2"> Это вторая область </div>
<div id = "div_3"> это третья область </div>
<div id = "div_4"> это четвертая область </div>
<HR />
<font size = "12px"> увеличение: </font>
<input type = "button" value = "добавить текст в первую область" onclick = "addText ()" />
<input type = "button" value = "добавить кнопку в первую область" onclick = "addbutton ()" />
<HR />
<font size = "12px"> удалить: </font>
<input type = "кнопка" value = "Удалить текстовое содержимое во второй области" onclight = "deleteText ('div_2')" /> />
<input type = "button" value = "Удалить вторую область" onclick = "deleteElement ()" />
<HR />
<font size = "12px"> Изменение: </font>
<input type = "button" value = "изменить контент в третьей области" onclick = "updateText ()" /> />
<HR />
<font size = "12px"> клонирование: </font>
<input type = "button" value = "клонировал четвертую область в первую область" onclick = "copynode ()" /> />
</body>
</html>