O DOM fornece métodos para acessar e manipular os elementos HTML, atributos, estilos CSS e conteúdo de uma página web por meio de uma linguagem de programação.

Ao desenvolver para a web, é importante entender o papel do HTML, CSS e JavaScript. Eles são a base da programação web e são usados para criar e estilizar elementos de página, bem como para adicionar interatividade e comportamento dinâmico.

Portanto, ter conhecimento desses elementos é essencial para avançar na área de desenvolvimento web.

1. Selecionar elementos HTML usando o objeto document.getElementById()

1.1. O método getElementById() retorna um elemento DOM cujo valor do seletor "id" foi especificado.

1.1.1. Não deve existir dois ou mais elementos em uma página com o mesmo valor de um seletor "id". Mas, caso exista, o método getElementById () retorna o primeiro elemento do código-fonte.

1.1.2. Este método é um dos métodos mais comuns no HTML DOM, e é usado quase que toda vez que você deseja manipular, ou obter informações a partir de um elemento HTML.

1.2. Sintaxe:

document.getElementById(elementID)

1.2.1. Onde:

elementId = O valor do seletor id especificado para um elemento DOM.

1.3. Exemplos de utilização:

1.3.1. Acessa e retorna o elemento DOM cujo o valor do seletor "id" foi especificado.

let elemento = document.getElementById("idElemento")

1.3.1.1. Caso o seletor "id" especificado não exista, o retorno do método será null.

1.3.2. Retorna o conteúdo HTML do elemento DOM selecionado pelo seletor "id".

let conteudo = document.getElementById("idElemento").innerHTML

1.3.2.1. A propriedade innerHTML define ou retorna o conteúdo HTML de um elemento DOM selecionado.

1.4. Exemplo prático:

1.4.1. Como exemplo, vamos acessar e retornar o conteúdo HTML do elemento DOM, cujo valor do seletor id = "demo":

HTML

<p id="demo">Sou o conteúdo do elemento DOM selecionado</p>

JavaScript

const content = document.getElementById("demo").innerHTML

  Veja o resultado do exemplo no Squids Editor: Abrir Squids Editor (291).

1.4.3. Explicando o código JavaScript:

a. Quando acessamos o elemento DOM pelo método getElementById(), retornamos o valor o elemento DOM especificado.

const element = document.getElementById("demo")

b. No exemplo acima a variável element receberá o elemento DOM especificado pelo seletor id = "demo".

b.1. Portanto, element = [object HTMLParagraphElement]

c. Quando usamos a propriedade innerHTML retornamos o valor do conteúdo HTML do elemento DOM especificado:

const content = document.getElementById("demo").innerHTML

d. O valor retornado para a variável content = "Sou o conteúdo do elemento DOM selecionado".

2. Selecionar elementos HTML usando o objeto document.getElementsByClassName()

2.1. O método getElementsByClassName() retorna uma lista de elementos DOM que possuem o mesmo valor especificado para o seletor "class".

2.1.1. Essa lista de elementos DOM também é chamada de HTML Collection.

2.1.2. A lista de objetos do HTML Collection retornada se apresensta na forma de um array somente para leitura, pois não pode ser alterado. Portanto, é possível selecionar o elemento do array que se deseje manipular, utilizando apenas o seu índice numérico. Lembrando que o índice numérico de um array inicia em zero.

2.1.3. Os elementos da lista de objetos do HTM Collection são classificados pela ordem em que aparecem no documento HTML.

2.2. Sintaxe:

document.getElementsByClassName(elementClass)

2.2.1. Onde:

elementClass = O valor do seletor "class" especificado para cada elemento DOM.

2.3. Exemplos de utilização:

2.3.1. Seleciona e retorna todos elementos DOM selecionados pelo seletor "class" (HTML Collection - lista na forma de um array somente para leitura).

let elementos = document.getElementsByClassName("elementClass")

2.3.2. Acessa e retorna o primeiro elemento DOM de uma lista de elementos (Class Collection), cujo o valor do seletor "class" foi especificado.

let elemento = document.getElementsByClassName("elementClass")[0]

2.3.3. Retorna o número de elementos DOM de uma lista de elementos (HTML Collection), cujo o valor do seletor "class" foi especificado.

let numb = document.getElementsByClassName("elementClass").length

