conjunto de áreas do mapa

Objeto Map do DOM HTML

definição e uso

áreas definidas conjunto retorna todos os elemento <area> conjunto.

Comentário:Os elementos da coleção são ordenados pela ordem de aparição no código-fonte.

Dica:para retornar todos os que já foram especificados com o atributo href elemento <area> conjunto, utilize conjunto de links。

Exemplo

Exemplo 1

Verifique quantos elementos <area> há no mapeamento de imagens especificado:

var x = document.getElementById("planetmap").areas.length;

Experimente pessoalmente

O resultado de x é:

3

Mais exemplos TIY estão na parte inferior da página.

Sintaxe

mapObject.areas

Atributo

Valor Descrição
length

Retorna o número de elementos <area> na coleção.

Comentário:Este atributo é apenas de leitura

Método

Método Descrição
[index]

Retorna o elemento <area> na coleção com o índice especificado (começando com 0).

Comentário:Se o número do índice estiver fora do intervalo, retorna null.
item(index)

Retorna o elemento <area> na coleção com o índice especificado (começando com 0).

Comentário:Se o número do índice estiver fora do intervalo, retorna null.
namedItem(id)

Retorna a coleção com o elemento <area> especificado pelo id.

Comentário:Se o id não existir, retorna null.

Detalhes técnicos

Versão DOM: Nível 2 Document Object Model (DOM)
Retorno:

Objeto HTMLCollection, representando todos os elementos <area> no mapeamento de imagens do documento.

Os elementos da coleção são ordenados pela ordem de aparição no código-fonte.

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte

Mais exemplos

Exemplo 2: [index]

Obtém a URL do primeiro elemento <area> no mapeamento de imagens:

var x = document.getElementById("planetmap").areas[0].href;

Experimente pessoalmente

O resultado de x será:

https://www.codew3c.com/jsref/sun.html

Exemplo 3: item(index)

Obtém a URL do primeiro elemento <area> no mapeamento de imagens:

var x = document.getElementById("planetmap").areas.item(0).href;

Experimente pessoalmente

O resultado de x será:

https://www.codew3c.com/jsref/sun.html

Exemplo 4: namedItem(id)

Obtém a URL do elemento <area> com id="myArea" no mapeamento de imagens:

var x = document.getElementById("planetmap").areas.namedItem("myArea").href;

Experimente pessoalmente

O resultado de x será:

https://www.codew3c.com/jsref/mercur.html

Exemplo 5

Varre todos os elementos <area> do mapeamento de imagens e exibe a forma de cada região:

var x = document.getElementById("planetmap");
var txt = "";
var i;
for (i = 0; i < x.areas.length; i++) {
  txt = txt + x.areas[i].shape + "<br>";
}

Experimente pessoalmente

O resultado de x será:

rect
circle
circle

Objeto Map do DOM HTML