Tutorial Basic DOM: Usando DOM

Autor：Eve Cole Data da Última Atualização：2025-06-10 07:48:02

Depois de entender as estruturas e nós do DOM (modelo de objeto de texto), o mais importante é usar esses nós para processar as páginas da web html

Para um nó DOM, há uma série de propriedades e métodos a serem usados. Comumente usados são a tabela a seguir.

Melhorado: http://www.w3school.com.cn/xmldom/dom_element.asp

1. Nós de acesso

BOM fornece alguns métodos de limite para acessar nós. Comumente usados são getElementsByTagName () e getElementById ()

A cópia do código é a seguinte:

Função searchdom () {

var oli = document.getElementsByTagName ("li");

var j = oli.length;

var j2 = oli [5] .TagName;

var j3 = oli [0] .childnodes [0] .NodEvalue;

document.write (j+"<br>"+j2+"<br>"+j3+"<br>");

}

</script>

<Body>

<ul> Linguagem do cliente

<li> JavaScript </li>

</ul>

<ul> Linguagem lateral do servidor

</ul>

</body>

document.getElementById ()

A cópia do código é a seguinte:

window.onload = function () {

function findid () {

var j4 = oli2.tagName;

document.write (j4);

}

var oli2 = document.getElementById ("Inn");

oli2.OnClick = findID;

}

</script>

A cópia do código é a seguinte:

<html>

x = document.getElementsByTagName ('div') [0];

Document.Write ("Classe Div CSS:" + x.className);

document.write ("<r />");

document.write ("uma maneira alternativa:");

document.write (document.getElementById ('myid'). ClassName);

</script>

</body>

</html>

// Id Get ClassName

2. Detectar o tipo de nó

O tipo de nó pode ser detectado através do NodeType do nó e um parâmetro retorna 12 valores inteiros.

Formato de expressão como document.nodeType

O que é realmente útil são os três tipos mencionados pelos nós do modelo no modelo DOM (i)

Nós de elemento, nós de texto e nós de atributo

1. O nó do elemento retorna o valor do nó do elemento é 1

2. O nó do atributo retorna o valor do nó do atributo é 2

3. O valor de retorno do nó de texto é 3

A cópia do código é a seguinte:

window.onload = function () {

function findid () {

var j5 = oli2.nodeType;

document.write ("nodeType:" + j5 + "<br>");

}

var oli2 = document.getElementById ("Inn");

oli2.OnClick = findID;

}

</script>

Retorno: NodeType: 1

Isso significa que algum nó pode ser processado separadamente, o que é muito prático ao procurar nós. Será discutido mais tarde.

3. Use relacionamento pai-filho-irmão para encontrar nós

Na primeira seção Nó de acesso, use o atributo ChildNodes do nó para acessar o nó de texto contido no nó do elemento.

Esta seção usa o relacionamento pai-filho dos nós para encontrar nós

*Use os atributos Haschildnodes e Childnodes para obter todos os nós contidos neste nó

A cópia do código é a seguinte:

<head>

<title> ChildNodes </ititle>

window.onload = function mydomispector () {

var al = document.getElementById ("mylist"); // Obtenha a tag <ul>

var domstring = "";

if (ol.haschildnodes ()) {// julgar se existem nós filhos de criança

var occh = Oul.ChildNodes;

for (var i = 0; i <Och.Length; i ++) // Pesquise um por um

Domstring + = OCH [i] .Nodename + "<br>";

}

document.write (domstring);

}

</script>

</head>

<Body>

<li> costelas doces e azedas </li>

<li> Carga de carne de porco cozida no vapor </li>

<li> Kimchi Fish </li>

<li> Chestnut assado frango </li>

</ul>

</body>

4.dom recebe o nó pai do nó

A cópia do código é a seguinte:

window.onload = function () {

var comida = document.getElementById ("mydarfood");

document.write (Food.parentnode.tagname)

}

</script>

</head>

<Body>

<ul>

<li> costelas doces e azedas </li>

<li> Carga de carne de porco cozida no vapor </li>

<li> Kimchi Fish </li>

<li id = "myDearfood"> Chestnut assado frango </li>

</ul>

// retorna ao UL

Usando o nó pai, o nó pai do nó especificado foi obtido com sucesso

5. Use a propriedade ParentNode

A cópia do código é a seguinte:

<head>

<title> ChildNodes </ititle>

window.onload = function () {

var comida = document.getElementById ("mydarfood");

var parentelm = Food.parentNode;

while (parentelm.className! = "Colorful" && Parentelm! = Document.body)

parenteLM = parentelm.ParentNode; // Olhe para cima até o fim

Document.Write ("Tagename:"+Parentelm.TagName+"<br>");

Document.Write ("Claaname:"+ParentelM.ClassName+"<br>");

document.write ("typeof:"+typeof (alimento)+"<br>");

}

