[✳️DOM -- manipulation -- WRITING] #JavaScript #dom #browser #frontend

dom--manipulation--writing.ts

// http://youmightnotneedjquery.com/


// DOM manipulation

/////////////////////////////
// create and insert elements
const fragment = document.createDocumentFragment()
fragment.appendChild(document.createComment('Created by LIB'))

foo‿elt = document.createElement(tagName, options) // tag null = ???
fragment.appendChild(foo‿elt)

document.body.append(fragment)

///////////////////////////////
doc = document.parseHTMLUnsafe()
document.createAttribute(name) // createAttributeNS
new Text()


// insertion
elt.after(... new siblings)
document.body.append()
document.write()
document.writeln()

Element.innerHTML, Element.outerHTML

// attributes
const a = document.createAttribute("my_attrib"); // see also createAttributeNS
a.value = "newVal";
node.setAttributeNode(a);



// DOM query
document.body
document.querySelectorAll("*"); // or legacy document.all
document.anchors
document.children
document.activeElement // https://devdocs.io/dom/document/activeelement

// verification:
document.characterSet
document.compatMode
document.contentType



// navigating
// This works in all browsers:
location.assign('...')
location.href = '...'
location = '...'
location.reload()
// If you wanted to change the page without it reflecting in the browser back history, you can do
location.replace('...')
// see also https://www.phpied.com/files/location-location/location-location.html


element.click()

// set id
elt.setAttribute('id', 'foo');

// change a CSS variable
document.documentElement.style.setProperty(
  '--omr⋄ui__bottom-menu--selected-reverse-index',
  css_selected_bottom_menu_value,
)

/// change classes
const body_elt = document.getElementsByTagName('body')[0]
body_elt.classList.add('o⋄top-container', 'foo')
body_elt.classList.remove('sb-show-main', 'sb-main-padded')

/// change data attribute
// https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
const body_elt = document.getElementsByTagName('body')[0]
body_elt.dataset['oTheme'] = 'light-on-dark' // -> data-o-theme="light-on-dark"
//body_elt.dataset['o-theme'] = 'light-on-dark' // NOOOO! There is a crazy camelcase going on


// show/hide an element
document.getElementById('fieldFirstLastName').style.display = 'block'; // 'none'
panelBodyElement.style.display = 'flex'
panelBodyElement.style['flex-direction'] = 'column'
panelBodyElement.setAttribute("style", "width:100px;heigth:100px;border: 2px solid;border-radius:25px;border-style: solid;border-color: purple;");

// Inject html
document.getElementById('1')
    .insertAdjacentHTML('beforebegin', '<div id="0.9"></div>');
afterbegin, beforeend, afterend

// create an element beforehand
// https://stackoverflow.com/a/494348/587407
const div = document.createElement('div')
div.classList.add('gridⵧsquare')
div.innerHTML = `<li>text</li>` // HTML string
document.body.appendChild(div)


// Rewrite the URL
const search_params = new URLSearchParams()
search_params.append('foo', '42')
const new_url =
  location.origin
  + location.path
  + '?' + search_params // + location.search
  + location.hash
if (location.href !== new_url)
  location.replace(new_url)