获取dom元素及坑点，setAttribute的坑点

获取dom节点方法

通过id：document.getElementById()
参数：id名不用加#
返回：对应id的dom对象

通过class：document.getElementsByClassName()
参数：元素class类名不用加.
返回：对应class的dom节点对象集合，HTMLCollection对象，伪数组，所有节点

通过标签名：document.getElementsByTagName()
参数：元素标签
返回：dom节点对象集合，伪数组

通过css选择器：document.querySelector()
参数：css选择器，如#id，.class
返回：css选择器对应的第一个标签

document.querySelectorAll()
参数：css选择器，如#id，.class
返回：css选择器对应的dom属性节点对象集合，NodeList对象，伪数组，元素节点

注意！获取dom元素时一个坑点

前段时间操作dom元素时使用这些方法被坑了几把，记录下
querySelectorAll 返回NodeList对象。！！！注意。返回的是静态的，不随文档更新而变化。
getElementsByName方法返回NodeList对象，！！！注意。是动态的。
document.getElementsByClassName返回HTMLCollection对象。！！！注意。是动态的，可以跟随文档对象动态变化的。

主要可以看下这篇。当时是看完这篇找到原因的
https://www.cnblogs.com/splitgroup/p/6856927.html
https://blog.csdn.net/weixin_44442095/article/details/86492008
这篇dom元素 讲解的很详细
https://cloud.tencent.com/developer/article/1023213?from=15425

主要记下NodeList和HTMLCollection异同点

相同点

1. 类数组，有length属性，可用下标索引访问其中元素，没有Array的slice等方法
2. 只读，无法增删其中元素
3. 实时同步dom树的变化，若dom树有新元素加入，该类型会将新元素包含进来
4. 可通过下标数字类型索引获取集合中指定位置的元素
5. 可通过item({String | Number}索引)方法获取集合中指定位置的元素，若通过索引找不到元素，则以第一个元素作为返回值

不同点

1. HTMLCollection对象可通过namedItem({String} id 或 name）获取首个匹配的元素，若没有返回null
2. HTMLCollection对象可通过点方式获取第1个id或name匹配的元素，若没有则返回undefined

setAttribute注意点

setAttribute(name, value) 

name要设置的属性名，value要设置的属性值。
如果不存在具有指定名称的属性，则创建新属性
如果存在，则修改属性值
类似 getAttribute() 方法，setAttribute() 只能通过元素节点对象调用函数

当想使用setAttribute修改width属性时
错误写法：

setAttribute("width", "100px");

正确写法：

setAttribute("style", "width:100px")

原因：width属性属于标签属性style的子属性，所以不能直接给width赋值。同理像display什么的也需要给style赋值