JS之DOM

JS之DOM

JavaScript的组成：

1. ECMAScript基本语法
2. BOM(浏览器对象模型)
3. DOM（文档对象模型）

Dom编程(Document Object Model)

文档对象模型：当一个html页面加载到浏览器的时候，那么浏览器会为每个标签都创建一个对应的对象来描述该标签的所有信息，那么我们看到的网页信息实际上就是这些标签对象的信息，如果我们需要操作页面的数据，那么我们可以通过操作这些标签对象进行操作

//比如：
var elements = document.all //获取页面上所有节点
for(var index = 0;index<elements.length;index++){
    alert("节点名字"+elements[index].nodeName);//nodeName节点的名字
}
//这样通过document.all返回一个页面所有便签对象的数组，然后遍历数组输出节点名字

1. DOM节点

DOM节点分为三大类：元素节点、属性节点、文本节点

在浏览器的渲染机制中，浏览器解析HTML标签，构建DOM树：

DOM树

其中每个元素都可以看作一个对象，每个对象都叫做一个节点,其中我们可以看到文本节点和属性节点是元素节点的子节点，切记：在操作时，要先取到元素节点，再操作子节点

1. Node类型

   1. 获取节点类型的方法：nodeType()

2. 节点关系。

节点之间存在着父子兄弟的关系。每个节点都有一个childNodes属性，可以通过childNodes属性来访问当前节点下的所有子节点。

例如：
var fistChild = someNode.childNodes[0];//可以把这个属性当C中的数组来用，但没有Array类型的方法
var secondChild = someNode.childNodes.item(1);//可以通过item属性来访问，0代表第一个
var count = someNode.childNodes.length;//可以得到该节点下子节点的数量

由于call和apply方法的存在，就算childNodes没有Array类型的方法，我们也可以达到Array的效果：
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);

parentNode//获得当前元素的父节点，包含在childNodes列表中的所有节点都具有相同的父节点，
childNodes//获取当前元素的所有下一级子元素

firstChild//获得当前节点的第一个子节点
lastChild//获得当前节点的最后一个节点
//如果只有一个子节点，那么firstChild和lastChild指向同一个节点，如果没有子节点，那么均为null

nextSibling//获得当前节点的下一个节点（兄节点）
previousSibling//获得当前节点的前一个节点（弟节点）
//第一个节点的previousSibling和最后一个节点的nextSibling均为null

3. 操作节点

   var returnedNode = someNode.appendChild(newNode)//为someNode的childNode的末尾添加节点
   //注：如果该节点在someNode子节点中已经存在，那么会将原有的移除，将新的添加到最后
   
   var returnedNode = someNode.insertBefore(newNode,Node)//将新节点添加到某节点之前，若Node为null，那么功能和append一样是添加到最后
   
   var returnedNode = someNode.replaceChild(newNode,Node)//替换功能，参数分别为新节点和需要替换的节点返回被替换的节点 
   
   var formerFirstChild = someNode.removeChild(someNode.firstChild)//移除节点
   
   var deepList = someNode.cloneNode(true)//该函数会将someNode这个节点的复制返回给前者，括号中是布尔类型的参数，true会进行深复制（也就是复制节点及其整个子节点树），false会进行浅复制（只复制节点本身，此时的这个节点是孤儿节点）。实践时，对深复制后的节点进行修改会影响到原节点，但浅复制不会影响
   

   注：上面的深复制、浅复制是针对dom元素的复制，对于其他的并不适用

   2. Document类型

   ​ 在JS中document对象表示HTMLDocument（继承自Document）的一个实例，表示整个HTML页面，而且document是window对象的一个属性，因此可以将它作为全局对象来访问。

   ​

   documentElement	html元素
   body	body元素
   title	获取标题
   URL	获取URL
   domain	获得域名
   referrer	链接到当前页面的前一个页面
   forms	获得页面所有form标签
   links	获得页面中有href属性的a标签
   anchors	获得文档中所有带name特性的a标签
   images	效果和getElementByTagName(“img”)是一样的

   1. 查找元素

   document.getElementById("元素标签的id")//通过id属性，取得对应元素的引用，但只返回文档中第一次出现的元素
   documen.getElementByTagName("标签名")//通过标签名，比如div，会返回一个"动态"集合，可以通过length返回数量，[]或item()访问对象中的项
   document.getElementByName("元素标签的name属性")//通过name属性
   //以上为最长用的查找方法
   namedItem("name属性")//也是通过标签名找，不过可以先用标签名先固定标签的范围，然后再这个范围中找name
   

   2. 节点的一些方法

      contains()//例如：someNode.contains(otherNode),判断otherNode是否为someNode的后代节点