diff --git a/src/dom/document.zig b/src/dom/document.zig
index cb07715c..adf34d35 100644
--- a/src/dom/document.zig
+++ b/src/dom/document.zig
@@ -14,6 +14,7 @@ const Element = @import("element.zig").Element;
 const ElementUnion = @import("element.zig").Union;
 
 const DocumentType = @import("document_type.zig").DocumentType;
+const DocumentFragment = @import("document_fragment.zig").DocumentFragment;
 const DOMImplementation = @import("implementation.zig").DOMImplementation;
 
 // WEB IDL https://dom.spec.whatwg.org/#document
@@ -124,6 +125,10 @@ pub const Document = struct {
         );
     }
 
+    pub fn _createDocumentFragment(self: *parser.Document) !*parser.DocumentFragment {
+        return try parser.documentCreateDocumentFragment(self);
+    }
+
     pub fn deinit(_: *parser.Document, _: std.mem.Allocator) void {}
 };
 
@@ -216,6 +221,11 @@ pub fn testExecFn(
     };
     try checkCases(js_env, &new);
 
+    var createDocumentFragment = [_]Case{
+        .{ .src = "document.createDocumentFragment()", .ex = "[object DocumentFragment]" },
+    };
+    try checkCases(js_env, &createDocumentFragment);
+
     const tags = comptime parser.Tag.all();
     comptime var createElements: [(tags.len) * 2]Case = undefined;
     inline for (tags, 0..) |tag, i| {
diff --git a/src/dom/document_fragment.zig b/src/dom/document_fragment.zig
new file mode 100644
index 00000000..dea6ade1
--- /dev/null
+++ b/src/dom/document_fragment.zig
@@ -0,0 +1,21 @@
+const std = @import("std");
+
+const parser = @import("../netsurf.zig");
+
+const Node = @import("node.zig").Node;
+
+// WEB IDL https://dom.spec.whatwg.org/#documentfragment
+pub const DocumentFragment = struct {
+    pub const Self = parser.DocumentFragment;
+    pub const prototype = *Node;
+    pub const mem_guarantied = true;
+
+    // TODO add constructor, but I need to associate the new DocumentFragment
+    // with the current document global object...
+    // > The new DocumentFragment() constructor steps are to set this’s node
+    // > document to current global object’s associated Document.
+    // https://dom.spec.whatwg.org/#dom-documentfragment-documentfragment
+    pub fn constructor() !*parser.DocumentFragment {
+        return error.NotImplemented;
+    }
+};
diff --git a/src/dom/node.zig b/src/dom/node.zig
index 4f5c1672..022aa9c7 100644
--- a/src/dom/node.zig
+++ b/src/dom/node.zig
@@ -16,6 +16,7 @@ const CData = @import("character_data.zig");
 const Element = @import("element.zig").Element;
 const Document = @import("document.zig").Document;
 const DocumentType = @import("document_type.zig").DocumentType;
+const DocumentFragment = @import("document_fragment.zig").DocumentFragment;
 const HTMLCollection = @import("html_collection.zig").HTMLCollection;
 
 // HTML
@@ -30,6 +31,7 @@ pub const Interfaces = generate.Tuple(.{
     Element,
     Document,
     DocumentType,
+    DocumentFragment,
     HTMLCollection,
 
     HTML.Interfaces,
@@ -55,6 +57,7 @@ pub const Node = struct {
             .document => .{ .HTMLDocument = @as(*parser.DocumentHTML, @ptrCast(node)) },
             .document_type => .{ .DocumentType = @as(*parser.DocumentType, @ptrCast(node)) },
             .attribute => .{ .Attr = @as(*parser.Attribute, @ptrCast(node)) },
+            .document_fragment => .{ .DocumentFragment = @as(*parser.DocumentFragment, @ptrCast(node)) },
             else => @panic("node type not handled"), // TODO
         };
     }
diff --git a/src/netsurf.zig b/src/netsurf.zig
index d0fee760..81da35c3 100644
--- a/src/netsurf.zig
+++ b/src/netsurf.zig
@@ -998,6 +998,9 @@ pub const Track = struct { base: *c.dom_html_element };
 pub const UList = c.dom_html_u_list_element;
 pub const Video = struct { base: *c.dom_html_element };
 
+// Document Fragment
+pub const DocumentFragment = c.dom_document_fragment;
+
 // Document Position
 
 pub const DocumentPosition = enum(u2) {
@@ -1177,6 +1180,13 @@ pub inline fn documentGetDoctype(doc: *Document) !?*DocumentType {
     return dt;
 }
 
+pub inline fn documentCreateDocumentFragment(doc: *Document) !*DocumentFragment {
+    var df: ?*DocumentFragment = undefined;
+    const err = documentVtable(doc).dom_document_create_document_fragment.?(doc, &df);
+    try DOMErr(err);
+    return df.?;
+}
+
 // DocumentHTML
 pub const DocumentHTML = c.dom_html_document;
 
diff --git a/tests/wpt/dom/nodes/DocumentFragment-constructor.html b/tests/wpt/dom/nodes/DocumentFragment-constructor.html
new file mode 100644
index 00000000..e97a7c48
--- /dev/null
+++ b/tests/wpt/dom/nodes/DocumentFragment-constructor.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>DocumentFragment constructor</title>
+<link rel="help" href="https://dom.spec.whatwg.org/#dom-documentfragment-documentfragment">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+"use strict";
+
+test(() => {
+  const fragment = new DocumentFragment();
+  assert_equals(fragment.ownerDocument, document);
+}, "Sets the owner document to the current global object associated document");
+
+test(() => {
+  const fragment = new DocumentFragment();
+  const text = document.createTextNode("");
+  fragment.appendChild(text);
+  assert_equals(fragment.firstChild, text);
+}, "Create a valid document DocumentFragment");
+</script>
diff --git a/tests/wpt/dom/nodes/DocumentFragment-getElementById.html b/tests/wpt/dom/nodes/DocumentFragment-getElementById.html
new file mode 100644
index 00000000..ce0d302c
--- /dev/null
+++ b/tests/wpt/dom/nodes/DocumentFragment-getElementById.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>DocumentFragment.prototype.getElementById</title>
+<link rel="help" href="https://dom.spec.whatwg.org/#dom-nonelementparentnode-getelementbyid">
+<link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<template>
+  <div id="bar">
+    <span id="foo" data-yes></span>
+  </div>
+  <div id="foo">
+    <span id="foo"></span>
+    <ul id="bar">
+      <li id="foo"></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+"use strict";
+
+test(() => {
+  assert_equals(typeof DocumentFragment.prototype.getElementById, "function", "It must exist on the prototype");
+  assert_equals(typeof document.createDocumentFragment().getElementById, "function", "It must exist on an instance");
+}, "The method must exist");
+
+test(() => {
+  assert_equals(document.createDocumentFragment().getElementById("foo"), null);
+  assert_equals(document.createDocumentFragment().getElementById(""), null);
+}, "It must return null when there are no matches");
+
+test(() => {
+  const frag = document.createDocumentFragment();
+  frag.appendChild(document.createElement("div"));
+  frag.appendChild(document.createElement("span"));
+  frag.childNodes[0].id = "foo";
+  frag.childNodes[1].id = "foo";
+
+  assert_equals(frag.getElementById("foo"), frag.childNodes[0]);
+}, "It must return the first element when there are matches");
+
+test(() => {
+  const frag = document.createDocumentFragment();
+  frag.appendChild(document.createElement("div"));
+  frag.childNodes[0].setAttribute("id", "");
+
+  assert_equals(
+    frag.getElementById(""),
+    null,
+    "Even if there is an element with an empty-string ID attribute, it must not be returned"
+  );
+}, "Empty string ID values");
+
+test(() => {
+  const frag = document.querySelector("template").content;
+
+  assert_true(frag.getElementById("foo").hasAttribute("data-yes"));
+}, "It must return the first element when there are matches, using a template");
+</script>
diff --git a/tests/wpt/dom/nodes/DocumentFragment-querySelectorAll-after-modification.html b/tests/wpt/dom/nodes/DocumentFragment-querySelectorAll-after-modification.html
new file mode 100644
index 00000000..80493638
--- /dev/null
+++ b/tests/wpt/dom/nodes/DocumentFragment-querySelectorAll-after-modification.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>querySelectorAll should still work on DocumentFragments after they are modified</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<!-- Regression test for https://github.com/jsdom/jsdom/issues/2290 -->
+
+<script>
+"use strict";
+
+setup({ single_test: true });
+
+const frag = document.createDocumentFragment();
+frag.appendChild(document.createElement("div"));
+
+assert_array_equals(frag.querySelectorAll("img"), [], "before modification");
+
+frag.appendChild(document.createElement("div"));
+
+// If the bug is present, this will throw.
+assert_array_equals(frag.querySelectorAll("img"), [], "after modification");
+
+done();
+</script>