1. 增:
(1).新建:
createElement(标签名)创建元素节点
setAttribute(name,value) 直接设置属性
cloneNode(true、false) true表示包含子节点;false表示不包含
(2). 插入:
拼接节点:appendChild();
插入节点:insertBefore(new,old)
2.删
removeChild(); 删除子节点;
removeAttributeNode(); 删除属性节点;
3.改
replaceChild(new,old) 替换节点、需要用父级来调用
setAttribute() 修改属性值
4.查
getElementById() | 通过id名获取元素,返回匹配元素 |
getElementsByTagName() | 通过标签名获取元素,返回类数组集合 |
getElementsByClassName() | 通过class名获取元素,返回类数组集合,ie6, ie7 不适用 |
getElementsByName() | 表单常用,通过表单的name名获取元素,返回类数组集合 |
querySelector() | 新的ECMA6标准,通过css选择器获取元素。返回匹配元素 |
querySelectorAll() | 新的ECMA6标准,通过css选择器获取元素,返回类数组集合 |
(2). 获取下一个兄弟节点:
nextSibling: 有兼容问题,ie9以上及safari、chrome、firefox会将后边的换行部分作为节点进行处理;可以使用nodeType来查看节点类型;nodeType返回值(元素节点、属性节点文本节点、注释),兼容使用需要写入dEl.nextSibling.nodeType == 1? dEl.nextSibling : dEl.nextSibling.nextSibling 的语句
nextElementSibling: 可以忽略文档节点,只获取元素家电,但是,ie6, ie7不支持
previousSibling: 同上 兼容使用需要写入dEl.previousSibling.nodeType == 1? dEl.previousSibling: dEl.previousSibling.nextSibling 的语句
previousElementSibling 直接获取元素节点,问题同上
(3).获取子节点:
1).第一个子节点:firstChild 现代浏览器不适用,ie6, ie7适用; firstElementChild ie6, ie7不兼容
在使用之前判断浏览器的版本
2).最后一个节点 :lastChild lastElementChild 问题同上
3).获取字节点:childNodes 会获取非元素类型的子节点
4).获取元素子节点,没有兼容问题:children
(4) . 获取父级节点: parentNode
5.获取节点后的操作:
(1). 通过点语法调用标签属性
(2). 通过style属性控制样式
(3).通过classList控制样式
add(class1,class2.....)添加类名
remove(class1,class2...)删除类名
replace(oldClass,newClass) 替换类名
contain(class) 是否包含某个类名,返回布尔值
toggle(class, true|false) 如果类名存在就删除,不存在就添加,第二个参数代表强制,ture添加,false删除。