2.3.3.1. A propriedade length retorna o número de elementos da lista selecionada (HTML Collection).

2.3.4. Retorna o conteúdo HTML do primeiro elemento DOM de uma lista selecionada, cujo o valor do seletor "class" foi especificado.

let conteudo = document.getElementsByClassName("elementClass")[0].innerHTML

2.3.4.1. Observe que o índice do primeiro elemento da lista (HTML Collection) começa em zero.

2.3.4.1.1. Portanto, i = n - 1, onde:  i = índice e n = elemento que se quer selecionar: Ex.: O índice do segundo elemento será igual a 1, pois i = 2 - 1.

2.3.4.2. A propriedade innerHTML define ou retorna o conteúdo HTML de um elemento DOM selecionado.

2.4. Exemplo prático:

2.4.1. Como exemplo, vamos acessar e retornar o conteúdo HTML do primeiro elemento DOM de uma lista de elementos, cujo o valor do seletor class = "demo". Vamos retornar também o número de elementos (HTML Collection) selecionados mediante seletor "class", usando a propriedade length.

HTML

<ul>
    <li class="demo">Termo 1</li>
    <li class="demo">Termo 2</li>
    <li class="demo">Termo 3</li>
    <li class="demo">Termo 3</li>
    <li class="demo">Termo 4</li>
</ul>

JavaScript

// seleciona e retorna os elementos DOM selecionados (HTML Colection)
const elements = document.getElementsByClassName("demo"); 
    
// calcula o número de elemntos DOM selecionados
const number = elements.length
    
// retorna o conteúdo HTML do elemento selecionado (primeiro elemento)
const content = elements[0].innerHTML

  Veja o resultado do exemplo no Squids Editor: Abrir Squids Editor (292).

2.4.3. Explicando o código JavaScript:

a. Quando acessamos os elementos DOM pelo método getElementsByClassName, retornamos uma lista de elementos DOM identificados pelo seletor "class" (classe).

const elements = document.getElementsByClassName("demo")

b. Usamos a propriedade lenght para retornar o número de elementos da lista elements determinada acima:

const number = elements.length

c. Retornamos o conteúdo do primeiro elemento da lista de elementos identificados pelo seletor "class".

c1. Observe que utilizamos o índice "0" do HTM Collection para retornar o primeiro elemento da lista. Da mesma forma, o índice "1" retorna o segundo elemento da lista, e assim sucessivamente.

const content = elements[0].innerHTML

d. Usamos a função alert() para exibir os valores retornados e atribuídos na variável results na forma de string.

d1. Observe que utilizamos Template String concatenar a string com as variáveis number e content (leia: Manipulando strings com Templates Strings, o pulo do gato do JavaScript moderno).

const results = `  
    Nº de elementos DOM com a classe demo: ${number}
    
    Conteúdo HTML do elemento DOM selecionado: ${content}    
    `            
alert(results)

e. Veja abaixo a imagem com os resultados:

3. Selecionar elementos HTML usando o objeto document.getElementsByTagName()

3.1. O método getElementsByTagName() retorna uma lista de elementos DOM que possuem o mesmo valor especificado para o nome do elemento HTML (tag name).

3.1.1. Essa lista de elementos DOM também é chamada de HTML Collection.

3.1.2. A lista de objetos do HTML Collection retornada se apresenta na forma de um array somente para leitura, pois não pode ser alterado. Portanto, é possível selecionar o elemento do array que se deseje manipular, utilizando apenas o seu índice numérico. Lembrando que o índice numérico de um array inicia em zero.

3.1.3. Os elementos da lista de objetos do HTM Collection são classificados pela ordem em que aparecem no documento HTML.

3.2. Sintaxe:

document.getElementsByTagName(tagName)

3.2.1. Onde:

tagName = O nome do elemento DOM.

3.3. Exemplos de utilização:

3.3.1. Seleciona e retorna todos elementos DOM selecionados pelo nome do elemento (HTML Collection).

let elementos = document.getElementsByTagName("tagName")

3.3.2. Acessa e retorna o primeiro elemento DOM de uma lista de elementos (Class Collection), cujo o nome do elemento foi especificado.

let elemento = document.getElementsByTagName("tagName")[0]

3.3.3. Retorna o número de elementos DOM de uma lista de elementos (HTML Collection), cujo o nome do elemento foi especificado.

