Here there is a list with useful properties and methods of the HTML objects that can be used in JS scripts. JavaScript code and examples that you can test directly on this page.


Properties of the HTML objects

elm.attributes - returns an object with properties 'name', 'value' with the assigned attributes of the corresponding HTML element.
<p id='prg1' data-val='some_val'>Example with elm.attributes. This Div contains the following attributes:</p>

<blockquote id='resp'>attributes</blockquote>
<script>
var elm = document.getElementById('prg1');

//gets the attributes of elm
var attr = elm.attributes;

//parse attr and adds the attributes name=value in resp
var resp ='';
for(var i=0; i<attr.length; i++) resp += attr[i].name +' = '+ attr[i].value +'<br>';

document.getElementById('resp').innerHTML = resp;
</script>
elm.classList - contains a collection of methods to work with CSS classes of the HTML element. - See the tutorial from: coursesweb.net/javascript/classlist-working-css-class
<style>
.cls1 {
color:#0000ed;
}
.cls2 {
font-size:18px;
font-weight:700;
}
</style>

<p id='prg1'>Example with classList. When click on the buttons it is added /deleted css classes on this paragraph.</p>
 <button id='btn1'>Add cls1 - cls2</button> / <button id='btn2'>Remove cls2</button>

<script>
var elm = document.getElementById('prg1');

//when click on #btn1 apply classList.add()
document.getElementById('btn1').addEventListener('click', (ev)=>{
 elm.classList.add('cls1', 'cls2');
});

//when click on #btn2 apply classList.remove()
document.getElementById('btn2').addEventListener('click', (ev)=>{
 elm.classList.remove('cls2');
});
</script>
elm.id - returns the id of the HTML element.
<p id='prg1' class='cls1'>This paragraph with class .cls1 has the id:</p>

<blockquote id='resp'>Response from JS.</blockquote>
<script>
var elm = document.querySelector('.cls1');
document.getElementById('resp').innerHTML = elm.id;
</script>
elm.innerHTML - returns or replaces the HTML content of 'elm'.
 <a id='lnk1' href='//marplo.net' title='MarPlo.net'><em>MarPlo.net</em></a>
<ul><li><a href='//gamv.eu' title='GamV.eu'>GamV.eu</a></li></ul>

<script>
var lnk1 = document.getElementById('lnk1');

//gets html content from #lnk1
var cnt = lnk1.innerHTML;

//adds another content in lnk1
lnk1.innerHTML ='Content added with <em>innerHTML</em>';

//shows in console the initial content
console.log('Initial content in #lnk1: '+ cnt);
</script>
elm.offsetHeight - returns the height of the element in pixels.
<div style='background:#cce8cc; font-size:17px;' id='dv1'>Ex.: offsetHeight.<br>
 - The height of this Div: <em id='resp'>elm.offsetHeight</em></div>

<script>
var elm = document.getElementById('dv1');
document.getElementById('resp').innerHTML = elm.offsetHeight +'px';
</script>
elm.offsetWidth - returns the width of the element, in pixels.
<div style='background:#cce8cc; font-size:17px; margin:5px 10%;' id='dv1'>Ex.: offsetWidth.<br>
 - The width of this Div: <em id='resp'>elm.offsetWidth</em></div>

<script>
var elm = document.getElementById('dv1');
document.getElementById('resp').innerHTML = elm.offsetWidth +'px';
</script>
elm.outerHTML - returns a string with the whole HTML element (including its tag and content). Or replaces 'elm' with other HTML content.
<h3>Peace, Joy, and Goodness Build Health.</h3>
<div>When click on the button, stores it with outerHTML in JS, and deletes it, then it displays in console the retrieved string.</div>
<button id='btn1'>Clic</button>

