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.
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.
<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>
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'.
<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.
<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.
<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.
<ul> <li>http://coursesweb.net/html/</li> <li>http://coursesweb.net/css/</li> </ul>
.some_class {
display: list-item;
}var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.net