Segmentação contextual de elementos DOM
Às vezes, há casos em que você precisa percorrer o DOM e obter acesso a um elemento específico ou grupo de elementos, mas devido a certas restrições, você pode não ter acesso direto aos elementos por meio de um nome de classe CSS ou ID no código HTML . Isso pode ser devido ao conteúdo gerado pelo usuário produzido por meio de um editor de rich text ou conteúdo dinâmico extraído de um banco de dados. Seja qual for o caso, não é impossível acessar esses elementos DOM não identificados via JavaScript.
Usando o que chamo de “segmentação contextual”, você pode acessar e modificar praticamente qualquer elemento no DOM. Contanto que você tenha um mapa do modelo geral que contenha o elemento que deseja segmentar, poderá acessar esse elemento e manipulá-lo da mesma maneira que faria com um elemento que tenha um nome de classe ou ID.
Em seguida, passamos por eles e fazemos o que queremos com eles. Assim, eles são acessíveis mesmo que não estejam agrupados por meio de nomes de classes. Você pode fazer a mesma coisa usando as propriedades do nó.
Código semelhante pode ser usado para direcionar a tag âncora solitária dentro da seção “conteúdo”. Também podemos limitar nossa pesquisa de tags âncora para incluir apenas tags que tenham o href atributo definido, para evitar encontrar links na página.
Por fim, você notará que há uma <span>tag com um estilo embutido. O estilo inline pode ter sido gerado por meio de um sistema de gerenciamento de conteúdo, portanto, talvez você não tenha a capacidade de editá-lo diretamente.
As possibilidades são infinitas com a segmentação contextual, e há ainda mais opções disponíveis se você estiver usando uma biblioteca JavaScript que normaliza as diferenças do navegador e simplifica a manipulação do DOM.
Usando namespaces para evitar conflitos
Se você estiver fazendo uma grande quantidade de codificação JavaScript bruta e suspeitar que adições podem ser feitas nas mesmas páginas em que está trabalhando, você pode evitar conflitos futuros com seu código dando ao código seu próprio namespace. O JavaScript orientado a objetos implementa princípios semelhantes a namespaces devido ao fato de que propriedades e métodos são declarados dentro de objetos, portanto, há menos probabilidade de haver conflitos. Um conflito pode surgir, no entanto, por meio de nomes de objetos.
E muito provavelmente, o conflito ocorrerá “silenciosamente”, portanto, você pode não ser alertado sobre o problema imediatamente. Você pode evitar todos os conflitos criando um namespace exclusivo.
As primeiras linhas criam o namespace verificando se o MYobjeto “ ” já existe.
Este objeto pode ser o que você quiser. Basta escolher um nome que você acha que nunca mais será usado. Depois que o MYobjeto é criado, podemos criar o CUSTOMobjeto “ ” como uma propriedade do MYobjeto.
Então nossa namespacefunção se torna um método do MY.CUSTOMobjeto. Lembre-se de que “ MY“, “ CUSTOM” e “ namespace” podem ser seus próprios nomes personalizados. Eu os escolhi para fins de demonstração.
Eles podem ser CHEESEBURGER.ONIONS.picklesse você quiser! A showStatisticsfunção é exatamente a mesma do exemplo anterior que utiliza um literal de objeto para passar os valores. Mas neste caso, toda a função, incluindo o literal do objeto, é encapsulada dentro my.custom.namespacede.
A última linha invoca a função inteira usando a notação de ponto, e a função é executada exatamente da mesma forma que normalmente, exceto que ela é protegida contra conflito com outra função chamada “ showStatistics“.
Alguns destes processos podem ser cruciais para criação de sites.
