Uncaught TypeError: Cannot read properties of null (reading ‘getElementsByTagName‘)

想要鼠标悬停，li标签变色var ps= document.getElementById("navigation").getElementsByTagName("li");for (var i in ps) {ps[i].onmouseover = function () {this.setAttribute("class","active");}ps[i].onmouseou

素心如月娅

5237人浏览 · 2022-05-20 20:26:22

素心如月娅 · 2022-05-20 20:26:22 发布

想要鼠标悬停，li标签变色

var ps= document.getElementById("navigation").getElementsByTagName("li");
        for (var i in ps) {
            ps[i].onmouseover = function () {
                this.setAttribute("class","active");
            }
            ps[i].onmouseout = function () {
                this.removeAttribute("class");
            }
        }

结果浏览器报错
在这里插入图片描述

后来发现是script标签放在了head中，如果没有设置window.onload，那么JS在html加载之前就会被解析，相应的就取不到html中的元素了。

<script>
	window.onload = function () {
		var ps= document.getElementById("navigation").getElementsByTagName("li");
		 for (var i in ps) {
          	 ps[i].onmouseover = function () {
          		this.setAttribute("class","active");
         	 }
         	 ps[i].onmouseout = function () {
          		 this.removeAttribute("class");
        	 }
     	 }
	}
</script>