Web API (排他思想)(自定义属性) (节点操作)
一 、排他思想
(1)概念 :干掉所有的 ,留下自己
(2)用法 :先要遍历元素的集合 ,然后把所有元素设置样式为空 ,再把当前的元素设为高亮。
(3)代码 :
二 、自定义属性操作
(1)获取自定义属性 :element .getAttribute(属性名);
(2)设置自定义属性 :element .setAttribute(属性名,属性值);
(3)移除自定义属性 :element .removeAttribute(属性名);
(4)H5中操作自定义属性 :在H5建议自定义属性用date开头 ; 方便我们去进行获取element .dataset.属性名 ;
三、节点操作
节点概述:至少拥有nodeType(节点类型) 、nodeName(节点名称) 、nodeValue(节点值)三个基本属性
1 、获取节点
(1)获取父子节点 :
获取父节点 :element . parentNode ;
获取子元素 :element . children ;
获取子节点 : element . childNodes ;
获取第一个 子节点 | 元素 :element . firstchild ;| element . firstElementchild ;
获取最后一个 子节点 | 子元素 :element . lastchild ; | element . lastElementchild ;
(2)获取兄弟节点
获取上一个 兄弟节点 | 元素 :element . previousSibling ;| element . previousElementSibling ;
获取下一个 兄弟节点 | 元素 :element . nextSibling ; | element . .nextElementSibling ;
代码 :
2 、动态添加节点
(1)element . innerHTML =" " ;
(2)创建元素然后添加 :
创建元素 :var li =document . createElement(' li ')// 仅仅只是在内存中 ;
挂载到DOM树 :parent . appendChild (li) 追加子元素 ;| parent . insertBefore (li ,参照的元素) ;
DOM树 :