Uncaught TypeError: Cannot read property ‘children’ of null

1. JavaScript Code Snippet:


function slideTop(idname, topname) {
    var headname = document.getElementById(idname);
    var divname = document.getElementById(topname);
    var alen = divname.children.length;
    ...
}

2. Error:

Uncaught TypeError: Cannot read property ‘children’ of null

3. Analysis:

The error returned by the browser says that the property ‘children‘ of null can not be read, that is to say, the variable divname equals to null, because ‘children‘ is the property of divname. Therefore, it can be determined that the “getElementById(topname)” equals to null, i.e. the element with the id “topname” can not be got. So there are mainly two reasons accounting for this error returned by browser:

  1. There may be something wrong with the id “topname“, e.g. the correct id may be “topName“.
  2. Maybe the element with the id “topname” is existed but can not be got by the broswer due to that this function is executed before the element is interpreted. This case is usually seen when the JavaScipt code snippet is put inside the HTML opening <head> tag and the closing </head> tag while the function is not related to the window.onload event. To solve this problem, you can connect the function with the window.onload event, or move this JavaScript code snippet to where just before the HTML closing </body> tag.

P.S: You should not use “children“. It would be better to use “childNodes” instead of the “children“. “childNodes” is supported by all major browsers including IE, while “children” (invented by IE) is not well supported by major browsers other than IE. The former conforms to the standard while the later is not.

Author: Yakima
关于作者:楠溪江人,出生于1991年,目前坐标上海。读书时代跳过级、保过送,工作后转过行。2013年本科毕业于北药。看书、码字、敲代码、打羽毛球是我花时间的爱好。曾在某上市药企任国际药品注册岗,现在某高新企业任前端管理岗。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据