求解 ES6 的类语法中操作 document 操作问题？

最近在实践 ES6 语法（主要是类语法），但发现有个问题十分棘手。
怎么解决操作 document 的问题。
app.js:

class app {
    constructor () {
        const a = document.getElementById('fyj');
        a..innerHTML = '<h1>Test</h1>';
        console.log(document.getElementById('fyj'));
        console.log(document.getElementsByClassName('fyj'));
    }
}

new app();

项目加载的是 babel-presets-env
webpack.config.js:

test: /\.js$/,
use: [
	{
    	loader: 'babel-loader',
        options: {
        	cacheDirectory: true,
            presets: ['env']
        }
    }
]

通过 webpack 以及 babel 打包成了 bundle.js,然后直接写入 index.html

<script src="./bundle.js"></script>
<div id="fyj"></div>

发现 document 操作没有起做用，于是就在 app 的 constructor 中写入

console.log(document.getElementById('fyj'))

输出的是 null,后来看过写别人的，发现换成

console.log(document.getElementsByClassName('fyj'))

但是结果依然没有起效，只是 console 返回的是 HTMLCollection 所以有大佬知道怎么解决操作 document 的问题么?