js节点操作&自定义属性
JS自定义属性和节点操作
1.节点是什么？
所谓的节点操作指的是：网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。所有 HTML 元素（节点）均可被修改，也可以创建或删除。
- 节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
- 注：nodeType，
- 元素节点的nodeType的值是1
- 属性节点的值是2
- 文本节点值是3，文本节点包含文字，空格换行等
2.节点层级
所谓的节点层级，表示的是节点层次关系，根据他们的名字你也能很好的理解，父子节点，兄弟节点返回值是：父元素节点，如果找不到返回null。
注意: 返回的是最近的一个父节点
`
×
3.节点属性操作
属性节点的特征：
1.nodeType值为11
2.parentNode值为null
3.在HTML中不包含子元素
注意：
（1）尽管属性也是节点，但却不认为是DOM文档树的一部分。
（2）开发人员常用getAttribute（）、setAttribute( )、removeAttribute( )等方法来操作属性。
4.1 设置属性值
方法：
（1）createAttribute(name)+value+setAttributeNode(属性节点）
（2）setArrtibute(name,value)
（3）点方法 ：DOM节点.name=“value”;《特殊属性为，class->className,for->htmlFor》
实例：
4.2 读取属性值
方法：
（1）element.attributes[“name”].value
（2）element.getAttributeNode（“name”）.value
（3）lement.getAttribute(“name”); 返回的是字符串
（4）element.name; 返回字符串；<通过点方法访问,特殊属性：class->className,for->htmlFor>
（5）只能用来读取class的属性值。element.classList; 返回属性列表；
实例：
注意：
Attribute(),点方法得到的属性值是字符串类型，
当有多个class属性值时，需要利用split（）函数进行字符串切割；
当只有一个class属性值时，element.clsaaList返回值仍旧是数组列表，需要加索引取值：element.classList[0];
4.3 删除某个属性
方法：
removeAttribute(name);
实例：
4.自定义属性（data-*）的操作
添加自定义属性方法：
（1）element.setAttribute("data-*);
（2）element.dataset.name=“value”
读取自定义属性的方法：
（1）element.getAttribute(“name”);
（2） element.dataset.name;
