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