Html DOM: Difference between revisions
From wikinotes
No edit summary |
|||
(4 intermediate revisions by the same user not shown) | |||
Line 12: | Line 12: | ||
= Examples = | = Examples = | ||
<blockquote> | <blockquote> | ||
You can select items from [[javascript]] using css selectors. | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
document.querySelector('div.foo-class'); // find items by CSS-selector | document.querySelector('div.foo-class'); // find first matching item by CSS-selector | ||
document.querySelectorAll('div.foo-class'); // find all matching items by CSS-selector | |||
document.getElementById('foo-id'); // find element with ID | document.getElementById('foo-id'); // find element with ID | ||
document.getElementsByClassName('foo-class'); // find elements with class | 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 }; | |||
</syntaxhighlight> | </syntaxhighlight> | ||
</blockquote><!-- Examples --> | </blockquote><!-- Examples --> |
Latest revision as of 15:34, 18 December 2022
Query/Manipulate an HTML page from javascript using it's DOM (domain-object-model).
Documentation
DOM docs https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
Examples
You can select items from javascript using css selectors.
document.querySelector('div.foo-class'); // find first matching item by CSS-selector document.querySelectorAll('div.foo-class'); // 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 };