<script>
//when click on #btn1 it executes a function (ev represents an object with the event)
document.getElementById('btn1').addEventListener('click', (ev)=>{
 //ev.target represents the element that emitted the event
 var str_btn = ev.target.outerHTML;

 //removes the button
 ev.target.outerHTML ='';

 console.log(str_btn);
});
</script>
elm.parentNode - returns the parent element.
<div id='dv1'>Example with parentNode
<p id='prg1'>The id of the parent element: <strong id='resp'>elm.parentNode.id</strong></p>
</div>

<script>
var parent = document.getElementById('prg1').parentNode;
document.getElementById('resp').innerHTML = parent.id;
</script>
elm.style.cssProp ='val' - sets the specified CSS property (cssProp) with the assigned value.
<p id='prg1'>Example with elm.style.<br>
CSS style set from JavaScript.</p>

<script>
var elm = document.getElementById('prg1');
elm.style.background ='#cce9cc';
elm.style.fontSize ='18px';
elm.style.margin ='8px 10%';
elm.style.padding ='5px';
</script>
elm.tagName - returns the tag name (DIV, P, H3, etc.).
<div id='dv1'>Example with tagName.<br>
This element is a: <em id='resp'>elm.tagName</em></div>

<script>
var elm = document.getElementById('dv1');
document.getElementById('resp').innerHTML = elm.tagName;
</script>
elm.textContent - returns the text content in the HTML element, without tags (deletes the tags), or replaces the content with a text string.
<p>When click on the button: adds in #dv1 a HTML string (with innerHTML), then adds the same string with textContent in #resp.<br>
<button id='btn1'>Clic</button></p>

<div id='dv1'> #dv1 - innerHTML</div>
<blockquote id='resp'>#resp - textContent</blockquote>
<script>
var str ='<h3>Peace, Joy, and Goodness Build Health</h3>';

//when click on #btn1 it executes a function
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('dv1').innerHTML = str;
 document.getElementById('resp').textContent = str;
});
</script>

Methods for HTML objects in JS

elm.addEventListener('event', callback) - calls the function from callback when the specified 'event' is emitted.
<p id='prg1'>Ex. addEventListener(), click.</p>
 <button id='btn1'>Clic</button>

<script>
var callF =(ev)=>{
 var cnt = document.getElementById('prg1').textContent;
 alert(cnt);
}

//when click on #btn1 se apeleaza functia callF
document.getElementById('btn1').addEventListener('click', callF);
</script>
elm.insertAdjacentHTML('pos', string) - inserts HTML content (string) at a specified position (pos) relative to 'elm'. - See the tutorial: coursesweb.net/javascript/insertadjacenthtml-insert-content-specified-position_t
<div id="dv1"> #dv1, https://marplo.net/</div><br>
<p>When click on the button it adds with insertAdjacentHTML() an HTML content before the Div with id #dv1.</p>
 <button id='btn1'>Click</button>

<script>
var dv1 = document.getElementById('dv1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var cnt = '<em> Website: </em>';
 dv1.insertAdjacentHTML('beforebegin', cnt);
});
</script>
elm.insertAdjacentText('pos', text) - inserts a 'text' string at a specified position (pos) relative to 'elm'. If the string contains tags, adds them as text as they are.
<div id="dv1"> #dv1, https://gamv.eu/</div><br>
<p>When click on the button, adds a text string into the Div with id #dv1.</p>
 <button id='btn1'>Click</button>

<script>
var dv1 = document.getElementById('dv1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var cnt = '<em class="cls"> Games </em>';
 dv1.insertAdjacentText('beforeend', cnt);
});
</script>
elm.getAttribute('attr') - returns the value of the specified attribute.
<p id='prg1' data-val='some_val'>Example with getAttribute().<br>
 - The value of the 'data-val' attribute: <em id='resp'>elm.getAttribute()</em></p>

<script>
var elm = document.getElementById('prg1');
document.getElementById('resp').innerHTML = elm.getAttribute('data-val');
</script>
elm.matches(css_sel) - returns True if 'elm' matches the css specified selector, otherwise, False.
<div id='dv1'>Ex.: elm.matches().
<p id='prg1' class='pcls'>This paragraph <strong id='resp'>matches()</strong> matches the selector: '#dv1 .pcls'.</p>
</div>

