javascript-dom

Javascript & Browser

window

kapselt Browserfenster

window.outerHeight; -> 1080

BOM - BrowserObjectModel

Daten für Browser

welcher Browser? -> navigator.userAgent
welche Version?
welches OS? -> navigator.platform
aktuelle URL -> location
alert/confirm/prompt

if(prompt('Go to HTL', 'yes') === 'yes')
    location = 'https://www.htlstp.ac.at'

window

&lt;html>
&lt;body>
  <div>Users:</div>
  <ul>
    <li>John</li>
    <li>Pete</li>
  </ul>
&lt;/body>
&lt;/html>

let liPete = $0;
liPete...; -> 'Users:'

getting Elements

document.getElementById(id)


let name = document.getElementById('name');

element.querySelectorAll(css)

returnt alle Elemente in element, welche den css-Selector css erfüllen


let images = list.querySelectorAll('.left > img');

element.querySelector(css)

=element.querySelectorAll(css)[0]


let logo = list.querySelector('img#logo');

Manipulationen

<input type="text" id="name" value="Bob">
<a href="http://www.google.com">Google</a>
<p>can't touch this</p>

let input = document.getElementById('name');
input.id = 'alias';
input.value = 'Destroyah';

let link = document.querySelector('a[href="https://www.google.com"]');
link.href = 'https://www.htlstp.ac.at';
link.textContent = 'HTL St. Pölten';

let paragraphs = document.querySelectorAll('p');
for (let p of paragraphs) {
    p.hidden = false;
    p.textContent = 'touched';
    p.remove(); // overkill
}

<ol>
  <li>html</li>
  <li>css</li>
</ol>

let ol = document.querySelector('ol');
ol.innerHTML += '<li>javascript</li>';

let ol = document.querySelector('ol');
let li = document.createElement('li');
li.className = 'item';
li.textContent = 'javascript';
ol.append(li);

Möglichkeiten des Einfügens

Style-Manipulation

<p class='red huge'>lorem ipsum</p>

let p = document.querySelector('p');
p.style.color = 'blue';

p.classList.remove('red');
p.classList.add('blue');

👍 Single Responsibility Principle 👍

p.classList.toggle('huge');

Events

<button id="button" onclick="handleClick()">X</button>

function handleOnClick(event) {
    //... this = getriggertes Element    
}

document.body.onkeydown = handleKeyPress; // ⚠️ ohne () ⚠️
function handleKeyPress(event) {
    // event.key
}

contextmenu
mousemove
submit
transitioned
...