使用document.getElementById返回[object HTMLDivElement]无法获取数组怎么办

• 变量命名冲突与覆盖
  你在独立JS文件中执行var mArray = document.getElementById("mArray")时，直接将mArray变量赋值为了ID为mArray的DOM元素对象，完全覆盖了你预期要获取的数组变量，所以控制台输出的是DIV元素对象。
• DOM API使用错误
  appendChild是DOM节点的原生方法，用于插入子节点，不是可赋值的属性。你直接给appendChild赋值服务端渲染的数组字符串的操作完全无效，既不会把数组存入DOM节点，还可能抛出语法错误。
• DOM加载顺序错误
  你的script标签放在了<div id="mArray">的前面，执行脚本时该DIV还未被浏览器渲染，document.getElementById("mArray")在HTML内的脚本中执行时会返回null，对null的属性赋值会直接报错。

注意：不要用+拼接字符串和数组/对象，+会触发对象的toString()方法，导致数组输出为1,3,5,7,9这类字符串，用逗号分隔打印参数即可在控制台看到完整的数组结构。

方案1：将服务端数组挂载到全局对象 #

HTML部分调整为：

<script>
// 先将服务端渲染的数组挂载到window全局，供外部JS调用
window.mArray = <%= mArray %>
console.log(window.mArray)
</script>
<div id="mArray"></div>

独立JS文件调整为：

// 直接从全局取服务端注入的数组
var mArray = window.mArray
console.log("33: ", mArray)

方案2：将数组存入DOM自定义属性 #

HTML部分调整为：

<!-- 把数组序列化后存在元素的dataset属性中 -->
<div id="mArray" data-array="<%= JSON.stringify(mArray) %>"></div>

独立JS文件调整为：

var mArrayDom = document.getElementById("mArray")
// 反序列化得到数组
var mArray = JSON.parse(mArrayDom.dataset.array)
console.log("33: ", mArray)

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