Html DOM

From wikinotes

Query/Manipulate an HTML page from javascript using it's DOM (domain-object-model).


DOM docs


You can select items from javascript using css selectors.

document.querySelector('');      // find first matching item by CSS-selector
document.querySelectorAll('');   // find all matching items by CSS-selector
document.getElementById('foo-id');            // find element with ID
document.getElementsByClassName('foo-class'); // find elements with class

// find all non-readonly 'li' children of 'foo-id'
var parent = document.getElementById("foo-id");
var children = parent.querySelectorAll("li");
var items = Array.from(children).filter((item) => { return !item.readOnly };