报错：Uncaught TypeError: 获取的元素节点.setAttribute is not a function

我们在写代码的时候可能会遇到类似的报错：
Uncaught TypeError: div1.setAttribute is not a function
源代码是这样的：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>设置属性值</title><style>.red {width: 100px;height: 100px;background-color: red;}#yellow {width: 100px;height: 100px;background-color: yellow;}#blue {width: 100px;height: 100px;background-color: blue;}</style></head>
<body><div name="one"></div><div name="two" id="yellow"></div><script>// 获取 name属性为one的 divvar div1 = document.getElementsByName("one");// 给获取的div添加属性，由于在style里面设置了属性，所以该div会有宽高，会变成红色// 原来 name为one的div没有class属性，通过setAttribute()，给他设置了一个属性并赋值 // 相当于 <div name="one" class="red"></div>div1.setAttribute("class","red");</script>
</body>
</html>

报错的一行是

div1.setAttribute("class","red");

报错：Uncaught TypeError: div1.setAttribute is not a function
翻译：未捕获TypeError: div1。setAttribute不是一个函数
报错信息说setAttribute不是一个函数，可是setAttribute没有拼写错，setAttribute的参数都带引号了，为什么还是报错呢？
经过小编的一番努力，发现获取节点可能有误，于是写成了

var div1 = document.getElementsByName("one")[0];

这样写就对了

改正后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>设置属性值</title><style>.red {width: 100px;height: 100px;background-color: red;}#yellow {width: 100px;height: 100px;background-color: yellow;}#blue {width: 100px;height: 100px;background-color: blue;}</style></head>
<body><div name="one"></div><div name="two" id="yellow"></div><script>// 获取 name属性为one的 divvar div1 = document.getElementsByName("one")[0];// 给获取的div添加属性，由于在style里面设置了属性，所以该div会有宽高，会变成红色// 原来 name为one的div没有class属性，通过setAttribute()，给他设置了一个属性并赋值 // 相当于 <div name="one" class="red"></div>div1.setAttribute("class","red");</script>
</body>
</html>

报错原因：
由于获取该元素的时候用的是getElementsByName()，得到的是数组，不是数组里面的元素，而我们要的不是数组，要的是元素。

总结：
当遇到类似获取的元素节点.操作元素节点的方法 is not a function 的错误的时候，大概是以下几个原因：

1. 操作节点的方法使用有误

方法名拼错了
方法的参数传错了，可能是没有加引号

2. 获取节点有误

获取元素节点的方法拼写上有错误
如果获取节点返回的是一个数组，你可能会忘了要通过该数组的索引值获取到你想要的元素

报错：Uncaught TypeError: 获取的元素节点.setAttribute is not a function相关推荐

JsonMap对象的获取与前台浏览器报错Uncaught TypeError: Cannot read property ‘map‘ of undefined
JsonMap对象的获取与前台浏览器报错Uncaught TypeError: Cannot read property 'map' of undefined 经过不断排查以后发现是自己的后台传的值出 ...
js代码中for循环里绑定onclick事件报错Uncaught TypeError Cannot set properties of undefined (setting ‘className‘)
jsfor循环里绑定onclick事件报错Uncaught TypeError Cannot set properties of undefined (setting 'className') 我想要 ...
小程序组件报错Uncaught TypeError: Cannot read property 'name' of undefined
小程序组件报错Uncaught TypeError: Cannot read property 'name' of undefined Component({/*** 组件的属性列表*/propert ...
【解决】控制台报错Uncaught TypeError: Object(...) is not a function at eval (vue-router.esm-bundler.js
打开http://localhost:8080/,控制台报错 Uncaught TypeError: Object(...) is not a functionat eval (vue-router. ...
layui报错Uncaught TypeError: tree is not a function
layui报错Uncaught TypeError: tree is not a function tree({ elem: "#classtree" , data: data , ...
立即执行函数报错Uncaught TypeError: (intermediate value) is not a function.
立即执行函数报错Uncaught TypeError: (intermediate value) is not a function. 文章目录立即执行函数报错Uncaught TypeError: ...
JS报错-Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on...
报错信息:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on stric ...
vue-cli 外部引入vue-router报错 Uncaught TypeError: Cannot redefine property: $router
在优化基于vue-cli开发的vue项目中,把vue-router改成外部引入的时候, /build/webpack.base.conf.js配置参数: externals: {'vue': 'Vue ...
Javascript 报错 Uncaught TypeError: x is not a function 常见错误总结
这是我近期犯的比较傻的一个错误,一定要mark一下. 以下代码段是借用父类构造函数来实现继承的一种方法, 不过在ES6已经可以使用类了,这个作为了解对阅读以前的代码还是有好处的. 代码非常简单, 1 ...

报错：Uncaught TypeError: 获取的元素节点.setAttribute is not a function

报错：Uncaught TypeError: 获取的元素节点.setAttribute is not a function相关推荐

最新文章

热门文章