EN
JavaScript - different ways of accessing elements in the DOM e.g. by get element by ID, Tag, Name, Class, CSS Selector, built-in handles.
12
points
In JavaScript it is possible to access element in few ways.
1. document.getElementById method example
<!doctype html>
<html>
<body>
<div id="my-tag"></div>
<script>
var handle = document.getElementById('my-tag');
handle.innerText = 'Hello world!';
</script>
</body>
</html>Run it online here.
Result:
2. document.getElementsByTagName method example
<!doctype html>
<html>
<body>
<div>Tag 1</div>
<div>Tag 2</div>
<div>Tag 3</div>
<script>
var handles = document.getElementsByTagName('div');
for(var i = 0; i < handles.length; ++i)
handles[i].innerText = 'Hello world!';
</script>
</body>
</html>Result:
3. document.getElementsByClassName method example
<!doctype html>
<html>
<body>
<div class="tag">Tag 1</div>
<div class="tag">Tag 2</div>
<div class="tag">Tag 3</div>
<script>
var handles = document.getElementsByClassName('tag');
for(var i = 0; i < handles.length; ++i)
handles[i].innerText = 'Hello world!';
</script>
</body>
</html>Result:
4. document.querySelector method example
<!doctype html>
<html>
<body>
<div id="tag-1" class="tag">Tag 1</div>
<div id="tag-2" class="tag">Tag 2</div>
<div id="tag-3" class="tag">Tag 3</div>
<script>
// getting handle by tag name
var handle = document.querySelector('div');
// Alternatively handle can be get by:
// - id:
// var handle = document.querySelector('#tag-1');
// - class name:
// var handle = document.querySelector('.tag');
// - all other css selectors
handle.innerText = 'Hello world!';
</script>
</body>
</html>Result:
4. document.querySelectorAll method example
<!doctype html>
<html>
<body>
<div id="tag-1" class="tag">Tag 1</div>
<div id="tag-2" class="tag">Tag 2</div>
<div id="tag-3" class="tag">Tag 3</div>
<script>
// getting handles by tag name
var handles = document.querySelectorAll('div');
// Alternatively handles can be get by:
// - id (this approach is not recommended because of id should be unique):
// var handles = document.querySelectorAll('#tag-1');
// - class name:
// var handles = document.querySelectorAll('.tag');
// - all other css selectors
for(var i = 0; i < handles.length; ++i)
handles[i].innerText = 'Hello world!';
</script>
</body>
</html>Result:
5. Built in handles example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<style>
.block {
border: 1px solid red;
border-radius: 3px;
}
</style>
</head>
<body>
<h3>Built-in handles example</h3>
<script>
var head = document.head; // html->head handle
var body = document.body; // html->body handle
var script = document.currentScript; // currently executed script handle
var container = document.createElement('div');
function appendText(text) {
var handle = document.createElement('pre');
handle.className = 'block';
handle.innerText = text;
container.appendChild(handle);
}
body.style.background = 'blue';
appendText(head.innerHTML);
appendText(script.innerHTML);
script.parentNode.insertBefore(container, script);
</script>
</body>
</html>Result:
