No início do artigo quero mencionar em termos gerais o que é DOM e o que é BOM , pois este artigo é voltado principalmente para amigos que possuem uma certa base em JavaScript, mas não entendem ou nem sabem sobre DOM e BOM. .
Porém, antes de falarmos sobre o que é DOM e o que é BOM , permita-me mostrar toda a estrutura do Javascript :
Na imagem acima, podemos ver que existem quatro elementos: JavaScript, ECMAScript, DOM e BOM . Então, qual é a conexão entre os quatro? Use uma equação para resumir a relação entre eles:
JavaScript = ECMAscript + BOM + DOM
Vamos dar uma visão geral deles um por um :
ECMAscript:
ECMAScript é uma linguagem transmitida pela ECMA International (anteriormente European Computer Manufacturers Association) através do ECMA-262 é uma linguagem de programação de script padronizada . É o padrão para JavaScript (abreviadamente JS), e os navegadores implementam esse padrão .
ECMAscript é mais como um regulamento que estipula como cada navegador executa a sintaxe do JavaScript , pois sabemos que JavaScript é uma linguagem de script que roda no navegador! Existem regulamentos, mas ainda falta uma forma de interagir com cada elemento da página . Nessa época nasceu o seguinte DOM!
DOM:
DOM ( Document Object Model ) é uma interface de programação de aplicativo independente de linguagem para operar documentos XML e HTML .
Para JavaScript: Para permitir que o JavaScript opere em HTML , o JavaScript possui sua própria interface de programação DOM .
Em uma frase: o DOM fornece ao JavaScript um "método" para acessar e operar elementos HTML (a razão pela qual não usamos a palavra interface é porque temos medo de que alguns amigos fiquem assustados ao ver a interface, mas na verdade a descrição mais precisa é para JavaScript) a interface é fornecida )
BOM:
BOM é modelo de objeto de navegador, modelo de objeto de navegador . BOM é uma interface que parece controlar o comportamento do navegador .
Para JavaScript: Para permitir que o JavaScript controle o comportamento do navegador , o JavaScript possui sua própria interface BOM .
Em uma frase: BOM fornece ao JavaScript um “método” para controlar o comportamento do navegador.
Finalmente, entre os três componentes acima do JavaScript, ECMscript é uma especificação , enquanto os dois restantes fornecem "métodos", correspondentes a elementos HTML e navegadores respectivamente , então a seguir nos concentramos nos dois últimos: DOM e BOM, damos uma explicação sistemática . Como é para iniciantes, minhas explicações a seguir serão tão simples e fáceis de entender quanto possível. Se você não tiver uma boa base, poderá comê-lo com confiança !
Primeiro, vamos explicar o conhecimento relacionado ao DOM . Dividi-o em duas partes :
Ok, então o que é uma árvore DOM?
Alguns iniciantes que aprenderam DOM podem não estar familiarizados com essa palavra, mas na verdade, a árvore DOM não é algo particularmente fantasioso. Pelo contrário, para a equipe de front-end, a árvore DOM é o HTML das páginas que você processa. todos os dias. A árvore composta por elementos:
Na árvore BOM , cada nó pode ter duas identidades: pode ser um nó filho do nó pai ou pode ser o nó pai de outros nós filhos. Vamos observar o seguinte código juntos :
<!DOCTYPE html>.
<html lang="pt">
<cabeça>
<meta charset="UTF-8">
<title>DOM_demo</title>
</head>
<corpo>
<p>
<a href="https://blog.csdn.net/qq_52736131">Lagostins dançando tango</a>
</p>
</body>
</html> Para o código acima, sua árvore DOM deveria ser assim:
Neste momento, alguém quer perguntar: você acha que a árvore DOM por tanto tempo tem algo a ver com a operação de elementos HTML ?
A resposta é muito relevante, e somente compreendendo a estrutura da árvore DOM do documento poderemos operar os elementos DOM com precisão e eficácia , caso contrário, vários bugs inesperados aparecerão. Antes de operarmos os elementos HTML de uma página, devemos ter um desenho claro do DOM de toda a página . Mesmo que não estejamos realmente desenhando, devemos ter uma estrutura de contexto clara em mente.
Em relação a alguns métodos comuns de operação de elementos html no DOM em JavaScript , eu os dividi em várias subpartes para apresentá-los a você:
// 1. Pass Get o valor do atributo id do elemento e retornar um elemento object var element = document.getElementById(id_content) //2. Obtenha o elemento por meio de seu valor de atributo name e retorne uma matriz de objetos de elemento var element_list = document.getElementsByName(name_content) //3. Obtenha o elemento por meio do valor do atributo de classe do elemento e retorne uma matriz de objetos de elemento var element_list = document.getElementsByClassName(class_content) //4. Obtenha o elemento por meio do nome da tag e retorne uma matriz de objetos de elemento var element_list = document.getElementsByTagName(tagName)
//1. Obter o valor do atributo do elemento Os parâmetros passados são naturalmente os nomes dos atributos, como classe, id, href. var attr = element.getAttribute(nome_atributo) //2. Defina o valor do atributo do elemento. Os parâmetros passados são naturalmente o nome do atributo do elemento e o valor do atributo correspondente a ser definido element.setAttribute(attribute_name,attribute_value)
//1. Crie um elemento html, e o parâmetro passado é o tipo de elemento, como p, h1-5, a, tomando p como exemplo abaixo var element = document.createElement( "p") //2. Crie um nó de texto e passe o conteúdo de texto correspondente (observe que é um nó de texto, não um elemento html) var text_node = document.createTextNode(texto) //3. Crie um nó de atributo e o parâmetro passado será o nome do atributo correspondente var attr_node = document.createAttribute(attribute_name) element.setAttributeNode(attr_node)
Preste atenção especial ao terceiro. Este método de criação de um nó de atributo deve ser combinado com um elemento específico , ou seja, você deve primeiro obter um elemento de elemento específico, criar um nó de atributo e, finalmente, adicioná-lo. nó de atributo para este elemento ( setAttributeNode) .
//1. Adicione um nó ao final do elemento. O parâmetro passado é o tipo de nó element.appendChild(Node) //2. Insira um nó na frente de um nó existente dentro do elemento e ainda passe um parâmetro de tipo de nó element.insertBefore(new_Node, existente_Node).
Observe que antes de adicionar um node , você deve primeiro criar o nó, e no final. ao mesmo tempo, selecione o elemento do nó pai . No segundo método, você ainda precisa encontrar os nós irmãos atrás da posição de inserção .
do
elemento. O parâmetro passado é o parâmetro do tipo de nó element.removeChild (Node).
Finalmente, alguns atributos DOM comuns :
//1. Obtenha o nó pai do elemento atual var element_father = element.parentNode. //2. Obtenha o nó filho do tipo de elemento html do elemento atual var element_son = element.children //3. Obtenha todos os tipos de nós filhos do elemento atual, incluindo elementos html, texto e atributos var element_son = element.childNodes //4. Obtenha o primeiro nó filho do elemento atual var element_first = element.firstChild //5. Obtenha o elemento irmão anterior do elemento atual var element_pre = element.previousSibling //6. Obtenha o próximo elemento irmão do elemento atual var element_next = element.nextSibling //7. Obtenha todo o texto do elemento atual, incluindo código-fonte HTML e texto var element_innerHTML = element.innerHTML. //8. Obtenha todo o texto do elemento atual, excluindo o código-fonte html var element_innerTEXT = element.innerText
Entre eles, o sétimo significa converter o código html e o texto do elemento em text , e o código html original. é executado, convertê-lo em texto equivale a transformá-lo em uma string comum!
A seguir, falaremos sobre o BOM novamente. Devido ao espaço limitado, o BOM não será explicado em detalhes (a praticidade não é tão grande quanto o DOM). Vamos revisar a introdução sobre o BOM no início:
o BOM fornece vários "métodos" para JavaScript operar o navegador.
Primeiro, vamos usar uma imagem para classificar a estrutura de todo o BOM. Semelhante ao DOM, o BOM também possui uma estrutura em árvore:
Na imagem acima, podemos ver:
janela é o topo de toda a cadeia alimentar da árvore BOM , portanto, cada janela recém-aberta é considerada um objeto janela.
O objeto de janela possui as seguintes propriedades e métodos comuns :
| Propriedade/Método | Significado |
| opener | A janela pai do |
| comprimento | atual da janelaO número de quadros no |
| documento | da janelaO objeto de documento atualmente exibido na janela |
| alert(string) | Cria uma caixa de diálogo de aviso e exibe uma mensagem |
| close() | Fecha a janela |
| confirm() | Cria uma caixa de diálogo que requer confirmação do usuário |
| open(url, name, [options]) | Abra uma nova janela e retorne o novo objeto de janela |
| prompt(text, defaultInput) | Crie uma caixa de diálogo que exige que o usuário insira informações |
| setInterval(expressão, milissegundos) | calcula uma expressão após o intervalo de tempo especificado |
| setInterval(função, milis enconds, [argumentos]) | chama uma função setTimeout(expressão, milissegundos) após o intervalo de tempo especificado |
| setTimeout(expressão, mili segundos | |
| ) | após o temporizador expirar | calcula uma função após o temporizador expirar. |
Entre eles, você pode ver que há uma função alert() acima , porque quando aprendemos JavaScript, a maior parte. usamos a janela pop-up da função alert() como fluxo de entrada e saída. Esta é minha primeira demonstração , então quando você vir isso, você pode perguntar:
Quando usei a função alert(), parecia que a janela não foi mencionada. . Então o alert() aqui é o mesmo alert() que aprendi antes ? A resposta é esta:
esses dois alert() são de fato a mesma função . A razão pela qual window pode ser omitida é porque todas as propriedades e métodos de window podem ser expressos de duas maneiras :
(1) método window.property/window ().
(2) A chamada direta de atributo/método ()
não é apenas alert(), todos os atributos e funções da janela acima são válidos, amigos interessados podem tentar por conta própria.
O que é um objeto de localização ?
O objeto location é um atributo do objeto window que fornece informações sobre o documento carregado na janela atual e também fornece algumas funções de navegação.
O objeto de localização possui os seguintes atributos e métodos comuns:
| Atributo/método | conteúdo | |
| host | nome do host: número da porta | |
| nome do host | nome do host | |
| href | URL inteiro | |
| nome do caminho | nome | |
| do caminho porta | número da porta | |
| protocolo | parte | do protocolo|
| string | de consulta de pesquisa | |
| reload() | recarrega o URL atual | |
| usando | repalce() | A nova URL substitui a página atual. |
Na verdade, se observarmos cuidadosamente o diagrama de estrutura acima, descobriremos que
o objeto location não é apenas um atributo do objeto window, mas também um atributo do objeto document.
Isso significa:
window.location = location = document.location
O que é o objeto histórico ?
O objeto histórico é um atributo do objeto janela. Ele salva o registro de acesso à Internet do usuário. O carimbo de data/hora deste registro é calculado a partir do momento em que a janela foi aberta.
O objeto de histórico tem os seguintes atributos e métodos comuns:
| da descrição | do atributo/método |
| O | número de registros no objeto de histórico |
| back() | vai para a URL anterior da entrada do histórico do navegador, semelhante a retroceder |
| () | vai para a próxima URL da entrada do histórico do navegador, semelhante a avançar |
| (num) | O navegador avança ou retrocede no objeto de histórico |
Finalmente, vamos apresentar o objeto navigator :
O objeto navigator é um atributo de janela na BOM que identifica o navegador do cliente.
Alguns atributos comuns relacionados ao navegador:
| descrição | do atributo |
| appName | nome completo do navegador e informações de versão |
| plataforma | do sistema plataforma onde o navegador está |
| plug | -ins de informações de plug-in instaladas no navegador |
| userAgent | string do agente do usuário do navegador |
| userLanguage | idioma padrão do sistema operacional |