js-DOM操作-dom1

DOM是针对xml并经过扩展应用于html的应用程序编程接口，前端工程师借助DOM并使用前端脚本语言来拥有对页面内容及结构的控制权。

• DOM可以将任何html或xml文档描绘成一个“多层节点结构”。
• DOM对象中拥有许多不同类型的节点，这些节点都继承自Node类型，因此所有节点都共享着相同的属性和方法。

---

【节点的共有属性及方法】

• 属性：nodeType，该属性表明节点的类型。
  

  我是一个段落

  
  var node=document.getElementById('p');
  alert(node.nodeType)//1
  alert(node.childNodes[0].nodeType)//3
  alert(node.ownerDocument.nodeType)//9
  这是一个例子，nodeType的值是从1~12的数字，分别表示各种不同的类型，例子中，node是

  他是一个元素节点，nodeType=1；他的子节点是文本节点，nodeType=3；它属于的文档是一个文档节点，nodeType=9；
  还有很多节点类型，只是我没咋看见，所以先不写了。

• 属性：childNodes，该属性保存着一个NodeList对象，它是一种类 数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。
  var n1=node.childNodes[0];
  var n2=node.childNodes.item(1);
  var length=node.childNodes.length;
  发现该属性的表现形式类似数组，但他并不是Array的实例。但是我们可以将它转化为数组。参考arguments对象如何转化为数组
• 属性：parentNode，该属性指向文档树中的父节点。
• 属性：previousSibling,该属性表示该节点的前一个兄弟节点。如果该节点为第一个兄弟节点，那么该属性值为null。
• 属性：nextSibling,该属性表示该节点的后一个兄弟节点。如果该节点为最后一个兄弟节点，那么该属性值为null。
• 属性：firstChild，该属性表示该节点的第一个子节点。
• 属性：lastChild，该属性表示该节点的最后一个子节点。
• 属性：owerDocument，该属性表示整个文档的文档节点。
• 方法：hasChildNodes()，该方法在节点包含一个或多个子节点时返回true。
• 方法：appendChild()，该方法用于向列表的末尾添加一个节点。
  node.appendChild(newnode);
• 方法：insertBefore()，该方法用于在指定节点之前插入一个节点。下面这个例子是在空节点之前插入，也就是放在最后咯。
  node.appendChild(newnode,null);
• 方法：replaceChild()，该方法是要替换某个节点，所以接受两个参数，第一个是新节点，第二个是被替换的节点。
  node.replaceChild(newnode,node.childNodes[0])
• 方法：removeChild()，这个方法只有一个参数就是要移除的参数。
  node.removeChild(node.childNodes[0]);
• 方法：cloneNode()，用于为调用这个方法的节点创建一个副本，接受两个参数，true：表示深度复制，及复制节点及其整个子节点树。false：执行浅复制，只复制节点本身。
  var newnode=node.childNodes[0].cloneNode(true);
  node.appendChild(newnode);
• 方法：normalize()，作用时连接该节点内的两个文本节点之间的空白。

【需要注意】新增、插入、替换、移除节点都是针对父节点的方法。父节点应用这些方法来调整子节点。

---

【Document类型】

文档节点是每个文档的根节点，节点即对象，文档节点及document对象是HTMLDocument的一个实例，是window对象的一个属性，所以可将其作为全局对象来访问。

• 该对象的属性：
  alert(document.nodeType);//9
  alert(document.nodeName);//#document
  alert(document.nodeValue);//null
  其余呢，没有父节点，所以为null，没有所属文档，本身就是一个文档，存在子节点。
• 子节点
  var body=document.body;
  var html=document.documentElement;
  另外还有文档类型节点，注释节点，也都可能是document的子节点，但是由于浏览器之间差异性太大，也没什么用，我就不多深理解啦。
• 文档信息
  • title:包含着,