node节点学习
1 . 获取节点(元素)的方法
document.getElementById();
document.getElementsByTagName()
document.getElementsByClassName()
document.querySelector()
document.querySelectorAll()
2 . 节点常用的三个类型
var aa = document.querySelector('div[class="aa"]');
aa.nodeType //1 元素节点 总共有十二种节点 常用的1 元素 2属性 3文本
aa.nodeName //DIV
aa.nodeValue //null
aa.attributes[0].nodeType //2 属情节点
aa.attributes[0].nodeName //class
aa.attributes[0].nodeValue //aa
aa.childNodes[0].nodeTaye //3 文本节点
aa.childNodes[0].nodeName //#TEXT
aa.childNodes[0].nodeValue //yan
aa.parentNode //只有一个
aa.childNodes.length //返回子节点的数量
节点获取中回车符也是一个文本节点
aa.previousSibling //兄弟节点的前面的
aa.nextSibling //兄弟节点的后面的
aa.fristChild //子节点的第一个节点
aa.lastChild //子节点的最后一个节点
aa.hasChildNodes() //查询它下面有没有子节点
3 . 元素属性操作
元素的四个通用属性 id class title style
aa.className = 'red' //给元素增回class属性
aa.style.color = 'red' //给元素增加style属性
//获取属性
aa.getAttribute('class') //返回aa的属性class的值
//设置属性
aa.setAttribute('class','green') //设置aa的属性class的值
//删除属性
aa.removeAttribute('class');
aa.attributes //将aa属性以键值对的型式展示
//调用方法
aa.attributes[0] //返回第一个属性值 class="aa"
aa.attributes['class'] // class="aa"
aa.attributes.removeNamedItem['style'] //删除sytle属性
4 . dom节点的操作
//dom的增加
var li = document.createElement('li');
var txt = document.createTextNode('这是文本内容');
li.appendChild(txt);
var ul = document.getElementByTagName('ul')[0];
ul.append(li);
//插入到指定位置
ul.insertBefore(li,ul.childNodes[5]);
//删除提定位置
ul.removeChinl(li);