js知识点-dom节点

一、dom节点类型

二、查看元素节点

1、查看节点名称

 console.log(oDiv.nodeName); //节点名称 DIV 

2、查看标签名称

 console.log(oDiv.tagName); //标签名称 DIV

3、查看节点类型

 console.log(oDiv.nodeType);

4、查看节点值

console.log(oDiv.nodeValue);

三、节点查找

1、通过父节点查找子节点（可能会有空节点（节点后面带有换行或者空格就会造成空节点），但是兼容性较好）

  var oUl = document.getElementById("box");
  console.log(oUl.firstChild); 
  console.log(oUl.lastChild);
  console.log(oUl.childNodes);

2、通过父节点查找子节点(不会有空节点，但是兼容性差)

  //通过父节点查找子节点(不会有空节点，但是兼容性差)
  console.log(oUl.firstElementChild);
  console.log(oUl.lastElementChild);
  console.log(oUl.children);

3、通过子节点查找父节点

 console.log(oLi.parentNode); //查找li的直接父节点
  console.log(oLi.parentElement); //查找直接父元素

4、兄弟节点之间相互查找

（1）查找下一个兄弟节点

  var oLi = document.getElementById("list");
  console.log(oLi.nextSibling); //查找下一个兄弟节点，可能会找到空白文本节点
  console.log(oLi.nextElementSibling); //查找下一个元素兄弟节点
  // console.log(oLi.nextSibling.nodeValue);

（2）查找上一个兄弟节点

  console.log(oLi.previousSibling); //查找上一个兄弟节点，可能会找到空白文本节点
  // console.log(oLi.previousSibling.previousSibling); //查找上一个兄弟节点的上一个，当上一个节点是空白节点时使用
  console.log(oLi.previousElementSibling); //查找上一个元素兄弟节点 （不会找到空白节点）

 四、属性名和属性值操作

1、获取属性名和属性值

 // console.log(oUl.id);
  console.log(oUl.getAttribute("id")); //box
  // console.log(oUl.a); //undefined 不能获取自定义属性
  console.log(oUl.getAttribute("a")); //可以获取自定义属性

2、设置属性名和属性值

 //设置属性名和属性值
  oUl.title = "hello"; //固有属性可以直接赋值
  oUl.setAttribute("title", "hello"); //属性名和属性值之间用逗号隔开
  oUl.b = "12" //能设置自定义属性，但是在标签上看不到
  oUl.setAttribute("b", "20"); //自定义属性，能够在标签上直接看到

3、删除属性名和属性值

 //删除属性名和属性值
  oUl.removeAttribute("a"); //删除自定义属性a
  oUl.removeAttribute("title"); //删除属性title
  //节点对象.removeAttribute("属性名") //删除对应的这对属性

 五、创建元素对象

步骤：

 //节点对象的添加
  var oDiv = document.getElementById("box"); //获取父元素
  var oSpan = document.createElement("span"); //创建元素
  //console.log(oSpan); //span元素对象
  oSpan.innerHTML = "我是span";
  //console.log(oSpan); //<span>我是span</span>
  //追加
  //放到谁里面，谁调用
  oDiv.appendChild(oSpan); //追加后可以在网页中显示