JavaScript 设置属性时出现的Uncaught TypeError

在本篇文章中，我们将学习在JavaScript中使用setAttribute方法时可能遇到的Uncaught TypeError，并探讨如何处理和避免这些错误。

什么是javascript中的setAttribute()方法： setAttribute()方法用于在HTML元素上添加或更新属性值。

示例：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h2>Hello world</h2> 
    <script> 
        let elem = document.querySelector('h2'); 
        elem.setAttribute('style', 'color: red'); 
    </script> 
</body> 
  
</html>

输出：

JavaScript 设置属性时出现的Uncaught TypeError

在上面的示例中，我们选择HTML元素”h2″，并将其”style”属性设置为”color: red”。这会使”h2″元素的颜色变为”红色”。

错误的原因： 现在，让我们讨论一下在使用setAttribute方法时如何出现未捕获的TypeError：

原因1：在元素加载之前设置元素的属性

在这种方法中，您可能会收到一个未捕获的TypeError，提示“无法读取null的属性（’setAttribute’）”。这是因为您试图设置一个尚未在网页上加载的元素的属性。

示例：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <script> 
        let elem = document.querySelector('h2'); 
        elem.setAttribute('style', 'color: red'); 
    </script> 
</head>  
  
<body> 
    <h2>Hello world</h2> 
</body> 
  
</html>

输出：

JavaScript 设置属性时出现的Uncaught TypeError

现在，要修复这个错误，只需要确保要设置属性的元素在被访问之前已经加载好。一种方法是在body标签的末尾编写脚本，而不是在head标签中。

解决方案:

<!DOCTYPE html> 
<html> 

<body> 
    <h2>Hello world</h2> 

    <script> 
        let elem = document.querySelector('h2'); 
        elem.setAttribute('style', 'color: red'); 
    </script> 
</body> 

</html>

输出:

JavaScript 设置属性时出现的Uncaught TypeError

**原因2:在元素数组上调用setAttribute **

在这种方法中，你可能会得到一个未捕获的TypeError，内容为“elem。setAttribute不是一个函数”。发生这种情况是因为你试图在一个元素数组上调用setAttribute方法，而不是在一个HTML元素上。

示例:

<!DOCTYPE html> 
<html> 

<body> 
    <h2>Hello world</h2> 
    <h2>Geeks for Geeks</h2> 

    <script> 
        let elem = document.querySelectorAll('h2'); 
        elem.setAttribute('style', 'color: red'); 
    </script> 
</body> 

</html>

输出:

JavaScript 设置属性时出现的Uncaught TypeError

现在，要修复这个错误，只需确保在单个HTML元素上调用setAttribute方法，而不是在HTML元素数组上。为此，可以使用querySelector或getElementById，而不是querySelectorAll。

解决方案:

<!DOCTYPE html> 
<html> 

<body> 
    <h2>Hello world</h2> 
    <h2>Geeks for Geeks</h2> 

    <script> 
        let elem = document.querySelector('h2'); 
        elem.setAttribute('style', 'color: red'); 
    </script> 
</body> 

</html>

输出:

JavaScript 设置属性时出现的Uncaught TypeError