</script>

</head>

<Body>

<div>

<ul>

<pan>

<li> costelas doces e azedas </li>

<li> Carga de carne de porco cozida no vapor </li>

<li> Kimchi Fish </li>

<li id = "myDearfood"> Chestnut assado frango </li>

</span>

</ul>

</div>

</body> <br> // output <br> // tagename: div <br> claaname: colorful <br> typeof: objeto

Comece com um nó infantil e procure o nó pai para cima até que o nome da classe do nó seja "colorido"

6. Irmandade de Dom

A cópia do código é a seguinte:

<head>

<title> ChildNodes </ititle>

window.onload = function () {

var alimentos = document.getElementById ("mydarfood");

var nextf = alimentos.Nextsibling;

alerta ("NextSibling:" +nextf.tagname +"<br>");

}

</script>

</head>

<Body>

<div>

<ul>

<pan>

<li> costelas doces e azedas </li>

<li> Carga de carne de porco cozida no vapor </li>

<li> Kimchi Fish </li>

<li id = "myDearfood"> Chestnut assado frango </li>

</span>

</ul>

</div>

</body>

Parece ótimo acessar os nós irmãos usando propriedades próximas e anteriores.

Mas só funciona para o navegador do IE

Para ter uma boa compatibilidade com o código, o NodeType deve ser usado para fazer o julgamento

A seguir, é compatibilidade:

A cópia do código é a seguinte:

<head>

<title> irmãos </title>

função nextSib (nó) {

var templast = node.parentnode.lastChild;

// julga se é o último nó, em caso afirmativo, retorne nulo

if (nó == templast)

retornar nulo;

var tempobj = node.nextsibling;

// Pesquise os nós do irmão subsequente um por um até que o nó do elemento seja encontrado

while (tempobj.nodetype! = 1 && tempobj.nextsibling! = null)

tempobj = tempobj.nextsibling;

// Operador de três pontos, se for um nó de elemento, retorna o nó em si, caso contrário, retorna nulo

return (tempobj.nodeType == 1)? Tempobj: null;

}

função prevsib (nó) {

var tempfirst = node.parentnode.firstchild;

// julga se é o primeiro nó, se sim, retorne nulo

if (nó == tempfirst)

retornar nulo;

var tempobj = node.previoussibling;

// Pesquise os nós do irmão anterior um por um até que o nó do elemento seja encontrado

while (tempobj.nodetype! = 1 && tempobj.previousibling! = null)

tempobj = tempobj.previoussibling;

return (tempobj.nodeType == 1)? Tempobj: null;

}

function mydomispetor () {

var myitem = document.getElementById ("myDearfood");

// Obtenha o próximo elemento Brother Node

var nextListItEM = nextSib (myitem);

// Obtenha o nó do elemento anterior

var prelistItem = prevSib (myitem);

alert ("Último item:" + ((nextListItem! = null)? NextListItem.firstchild.nodEvalue: null) + "prelistItem:" + ((prelistItem! = null)? prelistitem.firstchild.nodEvalue: null));

}

</script>

</head>

<ul>

<li> costelas doces e azedas </li>

<li> Carga de carne de porco cozida no vapor </li>

<li> Kimchi Fish </li>

<li id = "myDearfood"> Chestnut assado frango </li>

</ul>

</body>

7. Defina propriedades do nó

A cópia do código é a seguinte:

<head>

<title> ChildNodes </ititle>

window.onload = function () {

// Obtenha fotos

var imgdatabe = document.getElementsByTagName ("img") [0];

// Obtenha o atributo do título da foto

imgdatabe.setAttribute ("src", "02.gif");

imgdatabe.setattribute ("title", "slope amigável");

document.write (imgdatabe.getAttribute ("title"));

document.write (imgdatabe.getAttribute ("alt"));

document.write (imgdatabe.getAttribute ("node-data"));

document.write (imgdatabe.getAttribute ("node_data"));

}

</script>

</head>

<Body>

<div>

</body>

Use o método setAttribute () para definir atributos do nó

A cópia do código é a seguinte:

<head>

<title> ChildNodes </ititle>

