【js操作dom对象学习笔记四之节点的获取和元素的创建】

元素：页面中所有的标签
节点：页面中所有的内容（标签，属性，文本(文字，换行，空格，回车)）

节点的属性(可以使用标签--元素.出来，可以使用属性节点.出来,文本节点.点出来)
nodeType：节点的类型  1--标签              2--属性             3--文本
nodeName: 节点的名字  标签节点--大写的标签名字   属性节点--小写的属性名字  文本节点---#text
nodeValue: 节点的值   标签节点---null          属性节点---属性值           文本节点---文本内容

获取节点
  
  ulObj.parentNode;//获取父节点
  ulObj.parentElement;//获取父元素

  ulObj.childNodes;//获取子节点
  ulObj.children;//获取子元素

  ulObj.firstChild;//第一子节点
  ulObj.firstElementChild;//第一个子元素

  ulObj.lastChild;//最后一个子节点
  ulObj.lastElementChild;//最后一个子元素

  document.getElementById("three").previousSibling;//某个元素的前一个兄弟节点
  document.getElementById("three").previousElementSibling;//某个元素的前一个兄弟元素

  document.getElementById("three").nextSibling;//某个元素的后一个兄弟节点
  document.getElementById("three").nextElementSibling;//某个元素的后一个兄弟元素

总结:凡是获取节点的代码在谷歌和火狐得到的都是  相关的节点
    凡是获取元素的代码在谷歌和火狐得到的都是   相关的元素
  从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持

元素的三种创建方式
 1.document.write("标签的代码及内容");
 2.对象.innerHTML="标签及代码";
 3.document.createElement("标签的名字");

把子元素追加到父级元素中
父级元素.appendChild(子级元素对象);

父级元素.inerstBefore(新的子级对象,参照的子级对象);

移除子元素
父级元素.removeChild(要干掉的子级元素对象);
 

为元素绑定事件(DOM):一种,但是不兼容,有两种
  1 对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持
  2 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持