Html DOM: Difference between revisions
From wikinotes
(Created page with "Query/Manipulate an HTML page from javascript using it's DOM (domain-object-model). = Examples = <blockquote> <syntaxhighlight lang="javascript"> document.querySelector('...") |
|||
(6 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
Query/Manipulate an HTML page from [[javascript]] using it's DOM (domain-object-model). | Query/Manipulate an HTML page from [[javascript]] using it's DOM (domain-object-model). | ||
= Documentation = | |||
<blockquote> | |||
{| class="wikitable" | |||
|- | |||
| DOM docs || https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model | |||
|- | |||
|} | |||
</blockquote><!-- Documentation --> | |||
= 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 };