<script>
var elm = document.getElementById('prg1');

//adds in #resp: Yes for True, or NO for False
document.getElementById('resp').innerHTML = elm.matches('#dv1 .pcls') ?'Yes' :'NO';
</script>
elm.querySelector('css_sel') - returns the first element within the 'elm' that matches the specified group of selectors, or null if no matches are found. - See the tutorial from: coursesweb.net/javascript/queryselector-queryselectorall
<div id='dv1'>
<div id='dv2' class='cls'>Div with id #dv2 and class .cls.</div>
<p id='p1' class='cls'>Paragraph with id #p1 and class .cls.</p>
</div>

<blockquote>The first element in #dv1 with class .cls has the id: <em id='resp'>querySelector()</em></blockquote>
<script>
var elm = document.getElementById('dv1');

//the first element with .cls in elm
var ecls = elm.querySelector('.cls');

//displays the id
document.getElementById('resp').innerHTML =' '+ ecls.id;
</script>
elm.querySelectorAll('css_sel') - returns an array with the HTML elements in 'elm' that match the specified group of selectors.
<div id='dv1'>
<div id='dv2' class='cls'>Div with id #dv2 and class .cls.</div>
<p id='p1' class='cls'>Paragraph with id #p1 and class .cls.</p>
</div>

<blockquote id='resp'>querySelectorAll()</blockquote>
<script>
var elm = document.getElementById('dv1');

//array with elements with .cls in elm
var ecls = elm.querySelectorAll('.cls');

var resp ='There are '+ ecls.length +' elements in #dv1 with class .cls. Their id:';

//traverses ecls and adds the id in resp
for(var i=0; i<ecls.length; i++) resp +='<br>- '+ ecls[i].id;

document.getElementById('resp').innerHTML = resp;
</script>
elm.removeAttribute('attr') - removes the specified attribute.
<p id='prg1' style='background:#cce9cc; font-weight:700;'>Example with removeAttribute().<br>
 - When click on the button it removes the 'style' attribute from this elm.</p>
 <button id='btn1'>Remove style</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('prg1').removeAttribute('style');
});
</script>
elm.scrollIntoView() - scrolls the page until the element gets into the view. - This method can contain arguments for setting the scroll, see the documentation: element.scrollIntoView().
<p id='prg1' style='margin:5px 5px 1110px 8px'>Ex.: scrollIntoView().<br>
 - When click on the button it scrolls (with 'smooth' mode) to the #resp element.
 <button id='btn1'>Click</button></p>

<h3 id='resp' style='margin-bottom;35px;'> - And what, it does not mean anything!</h3>
<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').scrollIntoView({behavior:'smooth'});
});
</script>
elm.setAttribute('attr', 'val') - sets the specified 'attr' attribute with the value 'val'.
<p id='prg1'>Example with setAttribute().<br>
 - When click on the button, it sets the 'style' attribute with css properties to this elm.</p>
 <button id='btn1'>Set style</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var scss ='background:#cce9cc; font-weight:700;';
 document.getElementById('prg1').setAttribute('style', scss);
});
</script>

A full list with properties and methods of the HTML elements in JavaScript, to MDN: Element - Properties and Methods.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark>coursesweb.net</mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Properties and Methods of the HTML elements in JavaScript

Last accessed pages

  1. CSS Course - Free lessons (8811)
  2. querySelector and querySelectorAll (7400)
  3. Extract a number of characters and words from text (566)
  4. Create simple Website with PHP (20257)
  5. PHP getElementById and getElementsByTagName (21021)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (489)
  2. Read Excel file data in PHP - PhpExcelReader (443)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (426)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (367)
  5. PHP getElementById and getElementsByTagName (304)