Tipo de nó
NodeType
Aqui estão alguns valores importantes do NodeType:
1: elemento elemento
2: Att
3: texto de texto
8: Comentários
9: Documento do documento
NodeName, Nodevalue
Relacionamento do nó
ChildNodes: Cada nó possui uma propriedade Childnodes, que detém um objeto Nodelist
FirstChild: equivalente a ChildNodes [0]
LastChild: equivalente a childnodes.length-1
Ao mesmo tempo, outros nós na mesma lista podem ser acessados usando as propriedades anteriores e próximas de cada nó da lista.
Nó de operação
ApndendChild ()
O método AppendChild () é usado para adicionar um nó ao final da lista ChildNodes. Depois de adicionar um nó, os ponteiros do relacionamento do novo nó, o nó pai e o último nó da criança do Childnodes serão atualizados de acordo.
insertBefore ()
InsertBefore () Método aceita dois parâmetros: o nó a ser inserido e o nó a ser referenciado.
// Após a inserção, torna -se o último nó infantil retornada = SOMENODE.INSERTBE antes (newNode, nulo); // Após a inserção, torna -se o primeiro nó retornouNode = SOMENODE.INSERSTBEFORE (newNode, somenode.firstchild); // inserção antes do nó de renovação, SOMODNODE = SOMENOD. SOMEN.IMOD.IMOD.IMOD.IMODENODENOTENOTEMEN.IMOD.IMODENOTENOTENOTENOTESNODEMENO = SONOTENOTESNOD.
Replacechild ()
replacechild () aceita dois parâmetros, o nó a ser inserido e o nó a ser substituído
var returnEdNode = SOMENODE.REPLACECHILD (NEWNODE, SOMENODE.FIRSTCHILD);
removechild ()
Remova apenas e não substitua nós.
var antigofirstChild = SOMENODE.REMOVECHILD (SOMENODE.FIRSTCHILD);
CLONENODE ()
Item 1
Item 2
Item 3
var deeplist = myList.clonEnode (true); console.log (deeplist.length); // 3VAR SHOULLIST = myList.clonEnode (false); console.log (shallowlist.childnodes.length); // 0
Tipo de documento
O nó do documento tem as seguintes características:
Filhos do documento
var html = document.documentElement; // Obtenha uma referência ao <html> console.log (html === document.childnodes [0]); // TrueConsole.log (html === document.firstchild); // verdadeiro
Informações do documento
// Obtenha o título do documento var originalTitle = document.title; // Defina o documento do documento document.title = "novo título da página"; // obtenha o urlvar completo url = document.url; // obtenha o nome de domínio var domain = document.domain; // obtenha o urlvar referent = document.ReferRer; // assume que a página vem do P2P.wrox.com.com Document.DomAin = "assume que o P2P.wrox.com.com Document.DomAin; // document.domain de sucesso = "nczonline.net"; // Fracassado
Ligue para o documento.getElementById ("MyElement"); O resultado retornará o elemento <input>, como mostrado abaixo;
A melhor maneira é não fazer o nome atributo do campo de formulário o mesmo que o ID de outros elementos.
<input type = "text" name = "myElement" value = "campo de texto"> <div id = "myElement"> um div </div>
Coleção especial
Escrita de documentos
<html> <head> <title> document.write () Exemplo 3 </ititle> </ad Head> <body> <script type = "text/javascript"> document.write ("<script type =/text/javascript/" src =/"file.js/"> ") +" <// script> "); </script> </body> </html>Strings <// script> não serão consideradas tags fechadas para tags de script externas; portanto, não haverá conteúdo desnecessário na página.
Tipo de elemento
O nó do elemento tem as seguintes características:
Para acessar o nome da tag de um elemento, você pode usar o atributo nodename ou o atributo tagname;
<div id = "mydiv"> </div> var div = document.getElementById ("mydiv"); console.log (div.TagName); // divconsole.log (div.nodename); // Divif (Element.Tagname == "div") {// Você não pode comparar assim, é fácil cometer erros} if (element.tagname.tolowercase == "div") {// Isso é o melhor (para qualquer documento)}Obtenha recursos
Existem três métodos principais de DOM para características operacionais, nomeadamente getAttribute (), setAttribute () e removeattribute ();
Observe que o nome do atributo passado para getAttribute () é o mesmo que o nome do atributo real. Impressão: Para obter o valor do atributo da classe, você deve passar na "classe" em vez de "ClassName".
var div = document.getElementById ("mydiv"); console.log (div.getAttribute ("classe")); // bdCriar elementos
Use o método Document.CreateElement () para criar um novo elemento.
Filhos do elemento
Antes de executar uma operação, você geralmente precisa verificar a propriedade NodeType primeiro, conforme mostrado no exemplo a seguir:
for (var i = 0; len = element.childnodes.length; i <len; i ++) {if (element.childnodes [i] .NodeType == 1) {// execute algumas operações}}Tipo de texto
Os nós de texto têm as seguintes características:
Crie um nó de texto
Você pode usar o document.createTextNode () para criar um novo nó de texto.
Nós de texto normalizados
Normalizar()
Nós de texto dividido
SplittExt ()
Tipo de comentário
O nó de comentário tem as seguintes características:
Tecnologia de operação DOM
Formulário de operação
// crie tabela tabela = document.createElement ("tabela"); tabela.border = 1; tabela.width = "100%"; // crie tbodyvar tbody = document.createElement ("tbody"); tabela.appendChild (tbody); // crie a primeira linha TBody.Insertrow (0); TBody.Rows [0] .InsertCell (0); TBody.Rows [0] .Cells [0] .AppendChild (Document.CreateTextNode ("Cell 1,1"); 2,1 ")); // Crie a segunda linha TBody.inserTrow (01); tbody.Rows [1] .InSertCell (0); tbody.Rows [1] .Cells [0] .appendChild (document.createTextNode (" célula 1,2 ")); tbody.Rows [1] .InsertCell (1); tbody.Rows [1] .Cells [1] .appendChild (document.createTextNode (" célula 2,2 ")); document.body.appendchild (tabela);API seletora
método querySelector ()
// obtenha o elemento corporal var document.body.QuerySelector ("img.button");método querySelectorAll ()
// obtenha todos os elementos <em> em um <div> (semelhante ao getSbyTyTagName ("em")) var ems = document.getElementById ("mydiv"). QuerySelectorAll ("em"); // obtenha todos os elementos da classe "selecionados" var selecionados = documerselectorll document.QuerySelectorAll ("P forte");Html5
Extensões relacionadas a classe
getElementsByClassName Método:
Este método pode ser chamado através do objeto de documento e todos os elementos HTML.
// Obtenha todos os elementos que contêm "nome de usuário" e "atual" na classe. A ordem dos nomes das classes não importa var allCurrentUserNames = document.getElementsByclassName ("Nome de usuário atual"); // Obtenha todos os elementos com o nome da classe "selecionado" no elemento com id "mydiv" var selected = document.getElementById ("mydiv").Gerenciamento de foco
O HTML5 também acrescenta a função de ajudar no gerenciamento do DOM Focus. O primeiro é o documento.
var Button = document.getElementById ("myButton"); button.focus (); alert (document.activeElement === Button); // verdadeiroPor padrão, quando o documento é carregado, o documento.ActiveElement é armazenado no documento.ActiveElement com uma referência ao elemento do documento.body. Durante o carregamento do documento, o valor do documento.ActiveElement é nulo.
Além disso, o método Document.Hasfocus () foi adicionado, que é usado para determinar se o documento ganhou foco.
var Button = document.getElementById ("MyButton"); Botton.focus (); alert (document.hasfocus ()); // verdadeiro