dome属性与节点

1.在标签中增加或删除属性的值

1.获取属性值
element.getAttribute()

2.用script新增属性并且设置属性名
element.setAttribute('value1' ,'value2')
value1代表属性 value2代表设置的属性值

3.删除属性
element.removeAttribute()

1.4自定义属性在html中

1.设置：
在标签上写上 data-* = ''  ;
*代表自定义的属性名   
2.调用
element.dataset.*
其中dateset是自定义属性的集合

3节点

3.1节点node概念

网页中的所有内容都是节点，节点用node表示 且均可以被js访问
一个节点包含三个属性 nodeType nodeName nodeValue
即可用 
elem.nodeType查看属性
elem.nodeName查看名字
elem.nodeValue查看值

3.2父节点

获得elem的父节点
elem.parentNode;
如li.parentNode;

3.3子节点

获得elem的子节点
elem.childNodes 使用此方法的话空格和换行也会算作子节点
elem.children 空格和换行不算 开发中经常使用
例如
console.log(ul.children) 只会打印出li

3.4识别子节点的文本 空格 换行也算

elem.firstChild 识别第一个子节点的文本
elem.lastChild 识别最后一个子节点的文本

3.5兄弟节点

识别文本的
elem.nextSibling  识别elem的下一个的兄弟节点
elem.previousSibling 识别elem的上一个兄弟节点
elem.nextSibling 和elem.previousSibling 都会识别 文本（换行 空格）

不识别文本的(如果没用特殊需求 使用这个)
elem.nextElementSibling 识别elem的下一个兄弟节点
elem.previousElementSibling 识别elem的上一个兄弟节点

3.5创建添加 删除节点

1.创建节点
方法一
document.createElement('elem') 此elem为新创建的节点 可为 li a 等标签
例如这种形式
var nodeName = document.createElement('li') 及创建了一个新的节点
方法二
var inner = '<a herf='javascript:void(0)'>常见元素的第二个方式</a>'
方法三
document.write('<li></li>')
2.添加节点
在原节点里面添加一个新的节点

添加到最后
elem.appendChild(nodeName)这里没有''号

添加到最前面位置 具体添加到elem.children[i]的前面
elem.insertBefore(nodeName,elem.children[i]) 添加到 elem.Children[i]的前面
3.删除节点
elem(父节点).removeChild（elemChlid被删除的子节点）
4.节点的克隆
elem(被克隆).cloneNode()如果cloneNode不加任何的内容，就只会克隆标签
elem.cloneNode(true)  如果加上true参数，就会进行深度克隆！！！

方法总结

1.将字符串li ul 等 转换为节点
创建一个新的节点
var  node   =  document.createElement(你的字符)

2.当有多个子节点 item[i] 即 i不确定 但要获取到具体的i值时
可以
2.1 遍历 item下 给item[]自定义一个属性    属性值等于 i
for(var i = 0 ; i<item.length ; i++){
    item[i].createElement('data-custom','i')
}
即custom属性的值为i;
这样每个item[] 都有一个属性 custon 且它的属性值 记录的及时此时item[]的index
   <ul>
   <li data-custom="0"></li>
   <li data-custom="1"></li>
   <li data-custom="2"></li>
   <li data-custom="3"></li>
    </ul>