HTMLCollection是一个接口,表示 HTML 元素的集合,它提供了可以遍历列表的方法和属性。
- 情形:在项目中通过组件的参数传递一个node节点,并在组件中进行组件向上遍历寻找我的目的节点。
constructor(props:any) {
super(props);
this.addClass(COLLAPSER_CLASS);
this._model = props._model;
this._editor = props._editor;
this._node = props._node;
//...后面略
在我通过this._node.parentNode.parentNode如此操作时,发现获取不到数据,并且在控制台中console时,显示的是:
HTMLCollection[]
length: 1
>1:<div>你要获取的div</div>
>__proto__: HTMLCollection
以上内容看似有值,但是实际你去打印的时候会发现
myCollection.length //0
myCollection[0] //undefined
出现这个问题的原因是调用parentNode的时机不对,应该是等到组件全部render结束之后,再进行获取。
- 解决方法1:
将你的获取节点部分的代码放到componentDidMount() 中去执行。 - 解决方法2:
将你的代码用setTimeout进行包裹,这样可以直接写在constructor函数中。
setTimeout(()=>{
//你的代码
},0)