O que é Dom? DOM é um conjunto de interfaces de API com base na programação do navegador (neste tutorial, pode -se dizer que é uma programação DHTML). O W3C tem algumas diferenças sutis em cada navegador. Entre eles, o navegador de Mozilla é o mais semelhante ao padrão. O JavaScript simples deve combinar DOM para executar a programação DHTML e pode produzir efeitos bonitos e ser aplicado à Web. É quase o mesmo que outros idiomas, assim como C/C ++ requer suporte à biblioteca. Caso contrário, é simplesmente uma pesquisa gramatical. O que estamos mais preocupados é que o DOM conecta páginas da web com scripts e outras linguagens de programação. DOM pertence ao navegador, não ao conteúdo principal especificado na especificação do idioma JavaScript.
Encontre elementos
1. Pesquise diretamente
| Nome do método | descrever |
| getElementById (id) (documento) | Obtenha elementos no documento com um valor de atributo de identificação exclusivo especificado |
| getElementsbytagname_r (nome) | Retorna uma variedade de elementos filhos com nome de tag especificado no elemento atual |
| Document.getElementsByClassName | Obtenha a coleção de tags com base em atributos |
| getAttribute (nome) | Retorna o valor do atributo do elemento, o atributo é especificado pelo nome |
1> document.getElementById ('id')
<Body> <div id = "zhang"> não é bonito </div> <script type = "text/javascript"> var i = document.getElementById ('zhang'); // Encontre o ID especificado i.innerText = 'muito bonito'; // InnerText Modifique a string especificada </sCript> </body>Exibir efeito, quando abrirmos, ou seja, será modificado para ser muito bonito.
2> getElementsByTagname_r (nome)
<Body> <div name = "zhang"> não é bonito </div> <script type = "text/javascript"> var i = document.getElementByTagnmae ('zhang'); // Encontre o nome especificado I.innerText = 'muito bonito'; // InnerText Modifique a string especificada </sCript> </body>O mesmo efeito de exibição
3> document.getElementsByClassName
<body> <div> não bonito </div> <script type = "text/javascript"> var i = document.getElementClassName ('zhang'); // Encontre o nome da classe especificado i.innerText = 'muito bonito'; // InnerText Modifique a string especificada </sCript> </body>2. Pesquisa indireta
| Nome do atributo | descrever |
| Childnodes | Retorna uma matriz de todos os elementos infantis do elemento atual |
| Childnodes | Retorna todos os elementos infantis do elemento atual |
| FirstChild | Retorna o primeiro elemento infantil inferior do elemento atual |
| LastChild | Retorna o último elemento infantil do elemento atual |
| próximo | Retorna o elemento imediatamente após o elemento atual |
| Anteriorsbling | Retorna o elemento imediatamente anterior ao elemento atual |
| ParentElement | Retorna seu elemento de etiqueta do nó pai |
| crianças | Devolver todas as suas legendas |
| FirstElementChild | Retorna o primeiro elemento de legenda |
| LastElementChild | Retorna o último elemento de subtago |
| NextElementsibling | Retorne下一个兄弟标签元素 |
| Anteriores dolementsibling | Retorne ao elemento de tag de irmãos anteriores |
Com o W3C DOM, você pode escrever scripts simples de navegador, aproveitando ao máximo a potência e a flexibilidade do XML para usar o XML como meio de comunicação entre o navegador e o servidor.
Elementos de operação
1. Propriedades e métodos W3C DOM usados para criar conteúdo dinamicamente
| Propriedades/métodos | descrever |
| Document.CreateElement_X (Tagname) | O método createElement_x no objeto de documento pode criar elementos especificados por tagname. Se a string div for usada como parâmetro do método, um elemento div será gerado |
| document.createTextNode (texto) | O método CreateTextNode do objeto de documento criará um nó contendo texto estático. |
| <lement> .AppendChild (ChildNode) | O método ApndendChild adiciona o nó especificado à lista de nós filhos do elemento atual (como um novo nó filho). |
| <lement> .setAttribute (nome, valor) | Esses métodos obtêm e definem o valor do atributo de nome no elemento |
| <lement> .InsertBefore (newNode, TargetNode) | Insira o nó newNode como o nó filho do elemento atual em frente ao elemento TargetNode |
| <lement> .removeattribute (nome) | Este método exclui o nome do atributo do elemento |
| <lement> .removeChild (ChildNode) | Este método remove o elemento infantil Nó do elemento |
| <lement> .replacechild (newNode, OldNode) | Este método substitui o nó OldNode pelo nó newNode |
| <lement> .haschildnodes () | Este método retorna um valor booleano indicando se o elemento tem elementos filhos |
2. Conteúdo da tag
InnerText Obtenha o conteúdo do texto tag INNERHTML Obtenha o valor do conteúdo HTML Obtenha o valor, ou seja, o valor do formulário enviado
Ou seja, o seguinte é o seguinte:
<div> 1111 </div> <div> 2222 </div> <input type = "text" value = "zhang yanlin"> <cript> document.getElementsByclassName ("zhang"). inertext = 123; // Obtenha a tag com o nome da classe Zhang e altere o conteúdo para 123 document.getElementsByClassName ("yan"). Innerhtml = 456; // Obtenha a tag com o nome da classe Yan e altere o conteúdo para 456 document.getElementsByclassName ("lin"). Value = "zhang yanlin é bonito"; // Obtenha a tag com o nome da classe Lin e altere o conteúdo para Zhang Yanlin é bonito </sCript>3. Atributos
Atributos // Obtenha todos os atributos de tag SetAttribute (chave, valor) // Definir atributo de tag getAttribute (key) // obtenha o atributo de tag especificado
Por meio de propriedades personalizadas, você pode fazer um caso de selecionar todos, desmarcando e desmarcando. O código é o seguinte:
<! Doctype html> <html lang = "pt"> <head> <meta charset = "utf-8"> <title> title </title> </ad Head> <body> <div> <input type = "button" value = "selecione todos" OnClick = "checkall ();"> <input = "" "" "" ""; type = "Button" value = "Undeselect" onclick = "Recvall ();"> </div> <div id = "i1"> <ul> <li> <input type = "caixa de seleção" value = "1"> basquete </li> <li> </ul> </div> <cript> função checkall () {var b = document.getElementsByclassName ("c1"); for (var i = 0; i <B.Length; i ++) {var check = b [i]; check.checked = true}} função canCleall () {var b = document.getElementsByclassName ("c1"); for (var i = 0; i <var i = 0; i <b.length; i ++) {var check = b [i]; check.checked = false}} função recvall () {var b = document.getElementsByClassName ("c1"); for (var i = 0; i <B.Length; i ++) {var check = b [i]; if (check.checked) {check.checked = false} else {check.checked = true}}} </script> </body> </html> selecione tudo, reverso, cancelar casosNota: OnClick é um evento de clique, que será mencionado mais adiante
4. Operação de classe
ClassName // Get todas as classes ClassList.Remove (CLS) // Exclua a classe especificada ClassList.add (CLS) // Adicionar classe
Essa coisa é muito útil. Por exemplo, no JD.com, quando nosso mouse é colocado em todos os produtos, muitos produtos aparecem abaixo. Os produtos estão ocultos e só aparecem após o evento desencadeante definir um atributo oculto CSS. Depois que o mouse é colocado, o atributo oculto CSS é removido; O mouse é removido e o atributo oculto é adicionado.
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> hide </title> <yoy> .hide {display: nenhum; } </style> </head> <body> <span onMouseOverover = "Mouover ();"> coloque algo disso, mas desaparece sem colocá-lo </span> <div id = "zhangyanlin" style = "font-size: 60px"> zhang yanlin é tão bonito </div> <cript> função mou () () {) {) (script> (60px "> zhang yanlin é tão bonito </div> <cript> function document.getElementById ("Zhangyanlin"). ClassList.Remove ("Hide"); } function mouout () {document.getElementById ("zhangyanlin"). classlist.add ("hide"); } </script> </body> </html> Vamos acordar o cérebro com um caso5. Operação de tag
Podemos criar tags através do DOM e adicioná -las ao local especificado. Aqui estão dois métodos para operar tags
// método um var zhang = "<type de entrada = 'text' />" ;xxx.insertadjacenthtml("beforeEnd",zhang) ;xxx.insertadjacentelement('afterbegin'.document.createEnin ') // note: o primeiro parâmetro // Método dois var tag = document.createElement ('div') xxx.appendchild (tag) // Adicione um elemento div xxx.insertBefore (tag, xxx [1]) // inserir na posição especificada, você pode usar o índice <! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <body> <div> <div> <input type = "text"/> <input Type = "" value = "add" onClick = "addement (this);" /> </div> <div style = "posição: relativa;"> <ul id = "comentário"> <li> ALEX </li> <li> Eric </li> </ul> </div> </div> <cript> função addElement (ths) {// obtendo o valor de entrada var val = ths.PreviousElement.value; ths.previousElementsibling.value = ""; var ComentemList = document.getElementById ('CommentList'); // O primeiro formulário, String Method // var str = "<li>" + val + "</li>"; // 'Antes de BEGIN', 'Afterbegin', 'Antes', 'Afterend' // Antes erend Last // Antes de BEIBRANTE EXTERNAL // AfterBegin interno Closefitting // Afterend Pasing de parede externo //commentList.insertadjacenthtml("Beforend".str); // O segundo método é o método do elemento var tag = document.createElement ('li'); tag.innerText = val; var temp = document.createElement ('a'); temp.innerText = 'Baidu'; temp.href = "http://etiantian.org"; tag.appendChild (temp); // commentlist.appendChild (tag); comentário.insertBefore (tag, comentário.children [1]); } </script> </body> </html> Adicionar caixa de operação de tag6. Operação no estilo
<body> <div id = i1> zhang yanlin é bonito </div> <cript> var obj = document.getElementById ('i1'); obj.style.fontsize = "32px"; obj.style.backgroundcolor = "vermelho"; </script> </body>Os efeitos são os seguintes:
Vamos levar um caso. Apenas olhar para os pontos de conhecimento é chato. Muitas vezes vemos a fonte mais escura na caixa de entrada, o que o leva a inserir algo. Quando você clica, ele desaparece. É uma operação mágica. É alcançado através do DOM. Basta ler o código sem dizer muita bobagem.
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> <yoy> .bb {color: #9a9a9a; } .aa {cor: preto; } </style> </head> <body> <insput value = "Por favor, digite conteúdo" onfocus = "inpatu (this);" onblur = "onbtu (this);"> <SCRIPT> função inpatu (ths) {ths.classname = "aa"; Var text = ths.Value; if (text == "digite conteúdo") {ths.value = ""; }} função onbtu (ths) {var text = ths.value; if (text == "Por favor, digite conteúdo" || text.trim (). comprimento == 0) {ths.className = "bb"; ths.value = "insira o conteúdo"; }} </script> </body> </html> Prompt de entrada de entrada de entrada7. Operação de posição
Documento total de altura do documento document.documentElement.offsetHeight O documento atual ocupa a altura da tela document.documentElement.clientHeight Tag de altura automática.
Você achou que há um retorno ao topo no canto inferior direito da página da web e depois retornará ao topo em um ponto mais menor? Sim, é para calcular essas alturas; E quando você puxa o mouse, o estilo correspondente da barra de menus à esquerda mudará.
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <ylem> body {margin: 0px; } img {borda: 0; } ul {preenchimento: 0; margem: 0; estilo de lista: nenhum; } h1 {preenchimento: 0; margem: 0; } .clearfix: após {content: "."; exibição: bloco; altura: 0; claro: ambos; Visibilidade: escondida; } .wrap {width: 980px; margem: 0 automático; } .pg-header {background-color: #303A40; -webkit-box-shadow: 0 2px 5px rgba (0,0,0, .2); -moz-box-shadow: 0 2px 5px rgba (0,0,0, .2); Shadow de caixa: 0 2px 5px rgba (0,0,0, .2); } .pg header .logo {float: esquerda; preenchimento: 5px 10px 5px 0px; } .pg header .logo img {vertical-align: Middle; Largura: 110px; Altura: 40px; } .pg-header .nav {altura de linha: 50px; } .pg header .nav ul li {float: esquerda; } .pg header .nav ul li a {display: block; Cor: #ccc; preenchimento: 0 20px; Decoração de texto: Nenhum; Size da fonte: 14px; } .pg-header .nav ul li a: pairar {color: #fff; Background-Color: #425A66; } .pg-corpo {} .pg-corpo .catalog {posição: absoluto; topo: 60px; Largura: 200px; Background-Color: #fafafa; Inferior: 0px; } .pg-corpo .catalog.fixed {position: corrigido; topo: 10px; } .pg-corpo .catalog .catalog-item.active {color: #fff; Background-Color: #425A66; } .pg-corpo .Content {Posição: Absolute; topo: 60px; Largura: 700px; margem-esquerda: 210px; Background-Color: #fafafa; Overflow: Auto; } .pg-corpo .Content .Section {Hight: 500px; borda: 1px vermelho sólido; } </style> <corpo onscroll = "scrollevent ();"> <div> <div> <div> <a href = "#"> <img src = "http://core.pc.lietou-Static.com/revs/images/common/logo_7012c4a4.pn"> href = "#"> home </a> </li> <li> <a href = "#"> função 1 </a> </li> <li> <a href = "#"> função 2 </a> </li> </ul> </div> </div> </div> <div> a </div) </li> "Catal" </div> </div> </div> <div> <div> <div> "Catal" "Catal" " 1 </a> </div> <div auto = "function2"> <a> Foto 2 </a> </div> <div auto-to = "function3"> <a> Figura 3 </a> </div> </div> <div id = "content"> <div menu = "function1"> <h1> CAPÍTULO 1 </h1> </Capt. <div menu = "function3"> <h1> Capítulo 3 </h1> </div> </div> </div> </sCript> <cript> função scrollevent () {var bodyScrolltop = document.body.scrolltop; if (bodyscrolltop> 50) {document.getElementsByclassName ('catalog') [0] .classList.add ('fixo'); } else {document.getElementsByclassName ('catalog') [0] .classList.remove ('fixo'); } var content = document.getElementById ('content'); var seções = content.Children; for (var i = 0; i <seções.length; i ++) {var current_section = seções [i]; // A altura absoluta do rótulo atual do topo var scofftop = current_section.OffSetTop + 60; // O rótulo atual da parte superior, a altura relativa var offtop = scofftop - bodyscrolltop; // a altura do rótulo atual var de altura = current_section.ScrolHeight; if (Offtop <0 && -offtop <altura) {// O rótulo atual adiciona ativo // outra remoção de vars ativos vars = document.getElementById ('catalog'). crianças; var current_menu = menus [i]; current_menu.classList.add ('Active'); for (var j = 0; j <menus.length; j ++) {if (menus [j] == current_menu) {} else {menus [j] .classList.remove ('ativo'); } } quebrar; }}}} </script> </body> </html> Menu de rolagem <! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> <style> .pg-top {posição: corrigido; Background-Color: #0095bb; Altura: 40px; Largura: 40px; Inferior: 50px; Direita: 40px; Cor: Whitesmoke; } .Hide {display: Nenhum; } </style> </head> <corpo onscroll = "func ();"> <div style = "altura: 3000px;" id = "i1"> <h1> zhang yanlin </h1> </div> <div id = "i2"> <a href = "javascript: void (0);" OnClick = "Gotop ();"> retornar ao top </a> </div> <cript> function func () {var scrolltop = document.body.scrolltop; var i1 = document.getElementById ("i2"); if (scrolltop> 20) {i1.classList.remove ("hide")} else {i1.classList.add ("hide")}} function () {document.body.scrolltop = 0; } </script> </body> </html> de volta à parte superior8. Outras operações
caixa de saída Console.log caixa de alerta de alerta pop-up Confirmar Confirmar caixa // URL e atualizar localização.HREF Get Urllocation.href = "url" Redirecionar localização.reload () recarregar // Timer SetInterval Timer múltiplo clearInterval Clear Timer múltiplo Settimeout Timer clearTimeout Clear Timer único Timer
Deixe -me falar sobre o cronômetro. O timer é mais útil. Por exemplo, quando excluímos um email, encontraremos um pop-up de conversa. O email foi excluído. Este é um único cronômetro. Múltiplos timer podem ser usados quando você tiver necessidades específicas.
// Caso do timer múltiplo <input type = "button" value = "intervalo" onclick = "interval ();"> <input type = "button" value = "stopInterval" onclick = "stopInterval ();"> <cript> interval de função () {s1 = setInterval (function () {console.Log (123) // continua () {s1 = setInterval (function () {console.Log (123) // s1 = setInterval (function () {console.log (123)}, 500); } função stopInterval () {clearInterval (s1); // Limpe um cronômetro múltiplo} </sCript>Timer único
<div> <input type = "button" value = "delete" onclick = "delete ();"> <input type = "button" value = "Keal o status atual" onclick = "undElete ();"> <div id = "status"> </div> </div> <script> funcript delate () {document.lementydby "> t1 = setTimeout (clearstatus, 1500); } function clearstatus () {document.getElementById ("status"). innerText = ""; } function undelete () {cleartimeout (t1); // Depois de limpar o cronômetro, ele continuará mostrando} </sCript>evento
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </ad Head> <body> // Evento normal <butt Id = "Btn1" OnClick = "func (); function func () {alert ("processamento de tempo normal")} </script> // Nível 0 Evento de processamento <botão id = "btn2"> nível 0 Botão de processamento </botão> <cript> var btn = document.getElementById ("btn2"); btn.OnClick = function () {alert ("Botão de processamento de nível 0")}; // btn.onClick = null; // Processamento de eventos claros, vários eventos serão substituídos, deixando apenas o último evento </sCript> // Evento de processamento de nível 2 <botão id = "btn3"> Botão de processamento de nível 2 var Btn1 = document.getElementById ("BTN3"). AddEventListener ("Click", function () {alert ("Evento de processamento secundário 2")}); // não substituído </script> <button id = "btn4"> botão compatível completo </botão> <cript> var btn = document.getElementById ("btn4"); if (btn.addeventListener) {btn.addeventListener ("clique", demonstração); } else if (btn.attachevent) {btn.attachevent ("OnClick", demonstração); } else {btn.onClick = Demo; } function Demo () {alert ("Manipulação de eventos de compatibilidade integrada")} </script> </body> </html>Lista de eventos:
| propriedade | Quando esse evento ocorre (quando é acionado) |
| onabort | O carregamento da imagem é interrompido |
| onblur | O elemento perde o foco |
| OnChange | O conteúdo da área foi modificado |
| ONCLICK | O identificador de evento chamado quando o usuário clica em um objeto (executando o exemplo de código acima ao clicar na tag de entrada) |
| OndblClick | Identificador de eventos chamado quando o usuário clica duas vezes em um objeto |
| OnError | Ocorreu um erro ao carregar um documento ou imagem |
| Onfocus | Os elementos ganham foco |
| onkeydown | Uma tecla de teclado é pressionada |
| OnKeyPress | Uma tecla de teclado é pressionada e liberada |
| onkeyup | Um teclado é liberado |
| ONLOAD | Uma página ou uma imagem é carregada |
| OnMousedown | O botão do mouse é pressionado |
| onmouseMove | Depois que o mouse se move |
| onMouseOut | O mouse é removido de um elemento |
| OnMouseOver | Mova o mouse sobre um elemento |
| onMouseUp | O botão do mouse é liberado |
| OnReset | O botão de redefinição é clicado |
| ONRESize | A janela ou quadro é redimensionado |
| ONSELHECT | Texto selecionado |
| OnSubmit | O botão de confirmação é clicado |
| OnUnload | Página de saída do usuário |
Nota: Uma tag pode vincular vários eventos, esta tag está em operação atualmente e o evento encapsula o conteúdo do evento atual.
Vamos ter alguns casos, caso contrário, sinto que não o vi depois de ler
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> <style> ul {estilo list: nenhum; preenchimento: 0; margem: 0; } ul li {float: esquerda; Background-Color: #038CAE; Cor: Branco; preenchimento: 15px 20px; } .clearfix: após {display: block; contente: '.'; altura: 0; Visibilidade: escondida; claro: ambos; } .Hide {display: Nenhum; } .tab-menu {borda: 1px sólido #dddddd; } .tab-menu .title {background-color: #dddddd; } .tab-menu .title .Active {Background-Color: White; Cor: preto; Top de borda: 2px vermelho sólido; } .tab-menu .Content {Border: 1px Solid #dddddd; Min-altura: 150px; } </style> </ad Head> <body> <div> <div> <div> <ul> <li target = "h1" onclick = "show (this);"> tendências de preços </li> <li target = "h2" onclick = "Show (this);" "> distribuição do mercado <li> <li =" h3 "> onClick =" "Content"> <div ths.className = 'ativo'; var irmão = ths.parentElement.Children; para (var i = 0; i <irmão.length; i ++) {if (ths == irmão [i]) {} else {irmão [i] .Removeattribute ("class"); }} var content = document.getElementById ("Content"). Children; for (var j = 0; j <content.length; j ++) {var current_content = content [j]; var con = current_content.getAttribute ("con"); if (con == Target) {current_content.classList.remove ("hide"); } else {current_content.classname = "hide"; }}}} </script> </body> </html> CASE DE MENU TAG <! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <body> <input type = "botão" onclick = "func ();" value = "Clique em mim"/> <div id = "i1"> <div> 123 </div> <div Func () {// i1 // i1 Todas as crianças, loop cada criança, juiz se Alex = 'sb' var i1 = document.getElementById ('i1'); var divs = i1.Children; for (var i = 0; i <divs.length; i ++) {var current_div = divs [i]; var resultado = current_div.getAttribute ('Alex'); // console.log (resultado); if (resultado == "sb") {current_div.innertext = "456"; }}} </script> </body> </html> Alterar valores do elemento através de atributos personalizadosO artigo acima tem um profundo entendimento dos objetos JavaScript DOM. Este artigo é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.