JavaScript: DOM, 1–9

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24// The page, built without a parser because the stand-in's innerHTML does not
// parse markup. This is the same tree the demo above starts from.
const p = el('p', { id: 'text' }, 'JavaScript Exercises - w3resource');
const button = el('button', { id: 'jsstyle' }, 'Style');
document.body.appendChild(p);
document.body.appendChild(el('div', {}, button));

function js_style() {
  const target = document.getElementById('text');
  target.style.fontFamily = 'Georgia, serif';
  target.style.fontSize = '24px';          // the unit is required
  target.style.color = '#3055d8';
}

button.addEventListener('click', js_style);

// A unit-less number is ignored by a real browser. Recorded here to show that
// assigning it does not throw — it just quietly fails to apply.
const before = p.style.fontSize;

console.log('before the click:', JSON.stringify(p.style));
fire(button, 'click');
console.log('after the click :', JSON.stringify(p.style));
console.log('font-size in JS is style.fontSize, not style["font-size"]');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35const first = el('input', { type: 'text', name: 'fname', value: 'David' });
const last = el('input', { type: 'text', name: 'lname', value: 'Beckham' });
const submit = el('input', { type: 'submit', value: 'Submit' });
const form = el('form', { id: 'form1' }, [first, last, submit]);
document.body.appendChild(form);

// Reading by name, which is what form.elements is for.
function getFormValue(theForm) {
  const fields = {};
  for (const field of theForm.elements) {
    if (field.type === 'submit') continue;          // not data
    fields[field.name] = field.value;
  }
  return fields;
}

let captured = null;
let reloadPrevented = false;

form.addEventListener('submit', (event) => {
  event.preventDefault();                            // stop the reload
  reloadPrevented = event.defaultPrevented;
  captured = getFormValue(event.target);
});

console.log('fields found:', form.elements.length);
console.log('initial values:', getFormValue(form));

fire(form, 'submit');
console.log('captured on submit:', captured);

// Once a user types, the property changes and the attribute does not.
first.value = 'Ada';
console.log('property :', first.value);
console.log('attribute:', first.getAttribute('value'), '<- still the original');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22const para = el('p', { id: 'para' }, 'This paragraph gets a background.');
const fromSheet = el('p', { id: 'styled', class: 'tinted' }, 'Coloured by a stylesheet.');
document.body.appendChild(para);
document.body.appendChild(fromSheet);

const setBackground = (element, colour) => {
  element.style.backgroundColor = colour;
};

console.log('before:', JSON.stringify(para.style.backgroundColor));
setBackground(para, '#fdefec');
console.log('after :', JSON.stringify(para.style.backgroundColor));

// The element coloured by a stylesheet has NOTHING in its style property.
// .style is inline styles only. This is the single most common surprise here.
console.log('coloured by a stylesheet, read via .style:', JSON.stringify(fromSheet.style.backgroundColor));
console.log('<- empty, even though it is visibly tinted. Use getComputedStyle.');

// Removing an inline style: set it to '' rather than deleting the property.
setBackground(para, '');
console.log('after clearing:', JSON.stringify(para.style.backgroundColor));
setBackground(para, '#fdefec');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27const link = el('a', {
  id: 'w3r',
  type: 'text/html',
  hreflang: 'en-us',
  rel: 'nofollow',
  target: '_self',
  href: 'https://www.w3resource.com/',
}, 'w3resource');
document.body.appendChild(el('p', {}, link));

function getAttributes(element) {
  return {
    href: element.getAttribute('href'),
    hreflang: element.getAttribute('hreflang'),
    rel: element.getAttribute('rel'),
    target: element.getAttribute('target'),
    type: element.getAttribute('type'),
  };
}

const attrs = getAttributes(document.getElementById('w3r'));

for (const [name, value] of Object.entries(attrs)) {
  console.log(name.padEnd(9), '->', JSON.stringify(value));
}
console.log('an absent attribute:', JSON.stringify(link.getAttribute('download')), '<- null, not undefined');
console.log('hasAttribute is the presence test:', link.hasAttribute('download'));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26const table = el('table', { id: 'sampleTable', border: '1' }, [
  el('tr', {}, [el('td', {}, 'Row1 cell1'), el('td', {}, 'Row1 cell2')]),
  el('tr', {}, [el('td', {}, 'Row2 cell1'), el('td', {}, 'Row2 cell2')]),
]);
document.body.appendChild(table);

function insert_Row(target, at = -1) {
  const n = target.rows.length + 1;
  const row = target.insertRow(at);              // -1 appends
  // A row with no cells renders as nothing at all, so always add cells.
  row.insertCell().textContent = `Row${n} cell1`;
  row.insertCell().textContent = `Row${n} cell2`;
  return row;
}

// rows and cells are HTMLCollections, not arrays: no .map on them. Spread first.
const textOf = (t) => [...t.rows].map((r) => [...r.cells].map((c) => c.textContent).join(' | '));

console.log('before:', table.rows.length, 'rows');
insert_Row(table);
console.log('after :', table.rows.length, 'rows');
console.log(textOf(table));