let numb = document.getElementsByTagName("tagName").length

3.3.3.1. A propriedade length retorna o número de elementos da lista selecionada (HTML Collection).

3.3.4. Retorna o conteúdo HTML do primeiro elemento DOM de uma lista selecionada, cujo o elemento HTML foi especificado.

let conteudo = document.getElementsByTagName("tagName")[0].innerHTML

3.3.4.1. Observe que o índice do primeiro elemento da lista (HTML Collection) começa em zero.

3.3.4.1.1. Portanto, i = n - 1, onde:  i = índice e n = elemento que se quer selecionar: Ex.: O índice do segundo elemento será igual a 1, pois i = 2 - 1.

3.3.4.2. A propriedade innerHTML define ou retorna o conteúdo HTML de um elemento DOM selecionado.

3.4. Exemplo prático:

3.4.1. Como exemplo, vamos acessar e retornar o conteúdo HTML do primeiro elemento DOM de uma lista de elementos, cujo o nome do elemento tagName = "li". Vamos retornar também o número de elementos (HTML Collection) selecionados mediante seletor "class", usando a propriedade length.

HTML

<ul>
    <li>Termo 1</li>
    <li>Termo 2</li>
    <li>Termo 3</li>
    <li>Termo 3</li>
    <li>Termo 4</li>
</ul>

JavaScript

// seleciona e retorna os elementos DOM selecionados (HTML Colection)
const elements = document.getElementsByTagName("li"); 
    
// calcula o número de elemntos DOM selecionados
const number = elements.length
    
// retorna o conteúdo HTML do elemento selecionado (primeiro elemento)
const content = elements[0].innerHTML

  Veja o resultado do exemplo no Squids Editor: Abrir Squids Editor (293).

3.4.3. Explicando o código JavaScript:

a. Quando acessamos os elementos DOM pelo método getElementsByTagName, retornamos uma lista de elementos DOM identificados pelo nome do elemento  tag name = "li".

const elements = document.getElementsByTagName("li")

b. Usamos a propriedade lenght para retornar o número de elementos da lista elements determinada acima:

const number = elements.length

c. Retornamos o conteúdo do primeiro elemento da lista de elementos identificados pelo tag name "li".

c1. Observe que utilizamos o índice "0" do HTM Collection para retornar o primeiro elemento da lista. Da mesma forma, o índice "1" retorna o segundo elemento da lista, e assim sucessivamente.

const content = elements[0].innerHTML

d. Usamos a função alert() para exibir os valores retornados e atribuídos na variável results na forma de string.

d1. Observe que utilizamos Template String concatenar a string com as variáveis number e content (leia: Manipulando strings com Templates Strings, o pulo do gato do JavaScript moderno).

const results = `  
    Nº de elementos DOM com a classe demo: ${number}
    
    Conteúdo HTML do elemento DOM selecionado: ${content}    
    `            
alert(results)

e. Veja abaixo a imagem com os resultados:

4. Selecionar elementos HTML usando o objeto document.querySelector()

4.1. O método querySelector() retorna o primeiro elemento DOM correspondente à um seletor CSS que pode ser: id, classe, atributo, valor do atributo, estilo CSS, tag name, conteúdo de texto, etc.

1.1.1. Para múltiplos seletores CSS, utilize vírgula para separá-los.

1.1.2. Caso não encontre nenhum seletor CSS especificado, o retorno do método será null.

1.1.3. Este método é o mais versátil para manipular ou obter informações a partir de um elemento DOM, pois pode ser utilizado em qualquer elemento: id, classe, tag name, estilo CSS, atributo ou conteúdo de texto.

4.2. Sintaxe:

document.querySelector(seletorCSS)

4.2.1. Onde:

seletorCSS = Qualquer elemento seletor.

4.3. Exemplos de utilização:

4.3.1. Acessa e retorna o elemento DOM cujo seletor "id" foi especificado. (Seletor id)

let elemento = document.querySelector("#id")

