В этой статье описывается использование JavaScript для узлов веб -страниц. Поделитесь этим для вашей ссылки. Конкретный анализ заключается в следующем:
1. Основные понятия
Эта часть называется «HTML DOM». Так называемый HTML DOM-это правила загрузки веб-страницы, которое является правилом, которое является основной формулой для веб-страниц.
То есть все веб -страницы должны быть написаны в соответствии с правилами: <html> <body> </body> </html> ..., а также загружены в соответствии с такими правилами.
Так называемый «Узел веб-страницы» также является популярным объяснением «Узел DOM». Например, содержимое под узлом HTML - это все содержание между <html> </html>, а содержание под узлом тела - это все содержание между <body> </body>.
HTML DOM предусматривает следующее: 1. Весь документ - узел документа; 2. Каждый тег HTML (значение <body> <table> и другие теги HTML, а не простой тег <html>) - это узел элемента; 3. Текст, содержащийся в элементе HTML, представляет собой текстовый узел; 4. Каждый атрибут HTML является узлом атрибута
Например, вы можете привлечь страницу в следующее дерево узлов DOM:
Официальное определение HTML DOM заключается в следующем: HTML DOM - это аббревиатура модели объекта документа HTML, а HTML DOM является моделью объекта документа, специально применяемой для HTML/XHTML. Люди, знакомые с разработкой программного обеспечения, могут понять HTML DOM как веб -страницу API. Он рассматривает каждый элемент на веб -странице как объекты, так что элементы на веб -странице также могут быть получены или отредактированы на компьютерном языке. Например, JavaScript может использовать HTML DOM для динамического изменения веб -страниц.
Использование JavaScript может легко контролировать добавление, удаление, модификацию и поиск узлов веб -страниц для этих узлов DOM.
2. Основные цели
Используйте JavaScript для добавления, удаления, изменения и проверки узлов веб -страниц. На веб -странице:
1. Кнопка «Добавить узел», добавляя параметры узла в раскрывающемся меню, связанном с кнопкой «Заменить». Если на веб-странице есть 9 узлов, добавление и всплывающее окно не будет разрешено.
2. Кнопка «Удалить последний узел», при этом уменьшая параметры узла в раскрывающемся меню, связанном с кнопкой «Заменить».
3. Кнопка «Заменить содержимое узла» сначала выберите узел для работы, а затем введите замену содержимого, и соответствующий узел будет заменен.
4. Если на веб-странице нет узлов, удаление или замена не будет разрешено, и будет предоставлено всплывающее предупреждение.
3. Процесс производства
Без настройки какой -либо среды просто напишите следующий код на веб -странице. Конкретный код заключается в следующем, и следующее будет объяснено частично:
Скопируйте код код следующим образом: <! Doctype html public "-// w3c // pd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/pd/xhtml1-trantitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> jsdivnode </title>
<script type = "text/javascript">
var i = 0;
функция createNode () {
if (i <9) {
i ++;
var option = document.createElement ("опция");
option.value = i;
option.innerhtml = "node" + i.tostring ();
document.getElementbyId ("номер"). AppendChild (Option);
var p = document.createElement ("p");
p.innerhtml = "node" + i.toString ();
document.getElementById ("D"). AppendChild (P);
} еще
Блюдо («Я в порядке, слишком много узлов, я не могу этого сделать ~»);
}
функция removenode () {
if (i> 0) {
я--;
var s = document.getElementById ("номер");
S.RemoveChild (S.Lastchild);
var d = document.getElementById ("D");
D.RemoveChild (D.lastchild);
} еще
оповещение («Нет узлов, удалить пряжу ~»);
/*var ps = d.getelementsbytagname ("p");*/
/*документ */
}
функция ReplaceNode () {
if (i> 0) {
var d = document.getElementById ("D");
var p = document.createElement ("p");
p.innerhtml = document.getElementById ("text"). Value;
var ps = d.getelementsbytagname ("p")
D.Replacechild (p, ps [document.getElementById ("number"). Значение - 1]);
} еще
оповещение ("Нет узел, заменить пряжу ~");
}
</script>
</head>
<тело>
<input type = "кнопка" value = "create node" onclick = "createNode ()" />
<input type = "button" value = "удалить последний узел" onclick = "removenode ()" />
<SELECT ID = "NUMER"> </select>
<input type = "text" id = "text" />
<input type = "button" value = "replacenode Content" onclick = "ReplaceNode ()" />
<div id = "d">
</div>
</body>
</html>
1. <body> Узел
Скопируйте код следующим образом: <body>
<!-Кнопка x2, обе кнопки имеют действия, указывающие на соответствующую функцию->
<input type = "кнопка" value = "create node" onclick = "createNode ()" />
<input type = "button" value = "удалить последний узел" onclick = "removenode ()" />
<!-раскрывающееся меню без дочерних узлов добавляется одновременно узлом CreateNode (). ->
<SELECT ID = "NUMER"> </select>
<!-Входное поле x1, обратите внимание на настройку идентификатора, Replacenode (), чтобы получить значение этого текстового поля->
<input type = "text" id = "text" />
<!-Кнопка x1, такая же, как кнопка x2->
<input type = "button" value = "replacenode Content" onclick = "ReplaceNode ()" />
<!-пустой слой ни с чем, как родительский узел <p>, все дети этого узела <div> добавляют
<div id = "d">
</div>
</body>
2. <Head> Узел
Скопируйте код следующим образом: <Head>
<!-Кодирование и заголовок, используемые веб-страницами, не важны, ключом является следующая часть сценария JS->
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> jsdivnode </title>
<script type = "text/javascript">
/*Записывает глобальные переменные того, сколько узлов существует на текущей веб -странице*/
var i = 0;
/*Есть 3 функции ниже. Когда кнопка нажимается, она называется*/
функция createNode () {
/*Если на веб-странице меньше 9 узлов, оно будет работать, в противном случае всплывающее окно*/
if (i <9) {
/*Добавьте еще один узел для каждой записи глобальной переменной i+1*//
i ++;
/*Создать узел параметра, а затем его имя указателя также является опцией*/
var option = document.createElement ("опция");
/*Объявит атрибут значения узеления создания опции - это текущее значение i, то есть, когда i = 1, существуют дочерние узлы, такие как <value vature = 1> </option>. */
/*Некоторые веб -страницы говорят, что использование метода SetAtTribute () для установки атрибутов, но лично практиковалось, это нелегко использовать*/
option.value = i;
/*Установите текст ниже узла опции. После этого оператора дочерний узел становится <value = 1> node1 </option>*/
option.innerhtml = "node" + i.tostring ();
/*<select> Идентификатор родительского узла - номер. Этот оператор требует, чтобы значение <опция = 1> node1 </option>*//был добавлен в родительский узел в <select> </select>
document.getElementbyId ("номер"). AppendChild (Option);
/*Принцип такой же, как и выше. Добавьте узел <p> дочернего узела под родительским узлом <div>, а текстовое значение под дочерним узлом <p> - узел node1*/
var p = document.createElement ("p");
p.innerhtml = "node" + i.toString ();
document.getElementById ("D"). AppendChild (P);
} еще
Блюдо («Я в порядке, слишком много узлов, я не могу этого сделать ~»);
}
функция removenode () {
/*Если на веб-странице есть более 0 узлов, то есть есть узлы, и тогда только всплывающее окно
if (i> 0) {
/*Для каждого сокращения узла регистрируется глобальная переменная I-1 текущей веб-страницы.
я--;
/*Определите указатель S на родительский узел <select>*/
var s = document.getElementById ("номер");
/*Удалите последний дочерний узел под родительским узлом <select>, то есть <опция>. Если вы хотите удалить первый, параметр становится S.FirstChild*/
S.RemoveChild (S.Lastchild);
/*Тот же принцип, что и выше, удалите последний дочерний узел под слоем <div>*/
var d = document.getElementById ("D");
D.RemoveChild (D.lastchild);
/*Если вы хотите удалить 8 -й <p> под <div>, пожалуйста, сделайте следующее*/
/*PS - указатель на набор <p> детского узла*/
/*var ps = d.getelementsbytagname ("p");*/
/*документ */
} еще
оповещение («Нет узлов, удалить пряжу ~»);
}
функция ReplaceNode () {
/*Если на веб-странице есть более 0 узлов, то есть есть узлы, и тогда только всплывающее окно
if (i> 0) {
/*Определите указатель на родительский узел D*/
var d = document.getElementById ("D");
/*Создать <p> </p> узел*/
var p = document.createElement ("p");
/*Получить контент введенного в текстовое поле, и поместите его в узел <p> </p>*//
p.innerhtml = document.getElementById ("text"). Value;
/*PS - это указатель на набор узел -узлов <p> и группу детских узлов в рамках родительского узла <div>*//
var ps = d.getelementsbytagname ("p")
/*Пусть только что созданный узел, который вы только что создаете, замените Nth <p> Child Node под <Div>, где n -значение -1, выбранное в раскрывающемся списке сейчас. Причина -1 заключается в том, что количество набора детских узлов и группа детей начинается с 0, в то время как наш человек начинается с 1. */
D.Replacechild (p, ps [document.getElementById ("number"). Значение - 1]);
} еще
оповещение ("Нет узел, заменить пряжу ~");
}
</script>
</head>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.