insert_Row(table, 0);
console.log('and one at the top:');
console.log(textOf(table));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31const table = el('table', { id: 'myTable', border: '1' }, [1, 2, 3].map((n) =>
  el('tr', {}, [el('td', {}, `Row${n} cell1`), el('td', {}, `Row${n} cell2`)])
));
document.body.appendChild(table);

function changeContent(target, rowIndex, columnIndex, text) {
  const row = target.rows[rowIndex];
  // Guard both levels: an out-of-range index gives undefined, and reading
  // .cells on undefined throws a TypeError.
  if (!row) throw new RangeError(`no row ${rowIndex}; rows are 0 to ${target.rows.length - 1}`);
  const cell = row.cells[columnIndex];
  if (!cell) throw new RangeError(`no column ${columnIndex} in row ${rowIndex}`);
  cell.textContent = text;                  // textContent, not innerHTML
  return cell;
}

const textOf = (t) => [...t.rows].map((r) => [...r.cells].map((c) => c.textContent).join(' | '));
const failure = (r, c) => {
  try { changeContent(table, r, c, 'x'); return 'no error'; } catch (e) { return e.constructor.name; }
};

console.log('before:', textOf(table));
changeContent(table, 1, 1, 'changed!');
console.log('after :', textOf(table));
console.log('bad row   :', failure(9, 0));
console.log('bad column:', failure(0, 9));

// textContent treats markup as text. innerHTML would not, which is the whole
// reason to prefer it for anything a user supplied.
changeContent(table, 2, 0, '<b>not bold</b>');
console.log('markup put in with textContent stays text:', table.rows[2].cells[0].textContent);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35function createTable(rows, columns) {
  if (!Number.isInteger(rows) || !Number.isInteger(columns) || rows < 0 || columns < 0) {
    throw new RangeError('rows and columns must be whole numbers, 0 or above');
  }

  // Built detached from the document, then attached once. A browser can lay out
  // and paint after every insertion if you build in place; this way it does that
  // work a single time.
  const table = document.createElement('table');
  table.setAttribute('border', '1');

  for (let r = 0; r < rows; r++) {
    const row = table.insertRow();
    for (let c = 0; c < columns; c++) {
      row.insertCell().textContent = `Row-${r} Column-${c}`;
    }
  }
  return table;
}

const host = el('div', { id: 'host' });
document.body.appendChild(host);
host.appendChild(createTable(3, 4));

const grid = (t) => [...t.rows].map((r) => [...r.cells].map((c) => c.textContent));
const built = host.querySelector('table');
const refused = (r, c) => {
  try { createTable(r, c); return 'no error'; } catch (e) { return e.constructor.name; }
};

console.log('3 x 4:');
for (const row of grid(built)) console.log(' ', row.join('  '));
console.log('cells:', built.rows.length * built.rows[0].cells.length);
console.log('0 x 0 gives an empty table:', createTable(0, 0).rows.length, 'rows');
console.log('a fractional count is refused:', refused(2.5, 2));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32const makeSelect = () => el('select', { id: 'colorSelect' },
  ['Red', 'Green', 'White', 'Black'].map((c) => el('option', {}, c)));

let select = makeSelect();
document.body.appendChild(select);

// options is an HTMLOptionsCollection. It has length and indexing but no map,
// so it must be spread into a real array first.
const names = (s) => [...s.options].map((o) => o.textContent);

function removecolor(target) {
  const i = target.selectedIndex;
  if (i === -1) return null;                     // nothing selected, nothing to do
  const removed = target.options[i].textContent;
  target.options[i].remove();
  return removed;
}

console.log('start        :', names(select));
select.selectedIndex = 2;                        // White
console.log('removed      :', removecolor(select));
console.log('remaining    :', names(select));

// The classic mistake: removing while walking forwards.
const forwards = makeSelect();
for (let i = 0; i < forwards.options.length; i++) forwards.options[i].remove();
console.log('looped forwards, survivors:', names(forwards), '<- every other one');

// Backwards is safe, because removing index i does not move anything below it.
const backwards = makeSelect();
for (let i = backwards.options.length - 1; i >= 0; i--) backwards.options[i].remove();
console.log('looped backwards, survivors:', names(backwards));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25const select = el('select', { id: 'mySelect' },
  ['Red', 'Green', 'Blue', 'White'].map((c) => el('option', {}, c)));
document.body.appendChild(select);

// An option whose visible text differs from its submitted value.
const withValues = el('select', {}, [
  el('option', { value: 'LOS' }, 'Lagos'),
  el('option', { value: 'ABV' }, 'Abuja'),
]);
document.body.appendChild(withValues);

function getOptions(target) {
  const items = [...target.options].map((o) => o.textContent);
  // The original calls alert(). Returning the message is the same information
  // without freezing the page, and it can be asserted.
  return { count: target.options.length, items, message: `${items.length} items: ${items.join(', ')}` };
}

const result = getOptions(select);
console.log(result.message);
console.log('options.length:', select.options.length, ' select.length:', select.length);
console.log('--- text is not always the value ---');
console.log('texts :', [...withValues.options].map((o) => o.textContent));
console.log('values:', [...withValues.options].map((o) => o.value));
console.log('an empty select counts 0:', el('select', {}).options.length);