window.onload = function () {

var bkk = document.getElementById ("new5");

var clickbk = document.getElementById ("qiehuan");

clickbk.onclick = dsqiehuan;

função dsqiehuan () {

bkk.setattribute ("classe", "xxx")

}

</script>

.xxx {color: #ddd}

</style>

</head>

<Body>

555

</div>

<em id = "qiehuan"> switch </em>

</body>

8.CreateElement () Crie um nó

A cópia do código é a seguinte:

<head>

<title> ChildNodes </ititle>

window.onload = function () {

var op = document.createElement ("p");

var otext = document.createTextNode ("Crie um nó usando dom");

var otext1 = document.createTextNode ("Crie um nó 123 usando DOM");

op.appendChild (otext);

op.appendChild (otext1);

document.body.appendChild (OP);

}

</script>

</head>

<Body>

<p> Havia originalmente um p aqui, teste createElement () </p>

</body>

9.RemoveChild Remove o nó

A cópia do código é a seguinte:

<head>

<title> ChildNodes </ititle>

window.onload = function () {

var op = document.getElementsByTagName ("p") [0];

op.parentnode.removeChild (op); // O final é .RemoveChild (OP), não .RemoveChild ("OP")

}

</script>

</head>

<Body>

<p> Havia originalmente um p aqui, teste createElement () </p>

</body>

10.InsertBefore () Insira o nó antes de um nó específico

A cópia do código é a seguinte:

<head>

<title> ChildNodes </ititle>

window.onload = function () {

var opold = document.getElementsByTagName ("p") [0];

var opnew = document.createElement ("p");

var otext = document.createTextNode ("novo nó")

opnew.appendChild (otext);

Opold.parentnode.insertBefore (opnew, opold); // recebe dois parâmetros, um é o novo parâmetro e o outro é o parâmetro antigo do nó

}

</script>

</head>

<Body>

<p> Havia originalmente um p </p>

</body>

11. Insira novos elementos após um nó específico (adicionado em 9 de janeiro de 2015)

Os métodos fornecidos pelo DOM podem adicionar apenas novos elementos antes do elemento de destino usando insertBefore () ou usar o método AppendChild () para adicionar novos elementos no final dos Childnodes do elemento pai (exemplo: endereço).

Na prática, é frequentemente usado para adicionar novos elementos no final de um elemento específico. O método DOM não possui o método insertBefore (), mas o uso do conhecimento existente pode ser usado para escrever.

A ideia de código é a seguinte

A cópia do código é a seguinte:

função insertafter (newelement, TargetElement) {

var Outdoor = TargetElement.ParentNode; // Encontre o elemento pai do elemento de destino

if (adarent.lastChild == TargetElement) // se o alvo for o último elemento

Outdoor.AppendChild (NewElement); // Adicione diretamente ao último elemento

else // antes de inserir no nó do elemento pai do próximo elemento

Outdoor.InsertBefore (Newelement, TargetElement.Nextsibling)

Exemplo: (anexar fora do elemento) Instância original: endereço

A cópia do código é a seguinte:

<head>

</head>

<p> Primeiro </p>

<P ID = "Target"> Segundo </p>

função insertafter (newelement, TargetElement) {

var Outdoor = TargetElement.ParentNode; // Encontre o elemento pai do elemento de destino

if (adarent.lastChild == TargetElement) // se o alvo for o último elemento

Outdoor.AppendChild (NewElement); // Adicione diretamente ao último elemento

else // antes de inserir no nó do elemento pai do próximo elemento

Outdoor.InsertBefore (Newelement, TargetElement.Nextsibling)

}

function interp () {

var ooparent = document.getElementById ("Target");

var ooonewp = document.createElement ("a");

oonewp.setattribute ("href", "http://www.qq.com");

var ootextp = document.createTextNode ("link");

oonewp.appendChild (ooeTextp);

insertafter (ooonewp, ooparente);

}

</script>

</body>

Exemplo: Adicionado no elemento

12. Adicione a fragmentação do documento para melhorar a eficiência da execução

A cópia do código é a seguinte:

<head>

<title> ChildNodes </ititle>

window.onload = function () {

var opold = document.getElementsByTagName ("p") [0];

var acolors = ["Red", "Green", "Blue", "Magenta", "Amarelo", "Chocolate", "Black", "Aquamarine", "Lime", "Fuchsia", "Brass", "Azure", "Brown", " bronze "," deeppink "," aliceblue "," cinza "," cobre "," coral "," feldspato "," laranja "," orquídea "," rosa "," ameixa "," quartzo "," roxo "];

var ofRagment = document.createCumentFragment (); // Crie fragmentação de documentos

for (var i = 0; i <acolors.length; i ++) {

var op = document.createElement ("p");

var otext = document.createTextNode (acolors [i]);

op.appendChild (otext);

Ofragment.AppendChild (OP); // Adicionar nós aos fragmentos primeiro

}

//document.body.appendChild(ofragment); // adicionado à página no último

Opold.parentnode.insertBefore (Ofragment, Opold); // Combinado com inserção antes de adicionar fragmentos de documentos ao nó

}

</script>

</head>

<Body>

<p> Havia originalmente um p </p>

</body>