Elements

Estimated reading time: 2 minutes

attributes

var doc = document.getElementById('bio');
var attr = doc.attributes;
console.log(attr);

classList

var doc = document.getElementById('bio');
doc.classList.add('class-add');
doc.classList.remove('class-remove');
doc.classList.toggle('toggle_class');
doc.classList.replace('old_class','new_class');

className

var doc = document.getElementById('main');
 if(doc.className === 'main-area'){
   console.log('yes, bio class is here');
 }else{
   console.log('sorry, no bio class');
 }

id

var doc = document.getElementById('bio');
var newChild = document.createElement('div')
 newChild.id = 'newChild';

appendChild

var doc = document.getElementById('bio');
var newChild = document.createElement('div')
doc.appendChild(newChild);

innerHTML

var doc = document.getElementById('bio');
var innerMe = `
  <p> welcome here</p>
  <h1> this is another </h1>
  <a href="https://code4mk.org">code4mk</a>
  `
  doc.innerHTML = innerMe;
  console.log(doc);

style

var doc = document.getElementById('bio');
var newChild = document.createElement('div')
 newChild.style.color = 'red';

cssText

var doc = document.getElementById('profile');

var mestyle = `
 color: red;
 border: 2px solid red;
 box-sizing: border-box;
`
doc.style.cssText = mestyle;

dom, element, js