javascript node节点学习

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);