Select element

3 snippets across 2 stacks — JavaScript, HTML & CSS

Also written as select elements

JSJavaScript

filter()

syntax

arr.filter(callback(element, index, array))

example

const products = [
  { name: "Shirt", price: 25 },
  { name: "Jacket", price: 120 },
  { name: "Cap", price: 15 },
];
const affordable = products.filter(p => p.price < 50);
console.log(affordable.map(p => p.name));

output

["Shirt", "Cap"]

Note Returns a new array with elements that pass the test. The callback must return a truthy/falsy value.

Selecting Elements

JS · DOM Manipulation

syntax

document.querySelector(selector)
document.querySelectorAll(selector)
document.getElementById(id)

example

const header = document.querySelector("h1");
const buttons = document.querySelectorAll(".btn");
const main = document.getElementById("main-content");

// querySelectorAll returns a static NodeList
buttons.forEach(btn => {
  console.log(btn.textContent);
});

Note querySelector returns the first match or null. querySelectorAll returns a static NodeList (does not auto-update). Use Array.from() if you need full array methods.

HCHTML & CSS

Element, Class & ID Selectors

HC · CSS Selectors

syntax

element { }
.class { }
#id { }

example

p {
  line-height: 1.6;
}

.alert {
  padding: 12px 16px;
  border-radius: 6px;
}

#main-header {
  position: sticky;
  top: 0;
}

Note Prefer classes over IDs for styling since IDs have much higher specificity and cannot be reused. IDs are fine for JavaScript hooks and anchor targets.