None
Photo by Evelyn on Unsplash

JavaScript is one of the most popular programming languages in the world. To use it effectively, we've to know about the basics of it.

In this article, we'll look at how to manipulate document fragments and getting information from stylesheets.

DocumentFragment

A DocumentFragment is a type of node that provides a lightweight document DOM that' external to the live DOM tree.

It's a document template that acts like the real one but lives in memory.

Its child nodes can easily be manipulated in memory and appended to the live DOM.

Creating DocumentFragments

The createDocumentFragment method lets us create document fragments.

For instance, we can write:

const frag = document.createDocumentFragment();
for (const s of ['foo', 'bar', 'baz']) {
  const p = document.createElement("p");
  p.textContent = s;
  frag.appendChild(p);
}

We created a document fragment with createDocumentFragment .

Then we loop through the array strings to create p elements and append them as child elements of the fragment.

The advantage of creating a document fragment is that we can store it in memory.

It may contain any kind of node except body or html.

The fragment itself isn't added to the DOM when we append a fragment.

Only the node in it is added.

When a document fragment is appended to the DOM, it transfers from the document to the place where it's appended.

It'll be removed from memory.

Elements, on the other hand, are always in memory.

Adding a DocumentFragment to the DOM

We can pass a document fragment to the appendchild and insertBefore to another element.

For instance, we can append what we have in the previous example to the body by writing:

const frag = document.createDocumentFragment();
for (const s of ['foo', 'bar', 'baz']) {
  const p = document.createElement("p");
  p.textContent = s;
  frag.appendChild(p);
}
document.body.appendChild(frag);

Now we add the p elements created to the body.

Using innerHTML on a Document Fragment

We can use innerHTML to set the content of the fragment with a string.

For instance, we can create a document fragment by writing:

const frag = document.createDocumentFragment();
const div = document.createElement('div');
frag.appendChild(div);
frag.querySelector('div').innerHTML = '<p>foo</p><p>bar</p>';
document.body.appendChild(frag);

We create a fragment with createFragment . Then we create a div to hold the contents.

And then we set the content of the div our own HTML.

Finally, append the fragment content to body with appendChild .

Leaving Fragments Containing Nodes in Memory

If we want to keep the contents of the fragment, we can clone it.

For instance,e if we have the following fragment:

const frag = document.createDocumentFragment();
for (const s of ['foo', 'bar', 'baz']) {
  const p = document.createElement("p");
  p.textContent = s;
  frag.appendChild(p);
}

We can clone it by writing:

document.body.appendChild(frag.cloneNode(true));

Then we keep the document fragment content while appending it to the body.

CSS Stylesheets

We can add styles to a page by using the link tag.

Also, we can add style tags or style attributes to documents.

Each style sheet is added to an HTML document is represented by the CSSStylesheer object.

If we have a style element:

<style>
  body {
    background-color: green;
  }
</style>

We can retrieve a stylesheet with JavaScript by writing:

console.log(document.querySelector('style').sheet);

And we get an object with the style sheet.

Accessing All Style Sheets

We can use the styleSheets property to get all the style sheets.

For example, if we have the following CSS:

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <style>
      body {
        background-color: #fff;
      }
    </style>
  </head>
  <body>
  </body>
</html>

Then we can get the style sheets with:

console.log(document.styleSheets);

We can also use the sheet property of a link element as follows:

console.log(document.querySelector('link').sheet);
None
Photo by Zoë Reeve on Unsplash

CSSStyleSheet Properties and Methods

A CSSStyleSheet has properties and methods.

They have the following:

  • disabled — indicates whether the style sheet is disabled
  • href — value of the href attribute
  • media — destination media for the style information
  • ownerNode — the node that associates the stylesheet with the document
  • parentStylesheet — the parent style sheet
  • title — value of the title attribute
  • type — value of the type attribute
  • cssRules — an array-like object for holding rules that compose the stylesheet
  • ownerRule — holds the import rule which imported the stylesheet
  • deleteRule — method to remove a rule from the stylesheet object
  • insertRule — method to insert a rule into the stylesheet

Conclusion

We can get stylesheet data in our browser JavaScript code.

Also, we can get data from stylesheets in the DOM.