Web Technology
Complete Study Guide

HTTP/1.1 200 OK
Set-Cookie: fname=Mario&lname=Cardinal; 
             expires=Monday, 09-July-2012 21:12:00 GMT
             domain=.mywebsite.com; path=/; HttpOnly

<h2 id="id1">Hello World</h2>   ← NOT a <p>
<p>Welcome</p>                   ← p #1
<div>
  <p>Paragraph 1.</p>          ← p #2
  <p>Paragraph 2.</p>          ← p #3
  <section><p>Paragraph 3.</p></section>  ← p #4
</div>
<p>Paragraph 4.</p>             ← p #5
<p>Paragraph 5.</p>             ← p #6
<script>
  const my = document.getElementsByTagName("p");
  document.getElementById("id1").innerHTML = my.length;
</script>

// 1. By ID — fastest, returns ONE element
document.getElementById('title');

// 2. By class name — returns live HTMLCollection
document.getElementsByClassName('note');

// 3. By tag name — returns HTMLCollection
document.getElementsByTagName('p');

// 4. querySelector — CSS selector, FIRST match only
document.querySelector('#fruits > li');

// 5. querySelectorAll — CSS selector, NodeList (all matches)
document.querySelectorAll('.note');

const h2 = document.getElementById("id1");
// h2 = <h2 id="id1">Hello World</h2>

h2.nodeType;          // → 1  (element node)
h2.nodeName;          // → "H2" (tag name, READ-ONLY)
h2.nodeValue;         // → null (elements have null!)
h2.innerHTML;         // → "Hello World"

h2.firstChild;        // → text node "Hello World"
h2.firstChild.nodeType;  // → 3  (text node)
h2.firstChild.nodeName;  // → "#text"
h2.firstChild.nodeValue; // → "Hello World"  ← EQUIVALENT to innerHTML!

// So: h2.innerHTML === h2.firstChild.nodeValue

const h1 = document.getElementById('title');

// Change TEXT content (safe, no XSS risk)
h1.textContent = 'New Title';

// Change with HTML (renders tags)
h1.innerHTML = 'Hello <em>World</em>';

// Change style
h1.style.color = 'tomato';
h1.style.fontSize = '3rem';

// Change attribute
const link = document.querySelector('a');
link.setAttribute('href', 'https://example.com');

// classList API (better than className):
box.classList.add('active');
box.classList.remove('active');
box.classList.toggle('active');  // add if missing, remove if present
box.classList.contains('active'); // true/false

// DocumentFragment (batch insertion, ONE reflow):
const frag = document.createDocumentFragment();
items.forEach(item => frag.appendChild(createRow(item)));
table.appendChild(frag);

// dataset API:
// <button data-user-id="42" data-role="admin">
btn.dataset.userId; // "42"
btn.dataset.role;   // "admin"

<h2>CSS Selector</h2>                        ← first child of body
<p>Hello I am Here:</p>                   ← p#1, 2nd child
<p>Hello I am Here: Paragraph 2</p>        ← p#2
<p> Hello I am Here: P3</p>              ← p#3
<a href="https://www.w3schools.com">w3schools</a>
<a href="http://www.disney.com" target="_blank">disney</a>
<a href="http://www.wikipedia.org" target="_top">wiki</a>

<p>Welcome</p>                          ← p before div
<div>
  <p>Paragraph 1.</p>                ← direct child of div ✓
  <p>Paragraph 2.</p>                ← direct child of div ✓
  <section><p>Paragraph 3.</p></section>  ← NOT direct child ✗
</div>
<p>Paragraph 4.</p>                     ← sibling after div ✓
<p>Paragraph 5.</p>                     ← sibling after div ✓