JavaScript DOM: Getting Head Element

JavaScript DOM: Getting Head Element

By /

In every HTML page, the <head> section plays a quiet but essential role. It houses metadata, the document’s title, links to stylesheets, scripts, and other information that shapes how the page is understood and displayed by browsers. Although its contents are not visible on the page, the head element is central to how a document behaves and appears.

JavaScript allows you to reach into this hidden realm and manipulate it on the fly. Whether you want to change the page title, add new styles, inject metadata, or include links to external stylesheets, accessing the <head> gives you control over the document’s foundation. Let’s explore the ways you can use JavaScript to work with the head element.

Accessing the <head> Element with document.head

The most direct method to select the <head> is document.head. This property returns the <head> node immediately, without searching.

Here’s a playful example that changes the page title by modifying the <title> directly in the head:

<!DOCTYPE html>
<html>
<head>
  <title>Original Title</title>
</head>
<body>

  <h1>Watch the title change!</h1>

  <script>

    const head = document.head;
    const titleElement = head.querySelector('title');
    titleElement.textContent = 'Magic Title Unveiled';

    console.log('New title is:', document.title);

  </script>

</body>
</html>

In this example, grabbing document.head and updating the <title> changes what appears on the browser’s tab. The console confirms the new title.

Getting the Head Element Using querySelector

You can also obtain the head element using document.querySelector('head'). It works just like selecting any other element with CSS selectors.

Here’s an example that adds a light border to the head by injecting a <style> inside it:

<!DOCTYPE html>
<html>
<head>
  <title>Border Test</title>
</head>
<body>

  <p>Look at the head (invisible) for a styled border rule.</p>

  <script>

    const headViaQuery = document.querySelector('head');
    const styleTag = document.createElement('style');
    styleTag.textContent = 'body { border-top: 5px solid crimson; }';

    headViaQuery.appendChild(styleTag);

  </script>

</body>
</html>

This script uses querySelector to get the head and then appends CSS that adds a visible top border to the body, demonstrating how styles can be dynamically applied.

Adding a <meta> Tag Dynamically

A clever trick is creating new metadata in the head using JavaScript. You can add a <meta> tag, such as for robots or viewport instructions, on the fly.

Here’s how to add a “robots” meta tag that allows indexing:

<!DOCTYPE html>
<html>
<head>
  <title>Meta Magic</title>
</head>
<body>

  <p>New meta tags are created dynamically.</p>

  <script>

    const newMeta = document.createElement('meta');
    newMeta.name = 'robots';
    newMeta.content = 'index, follow';

    document.head.appendChild(newMeta);

    console.log('Added robots meta tag:', newMeta.outerHTML);

  </script>

</body>
</html>

This code creates a <meta> tag and adds it to the head. The console logs its HTML structure so you can verify it’s there.

Dynamically Adding a <style> Tag

You can write CSS directly into the head using a new <style> element. This allows you to define rules dynamically based on user actions or page logic.

Below is an example which adds a style rule for all paragraphs to appear in a whimsical font:

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Style</title>
</head>
<body>

  <p>Read me in a playful font!</p>

  <script>

    const style = document.createElement('style');
    style.textContent = 'p { font-family: "Comic Sans MS", cursive; color: teal; }';

    document.head.appendChild(style);

  </script>

</body>
</html>

Once the style tag is added, all paragraphs on the page update to render in Comic Sans with teal text—completely via JavaScript.

Injecting a New <title> Tag

You can dynamically update the <title> tag by replacing its content or even swapping it out entirely.

Here’s an example that creates a new <title> element and replaces the old one:

<!DOCTYPE html>
<html>
<head>
  <title>Old Title</title>
</head>
<body>

  <script>

    const newTitle = document.createElement('title');
    newTitle.textContent = 'Brand New Title';

    const oldTitle = document.head.querySelector('title');

    document.head.replaceChild(newTitle, oldTitle);

    console.log('Title now reads:', document.title);

  </script>

</body>
</html>

The script crafts a brand new <title>, replaces the old, and updates the browser’s tab label instantly.

Adding External Stylesheets

You can also link to external CSS files programmatically by creating <link> elements in the head.

Below is an example that links to a placeholder stylesheet:

<!DOCTYPE html>
<html>
<head>
  <title>External CSS Loader</title>
</head>
<body>

  <p>Once loaded, the stylesheet will style this paragraph.</p>

  <script>

    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'styles.css';

    document.head.appendChild(link);

    console.log('Stylesheet link added:', link.href);

  </script>

</body>
</html>

This script dynamically adds a stylesheet to the head, allowing you to apply new styles without refreshing the page.

Modifying Existing Head Children

You can inspect and modify existing child elements of the head using document.head.children or methods like getElementsByTagName.

In this example, we change the content of an existing <meta> tag:

<!DOCTYPE html>
<html>
<head>
  <title>Meta Modifier</title>
  <meta name="description" content="Old description">
</head>
<body>

  <script>

    const metas = document.head.getElementsByTagName('meta');

    for (const meta of metas) {

      if (meta.name === 'description') {

        meta.content = 'Updated description via JavaScript!';
        console.log('Meta description changed to:', meta.content);

      }

    }

  </script>

</body>
</html>

This script finds the meta tag named “description” and changes its content to a new phrase, with confirmation in the console.

Conclusion

Accessing the <head> element with JavaScript opens up powerful ways to shape your page’s structure and metadata. By using document.head or querySelector, you can update the title, add styles, inject meta tags, and link external stylesheets—all without touching the HTML source. It’s like quietly whispering changes behind the scenes while the visible page hums along.

References

If you’re curious to explore further or want to double-check what you’ve learned, these trusted documentation pages offer more detailed explanations and examples:

Related Posts

Scroll to Top