Node.jsでdiv要素を生成したい

Question

mock-browserというライブラリを使用して、Node.jsでdiv要素を生成したく以下のようにコーディングしました。

しかしconsole.log(document.getElementsByTagName('div'))で出力するとlength: 0となっておりdivが生成されていないようです。

初めてNode.jsを使ったので大変初歩的な質問かと思いますが、是非ともご教授いただけると幸いです。
どうぞよろしくお願い致します。

const express = require('express')
var mockBrowser = require('mock-browser').mocks.MockBrowser

global.window = mockBrowser.createWindow()
global.document = window.document
global.navigator = window.navigator
global.HTMLCollection = window.HTMLCollection
global.getComputedStyle = window.getComputedStyle

const app = express()


app.get('/', (req, res) => {
  const div = document.createElement('div')

  console.log(document.getElementsByTagName('div'))
}

console.logの出力結果

HTMLCollection {
  [Symbol(HTMLCollection internal slots)]: {
    element: <ref *1> DocumentImpl {
      _eventListeners: [Object: null prototype],
      _core: [Object],
      _ownerDocument: [Circular *1],
      _childNodesList: null,
      _childrenList: null,
      _version: 4,
      _memoizedQueries: [Object],
      nodeType: 9,
      _parsingMode: 'html',
      _htmlToDom: [HtmlToDom],
      _implementation: [DOMImplementationImpl],
      _defaultView: [Window],
      _global: [Window],
      _documentElement: null,
      _ids: [Object: null prototype] {},
      _attached: true,
      _currentScript: null,
      _cookieJar: [CookieJar],
      _contentType: undefined,
      _encoding: 'UTF-8',
      _URL: [Object],
      _origin: 'null',
      _location: [LocationImpl],
      _history: [HistoryImpl],
      _activeNodeIterators: [],
      _activeNodeIteratorsMax: 10,
      _referrer: '',
      _lastModified: '09/27/2022 20:20:54',
      _queue: [ResourceQueue],
      _customResourceLoader: undefined,
      _pool: [Object],
      _agentOptions: [Object],
      _strictSSL: true,
      _proxy: undefined,
      _requestManager: [RequestManager],
      readyState: 'complete',
      _lastFocusedElement: null,
      [Symbol(DOM SymbolTree)]: [SymbolTreeNode],
      [Symbol(wrapper)]: [Document]
    },
    query: [Function (anonymous)],
    keys: [],
    length: 0,
    version: 4,
    conflictElements: [Object: null prototype] {}
  }
}

Answer 1

  const div = document.createElement('div')

  console.log(document.getElementsByTagName('div'))

document.createElement('div') はdiv要素を生成しただけで、生成したものを何にも使っていません。document をルートとするDOMツリーには繋がっていないので、getElementsByTagName() で見つけられません。

  const div = document.createElement('div')
  document.body.appendChild(div);

のようにして、DOMツリーに繋げてください。

Comments

[Khy]

生成したものをDOMツリーにつなげる必要があったのですね...!!
おかげさまで解決いたしました、ありがとうございました！