Este artigo descreve o uso do JavaScript para nós da página da web. Compartilhe para sua referência. A análise específica é a seguinte:
1. Conceitos básicos
Esta parte é chamada de "html dom". O chamado HTML DOM é as regras de carregamento da página da web, que é uma regra, que é a fórmula básica para páginas da web.
Ou seja, todas as páginas da web devem ser escritas de acordo com as regras de: <html> <body> </body> </html> ... e também carregadas de acordo com essas regras.
O chamado "nó da página da web" também é uma explicação popular do "Node DOM". Por exemplo, o conteúdo do nó HTML é todo o conteúdo entre <html> </html>, e o conteúdo do nó do corpo é todo o conteúdo entre <body> </body>.
HTML DOM estipula da seguinte forma: 1. O documento inteiro é um nó de documento; 2. Cada tag html (significando <body> <table> e outras tags html, em vez de uma tag simples <html>) é um nó de elemento; 3. O texto contido no elemento HTML é um nó de texto; 4. Cada atributo html é um nó de atributo
Por exemplo, você pode desenhar uma página para a seguinte árvore de nó DOM:
A definição oficial de HTML DOM é a seguinte: HTML DOM é a abreviação do modelo de objeto de documentos HTML, e o HTML DOM é um modelo de objeto de documento aplicado especialmente ao HTML/XHTML. As pessoas familiarizadas com o desenvolvimento de software podem entender o HTML DOM como uma API da página da web. Ele trata cada elemento na página da web como objetos, para que os elementos na página da web também possam ser obtidos ou editados pela linguagem do computador. Por exemplo, o JavaScript pode usar o HTML DOM para modificar dinamicamente as páginas da Web.
O uso do JavaScript pode controlar facilmente a adição, exclusão, modificação e pesquisa dos nós da página da web para esses nós DOM.
2. Objetivos básicos
Use JavaScript para adicionar, excluir, modificar e verificar os nós das páginas da web. Em uma página da web:
1. O botão "Adicione o nó", ao adicionar opções de nó no menu suspenso associado ao botão "Substituir". Se houver 9 nós na página da web, nenhum aviso de adição e pop-up será permitido.
2. O botão "Excluir o último nó", enquanto reduz as opções do nó no menu suspenso associado ao botão "Substituir".
3. O botão "Substituir conteúdo do nó", primeiro selecione o nó para operar e digite o conteúdo a ser substituído e o nó correspondente será substituído.
4. Se não houver nós na página da web, nenhuma exclusão ou substituição será permitida e o aviso pop-up será fornecido.
3. Processo de produção
Sem configurar nenhum ambiente, basta escrever o código a seguir na página da web. O código específico é o seguinte e o seguinte será explicado em parte:
Copie o código do código:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> jsdivnode </title>
<script type = "text/javascript">
var i = 0;
função createNode () {
if (i <9) {
i ++;
var option = document.createElement ("option");
option.value = i;
option.innerhtml = "node" + i.toString ();
document.getElementById ("número"). AppendChild (opção);
var p = document.createElement ("p");
p.innerhtml = "nó" + i.toString ();
document.getElementById ("D"). AppendChild (P);
} outro
alerta ("Estou bem, existem muitos nós, não posso fazer isso ~");
}
function reprovenode () {
if (i> 0) {
eu--;
var s = document.getElementById ("número");
S.RemoveChild (S.Lastchild);
var d = document.getElementById ("d");
D.RemoveChild (D.Lastchild);
} outro
alerta ("sem nós, exclua um fio ~");
/*var ps = d.getElementsByTagName ("p");*/
/*document.getElementById("d").RemoVechild(ps Oh]); */
}
função replacenode () {
if (i> 0) {
var d = document.getElementById ("d");
var p = document.createElement ("p");
p.innerhtml = document.getElementById ("text").
var ps = d.getElementsByTagName ("p")
D.Replacechild (P, PS [document.getElementById ("número"). Valor - 1]);
} outro
alerta ("sem nó, substitua o fio ~");
}
</script>
</head>
<Body>
<input type = "button" value = "crie nó" onclick = "createNode ()" />
<input type = "button" value = "Exclua o último nó" onclick = "Removenode ()" />
<select id = "número"> </leclect>
<input type = "text" id = "text" />
<input type = "button" value = "replacenode Content" onclick = "replacenode ()" />
<div id = "d">
</div>
</body>
</html>
1. <body> nó
Copie o código da seguinte forma: <body>
<!-Botão x2, ambos os botões têm ações OnClick apontando para a função correspondente->
<input type = "button" value = "crie nó" onclick = "createNode ()" />
<input type = "button" value = "Exclua o último nó" onclick = "Removenode ()" />
<!-Um menu suspenso sem <Opção> nós filhos é adicionado ao mesmo tempo pelo nó createNode (). ->
<select id = "número"> </leclect>
<!-Caixa de entrada X1, preste atenção à definição do ID, replacenode () para obter o valor desta caixa de texto->
<input type = "text" id = "text" />
<!-Botão x1, o mesmo que o botão x2->
<input type = "button" value = "replacenode Content" onclick = "replacenode ()" />
<!-Uma camada vazia sem nada, como o nó pai de <p>, todos os filhos deste nó <div> são adicionados
<div id = "d">
</div>
</body>
2. <Head> Nó
Copie o código da seguinte forma: <head>
<!-A codificação e o título usados pelas páginas da web não são importantes, a chave é a seguinte parte do script JS->
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> jsdivnode </title>
<script type = "text/javascript">
/*Registra as variáveis globais de quantos nós existem na página da web atual*/
var i = 0;
/*Existem 3 funções abaixo. Quando o botão é clicado, ele é chamado*/
função createNode () {
/*Se houver menos de 9 nós na página da web, ele funcionará, caso contrário, a janela pop-up*/
if (i <9) {
/*Adicione mais um nó para cada registro a variável global i+1*/
i ++;
/*Crie um nó de opção e, em seguida, seu nome de ponteiro também é opção*/
var option = document.createElement ("option");
/*Declare o atributo de valor do nó da opção criado é o valor atual de I, ou seja, quando i = 1, existem nós filhos como <Valor da opção = 1> </pption>. */
/*Algumas páginas da web dizem que, usando o método setAttribute () para definir atributos, mas praticou pessoalmente, não é fácil de usar*/
option.value = i;
/*Defina o texto abaixo do nó da opção. Após esta declaração, o nó filho se torna <Valor da opção = 1> Node1 </pption>*/
option.innerhtml = "node" + i.toString ();
/*<leclect> O ID do nó pai é o número. Esta instrução requer que o <Opção Value = 1> Node1 </pption>*/seja adicionado ao nó pai no <select> </leclect>.
document.getElementById ("número"). AppendChild (opção);
/*O princípio é o mesmo que acima. Adicione o nó filho do filho sob o nó <div> pai e o valor do texto no nó filho <p> é nó 1*/
var p = document.createElement ("p");
p.innerhtml = "nó" + i.toString ();
document.getElementById ("D"). AppendChild (P);
} outro
alerta ("Estou bem, existem muitos nós, não posso fazer isso ~");
}
function reprovenode () {
/*Se houver mais de 0 nós na página da web, ou seja, existem nós e apenas a janela pop-up é
if (i> 0) {
/*Para cada redução de nós, a variável global I-1 da página da web atual é gravada.
eu--;
/*Defina ponteiros s para o nó pai de <select>*/
var s = document.getElementById ("número");
/*Exclua o último nó filho no nó pai do <Select>, ou seja, <pution>. Se você deseja excluir o primeiro, o parâmetro se tornará S.FirstChild*/
S.RemoveChild (S.Lastchild);
/*O mesmo princípio acima, exclua o último nó da criança sob a camada <div>*/
var d = document.getElementById ("d");
D.RemoveChild (D.Lastchild);
/*Se você deseja excluir o 8º <p> em <div>, faça o seguinte*/
/*PS é um ponteiro para o conjunto de nós filhos*/
/*var ps = d.getElementsByTagName ("p");*/
/*document.getElementById("d").RemoVechild(ps Oh]); */
} outro
alerta ("sem nós, exclua um fio ~");
}
função replacenode () {
/*Se houver mais de 0 nós na página da web, ou seja, existem nós e apenas a janela pop-up é
if (i> 0) {
/*Defina ponteiro para o nó pai d*/
var d = document.getElementById ("d");
/*Crie um <p> </p> nó*/
var p = document.createElement ("p");
/*Obtenha o conteúdo inserido na caixa de texto e coloque -o no nó <p> </p>*/
p.innerhtml = document.getElementById ("text").
/*PS é um ponteiro para o conjunto de nós filho e um grupo de nós filhos no nó <div> pai*/
var ps = d.getElementsByTagName ("p")
/*Deixe o nó que você acabou de criar substituir o nó nó <p> filho em <div>, onde n é o valor -1 selecionado na lista suspensa agora. O motivo de -1 é que a contagem do conjunto de nós da criança e o grupo de crianças começa a partir de 0, enquanto nossa contagem humana começa em 1. *//
D.Replacechild (P, PS [document.getElementById ("número"). Valor - 1]);
} outro
alerta ("sem nó, substitua o fio ~");
}
</script>
</head>
Espero que este artigo seja útil para a programação JavaScript de todos.