4.3.1.1. Utilize hashtag (#) antes do nome do seletor "id".

4.3.2. Acessa e retorna o primeiro elemento DOM cujo seletor "classe" foi especificado. (Seletor classe)

let elemento = document.querySelector(".classe")

4.3.2.1. Utilize ponto (.) antes do nome do seletor "classe".

4.3.3. Acessa e retorna o primeiro elemento DOM cujo o seletor tag name foi especificado. (Seletor tag name HTML)

let elemento = document.querySelector("tagName")

4.3.3.1. Exemplos: tagName = "p" (parágrafo)

                            tagName = "p.demo" (parágrafo que contem a classe demo).                          

4.3.4. Acessa e retorna o primeiro elemento DOM cujo seletor atributo de um elemento HTML foi especificado. (Seletor atributo)

let elemento = document.querySelector("[atributoName]")

4.3.4.1. Utilize chaves ([]) antes e depois do nome do atributo.

4.3.3.1. Exemplos: seletor = "[target]" (atributos denominados target)

                            seletor = "a[tartet]" (atributos target específicos para a tagname a).

                            seletor = "a.demo[target]" (atributos targets específicos para a tagname a que foi definida pela classe demo).

4.3.5. Retorna o conteúdo HTML do elemento DOM selecionado pelo método querySelector().

let conteudo = document.querySelector("seletor").innerHTML

4.3.5.1. A propriedade innerHTML define ou retorna o conteúdo HTML de um elemento DOM selecionado.

4.4. Exemplo prático:

4.4.1. Como exemplo, vamos acessar e retornar o conteúdo HTML do elemento DOM, cujo valor do seletor id = "demo", usando o método querySelector():

HTML

<p id="demo">Sou o conteúdo do elemento DOM selecionado</p>

JavaScript

const content = document.querySelector("#demo").innerHTML

  Veja o resultado do exemplo no Squids Editor: Abrir Squids Editor (294).

4.4.2. Explicando o código JavaScript:

a. Selecionamos o elemento DOM pelo método querySelector(), cujo valor do seletor id = "demo".

b. Observe que para especificar um determinado seletor id pelo método querySelector(), precisamos acrescentar o hashtag (#) antes do nome do seletor.

c. Usando a propriedade innerHTML retornamos o valor do conteúdo HTML do elemento DOM especificado.

d. O valor retornado para a variável content = "Sou o conteúdo do elemento DOM selecionado".

5. Selecionar elementos HTML usando o objeto document.querySelectorAll()

 5.1. O método querySelectorAll() retorna uma lista de elementos DOM que correspondente à um ou mais seletores CSS.

5.1.1. Seletores CSS selecionam elementos HTML com base em id, classes, tipos, atributos, valores de atributos, estilos CSS, tag name, conteúdo de texto, etc.

5.1.2. Essa lista de elementos DOM também é chamada de HTML Collection.

5.1.3. A lista de objetos do HTML Collection retornada se apresenta como um array somente para leitura, pois não pode ser alterado. Portanto, é possível selecionar o elemento do array que se deseje manipular, utilizando apenas o seu índice numérico. Lembrando que o índice numérico de um array inicia em zero.

5.1.4. Os elementos da lista de objetos do HTM Collection são classificados pela ordem em que aparecem no documento HTML.

5.1.5. Para múltiplos seletores, separe cada seletor com uma vírgula.

5.2. Sintaxe:

5.2.1. Seleciona e retorna todos elementos DOM selecionados pelo seletor CSSS (HTML Collection).

document.querySelectorAll(seletorCSS)

5.2.1. Onde:

seletorCSS = Qualquer elemento seletor.

5.3. Exemplos de utilização:

5.3.2. Acessa e retorna o primeiro elemento DOM cujo seletor "classe" foi especificado. (Seletor classe)

let elemento = document.querySelectorAll(".classe")[0]

5.3.2.1. Utilize ponto (.) antes do nome do seletor "classe".

5.3.3. Acessa e retorna o primeiro elemento DOM cujo o seletor tag name foi especificado. (Seletor tag name HTML)

let elemento = document.querySelectorAll("tagName")[0]

5.3.3.1. Exemplos: tagName = "p" (parágrafo)

                            tagName = "p.demo" (parágrafo que contem a classe demo).                          

5.3.4. Acessa e retorna o primeiro elemento DOM cujo seletor atributo de um elemento HTML foi especificado. (Seletor atributo)

let elemento = document.querySelectorAll("[atributoName]")[0]

5.3.4.1. Utilize chaves ([]) antes e depois do nome do atributo.

5.3.3.1. Exemplos: seletor = "[target]" (atributos denominados target)

                            seletor = "a[tartet]" (atributos target específicos para a tagname a).

                            seletor = "a.demo[target]" (atributos targets específicos para a tagname a que foi definida pela classe demo).

5.3.5. Retorna o número de elementos DOM de uma lista de elementos (HTML Collection), cujo o nome do seletor foi especificado.

let numb = document.querySelectorAll("seletor").length

5.3.5.1. A propriedade length retorna o número de elementos da lista selecionada (HTML Collection).

5.3.6. Retorna o conteúdo HTML do primeiro elemento DOM selecionado pelo método querySelectorAll().

let conteudo = document.querySelectorAll("seletor")[0].innerHTML

5.3.6.1. A propriedade innerHTML define ou retorna o conteúdo HTML de um elemento DOM selecionado.

5.4. Exemplo prático:

5.4.1. Como exemplo, vamos acessar e retornar o conteúdo HTML do primeiro elemento DOM de uma lista de elementos, cujo o valor do seletor class = "demo". Vamos retornar também o número de elementos (HTML Collection) selecionados mediante seletor "class", usando a propriedade length.

HTML

<ul>
    <li class="demo">Termo 1</li>
    <li class="demo">Termo 2</li>
    <li class="demo">Termo 3</li>
    <li class="demo">Termo 3</li>
    <li class="demo">Termo 4</li>
</ul>

JavaScript

// seleciona e retorna os elementos DOM selecionados (HTML Colection)
const elements = document.getElementsByClassName("demo"); 
    
// calcula o número de elemntos DOM selecionados
const number = elements.length
    
// retorna o conteúdo HTML do elemento selecionado (primeiro elemento)
const content = elements[0].innerHTML

  Veja o resultado do exemplo no Squids Editor: Abrir Squids Editor (295).

5.4.2. Explicando o código JavaScript:

a. Quando acessamos os elementos DOM pelo método getElementsByClassName, retornamos uma lista de elementos DOM identificados pelo seletor "class" (classe).

const elements = document.getElementsByClassName("demo")

b. Usamos a propriedade lenght para retornar o número de elementos da lista elements determinada acima:

const number = elements.length

c. Retornamos o conteúdo do primeiro elemento da lista de elementos identificados pelo seletor "class".

c1. Observe que utilizamos o índice "0" do HTM Collection para retornar o primeiro elemento da lista. Da mesma forma, o índice "1" retorna o segundo elemento da lista, e assim sucessivamente.

const content = elements[0].innerHTML

d. Usamos a função alert() para exibir os valores retornados e atribuídos na variável results na forma de string.

d1. Observe que utilizamos Template String concatenar a string com as variáveis number e content (leia: Manipulando strings com Templates Strings, o pulo do gato do JavaScript moderno).

const results = `  
    Nº de elementos DOM com a classe demo: ${number}
    
    Conteúdo HTML do elemento DOM selecionado: ${content}    
    `            
alert(results)

e. Veja abaixo a imagem com os resultados:

 6. Acessando elementos filhos, usando a propriedade children

 6.1. A propriedade children retorna uma lista de elementos DOM que que contém todos os elementos filhos (child) do elemento HTML no qual foi identificado.

6.1.1. Essa lista de elementos DOM também pode ser chamada de HTML Collection.

6.1.2. A lista de objetos do HTML Collection se apresenta como um array somente para leitura de elementos filhos (child). Podemos selecionar o elemento que se deseja manipular utilizando o seu índice numérico. Lembramos que o índice numérico de um array inicia sempre em zero. Obs.: Uma HTMLCollection é sempre atualizada quando o documento HTML for modificado.

6.1.3. Os elementos da lista de objetos do HTM Collection são classificados pela ordem em que aparecem no documento HTML.

6.1.4. Para saber mais como usar a propriedade children, leia o artigo: Usando a propriedade children no JavaScript - Manipulação de elementos HTML

 6.2. Exemplos de utilização:

6.2.1. Seleciona e retorna a lista de todos elementos filhos a partir de um elemento pai

let elementoFilho = document.getElementById("elementoPai").children

 6.2.1.1. Observe que para obtermos os elementos filhos precisamos primeiro selecionar o elemento pai. Para isso, podemos utilizar qualquer método que mostramos neste artigo, sendo os mais indicados:

- document.getElementById("elementoPai")

- document.querySelector("#elementoPai")

6.2.2. Retorna o número de elementos DOM de uma lista de elementos (HTML Collection) de elementos filhos a partir de um elemento pai

let numb = document.getElementById("elementoPai").children.length

6.2.2.1. A propriedade length retorna o número de elementos da lista selecionada (HTML Collection).

6.2.3. Retorna o conteúdo HTML do primeiro elemento DOM acessado pelo elemento filho a partir de um elemento pai

let conteudo = document.getElementById("elementoPai").children[0].innerHTML

6.2.3.1. A propriedade innerHTML define ou retorna o conteúdo HTML de um elemento DOM selecionado.

6.3. Exemplo prático:

6.3.1. Como exemplo, vamos acessar e retornar o conteúdo HTML do primeiro elemento DOM de uma lista de elementos de uma lista de elementos filhos da tag <ul> definida pela id = "elementoPai". Vamos retornar também o número de elementos (HTML Collection) selecionados, usando a propriedade length.

HTML

<ul id="elementoPai">
    <li class="demo">Termo 1</li>
    <li class="demo">Termo 2</li>
    <li class="demo">Termo 3</li>
    <li class="demo">Termo 3</li>
    <li class="demo">Termo 4</li>
</ul>

JavaScript

// seleciona e retorna os elementos DOM filhos a partir do elemento pai (HTML Colection)
const elements = document.querySelector("#elementoPai").children; 
    
// calcula o número de elemntos DOM selecionados
const number = elements.length
    
// retorna o conteúdo HTML do elemento selecionado (primeiro elemento)
const content = elements[0].innerHTML

  Veja o resultado do exemplo no Squids Editor: Abrir Squids Editor (296).

6.3.2. Explicando o código JavaScript:

a. Quando acessamos os elementos DOM pela propriedade children, retornamos uma lista de elementos DOM filhos a partir de um elemento pai, que no exemplo é a tag <ul> identificada pelo id = "elementoPai".

a.1. Para selecionarmos o elemento DOM pai, utilizamos o método querySelector("#elementoPai").

const elements = document.querySelector("#elementoPai").children; 

b. Usamos a propriedade lenght para retornar o número de elementos da lista elements determinada acima:

const number = elements.length

c. Retornamos o conteúdo do primeiro elemento da lista de elementos identificados pelo seletor "class".

c1. Observe que utilizamos o índice "0" do HTM Collection para retornar o primeiro elemento da lista. Da mesma forma, o índice "1" retorna o segundo elemento da lista, e assim sucessivamente.

const content = elements[0].innerHTML

d. Usamos a função alert() para exibir os valores retornados e atribuídos na variável results na forma de string.

d1. Observe que utilizamos Template String concatenar a string com as variáveis number e content (leia: Manipulando strings com Templates Strings, o pulo do gato do JavaScript moderno).

const results = `  
    Nº de elementos DOM com a classe demo: ${number}
    
    Conteúdo HTML do elemento DOM selecionado: ${content}    
    `            
alert(results)

e. Veja abaixo a imagem com os resultados:

Dica para aprender mais

 DICA: Aprenda a ser um programador mais do que completo (Pacote Full Stack)

REFERÊNCIA JAVASCRIPT

1. [getElementById()] >> Sintaxe e exemplos - MDN Web Docs.

2. [getElementsByClassName()] >> Sintaxe e exemplos - MDN Web Docs.

3. [getElementsByTagName()] >> Sintaxe e exemplos - MDN Web Docs.

4. [querySelector()] >> Sintaxe e exemplos - MDN Web Docs.

5. [querySelectorAll()] >> Sintaxe e exemplos - MDN Web Docs.

6. [element.children] » Sobre a propriedade children - MDN Web Docs.

7. [element.innerHTML] » Sobre a propriedade innerHTML - MDN Web Docs.

8. [string.length] >> Sintaxe e exemplos - MDN Web Docs.

9. [HTMLCollection] » Sobre a interface HTMLCollection - MDN Web Docs.

10. [HTMLCollection.length] » Sobre a propriedade HTMLCollection.lenght - MDN Web Docs.

11. [element.tagName] » Sobre a propriedade tagName - MDN Web Docs.

O anúncio abaixo ajuda manter o Portal Visual Dicas

 COMENTÁRIOS