相同元素获取代码在A-Frame运行正常，在8th Wall中报null错误是什么原因？

报错成因 #

该报错的核心原因是8th Wall项目的JS执行时机和原生A-Frame测试场景存在差异：
8th Wall的项目默认通过webpack打包，入口JS会在DOM渲染、A-Frame自定义元素注册、XR场景初始化完成之前提前执行。此时直接在顶层JS中执行document.querySelector('#text')，目标<a-text>元素还没被插入到DOM树中，查询结果为null，后续对这个null值调用getAttribute类方法就会触发你遇到的类型错误。
而你在原生A-Frame中测试时，JS大概率是在DOM加载完成后才执行，所以可以正常拿到元素。

解决方案 #

你可以选择以下任意一种方案修正执行时机：

• 监听A-Frame场景的加载完成事件后再执行DOM查询，这是最稳妥的XR场景适配方案：

// 等a-scene完全加载、所有实体挂载完成后再执行逻辑
document.querySelector('a-scene').addEventListener('loaded', () => {
  const text = document.querySelector('#text');
  console.log(text);
  // 位置读取、属性操作等后续逻辑都写在该回调内部
})

• 把业务逻辑封装为A-Frame自定义组件，利用组件生命周期保证DOM已就绪：

// 注册自定义组件
AFRAME.registerComponent('get-text-info', {
  init: function () {
    // 组件init生命周期触发时，所有DOM元素已经完成挂载
    const text = document.querySelector('#text');
    // 如果把组件直接挂载到目标<a-text>上，直接用this.el即可获取元素
    console.log(text);
    console.log(text.getAttribute('position'));
  }
})

在HTML的<a-scene>标签上添加组件属性即可生效：

<a-scene get-text-info>
  <!-- 原有场景内容 -->
  <a-text id="text" value="This my text" position="0 0 0" color="#000" scale=".4 .4 .4"></a-text>
</a-scene>

• 简单场景可以直接监听DOM加载完成事件后再执行查询：

document.addEventListener('DOMContentLoaded', () => {
  const text = document.querySelector('#text');
  console.log(text);
})

内容的提问来源于stack exchange，提问作者irina fawcett