JS学习笔记（二）文档对象模型

　　文档对象模型规定了浏览器应该如何创建HTML页面的模型，以及JavaScript如何访问或修改浏览器窗口中的WEB页面的内容。

　　一、了解DOM树

　　DOM既不是HTML的一部分，也不是JavaScript的一部分，而是一系列独立的规则。所有主流浏览器都实现了这些规则，规则主要有两个方面：

　　1、规定HTML页面的模型：

　　浏览器在加载WEB页面时，会在内存中创建页面的模型。DOM规定了浏览器应该使用DOM树来创建这个模型。

　　DOM树被称为“对象模型”是因为这个模型是由一些对象组成的。每个对象都会作为页面的不同部分被加载到浏览器窗口中。

　　2、访问和修改页面：

　　一般把DOM称为API。用户界面是人和程序之间交互的媒介，而API则是程序（以及脚本）之间通信接口。

　　DOM规定了脚本可以向浏览器询问当前页面相关的哪些内容，以及如何通知浏览器去修改用户看到的内容。

　　DOM树的组成：

　　DOM树由四类节点组成：文档节点、元素节点、属性节点、文本节点。

　　1、文档节点是DOM树的顶端，它呈现为整个页面。相当于document对象，当需要访问任何元素、属性或文本节点时，都需要通过文档节点来导航。

　   2、HTML元素的开始标签中可以包含若干属性，这些属性在DOM树种形成属性节点。

　　属性节点是元素的一部分。当访问一个元素时，有特定的方法和属性用来读取和修改这个元素的属性。

　　3、当访问元素节点时，可以访问元素内部的文本，这些文本保存在其文本节点中。文本节点没有子节点。

　　二、使用DOM树

　　访问并更新DOM树需要两个步骤：

　　1、定位到与需要操作的元素所对应的节点。

　　2、使用它的文本内容、子元素或属性。

　　三、NodeList:返回多个元素的DOM查询

　　Nodelist是一组元素节点的集合。每个节点都有索引编号（从0开始）。元素在NodeList中保存的顺序和它们在页面中出现的顺序一样。

　　geyElementsByTagName();getElementsByClass();均会返回一个NodeList。

　　使用CSS选择器选择元素：

　　querySelector()方法返回匹配CSS样式选择器的第一个节点。querySelectorAll()方法以NodeList的形式返回满足条件的所有节点。下面两行代码的返回值不同。

var el = document.querySelector(li.hot);
var el = document.querySelectorAll(li.hot);

　　在NodeList中选择元素，有两种方法：使用items()方法以及数组语法。

var first = student.item(0);
var second = student[1];

　　四、遍历DOM

　　得到一个元素节点后，可使用以下五个属性来找到其他相关的元素。即遍历DOM。

　　parentNode:当前节点父节点

　　previousSibling、nextSibling：当前节点前后兄弟节点。如果不存在，结果会是NULL。

　　firstChild、lastChild：当前节点的第一个或最后一个孩子节点。

　　这些属性是只读的，只能选择一个节点，不能改变其父亲、兄弟和孩子节点。

　　五、使用nodeVaule属性获取和更新文本节点

<li id="one"><em>fresh</em>figs</li>

document.getElementById('one').firstChild.nextSibling.nodeValue;

 　  六、使用textContext获取和更新文本

　　七、添加和移除HTML内容

　　1、使用innerHTML获取和更新文本及标签：

var elcontent = "hello";
document.getElementById('one').innerHTML = elcontent;

　　2、向DOM中添加元素，涉及三个步骤：

　　1.创建元素：creatElement();

　　首先需要使用creatElement()方法创建一个新的元素节点。将该元素节点保存到元素中。

　　2.设置内容：creatTextNode();

　　创建一个新的文本节点。同样的需要保存到一个变量中。

　　3.将创建的节点添加到DOM中：appendChild();

　　该方法允许指定需要把这个节点添加到哪个元素上，并作为该元素的子节点。

var newel = document.createElement('li');
var newText = document.createTextNode('quinoa');
newel.appendChild(newText);
var position = document.getElementsByTagName('ul')[0]  //NodeList
position.appendChild(newel);

　　八、通过DOM操作移除元素

　　1、把需要移除的元素保存到一个变量中。

　　2、将该元素的父节点保存到变量中。

　　得到父节点最简单的方法就是使用元素的parentNode属性。

　　3、把元素从它包含的元素中移除

　　在步骤二中得到的元素使用removeChild()方法。

　　注意：当从DOM中移除一个元素时，也会移除它的所有子元素。

　　　　　从DOM中移除元素会影响到它的兄弟节点在NodeList中的索引。

var removel = document.getElementsByTagName('li')[3];
var containerel = removel.parentNode;
containerel.removeChild(removel);

　　九、技术比较：更新HTML内容

　　1、document.write()

　　优点：可以简单快速的向页面中添加内容

　　缺点：1.只在页面初始化加载时有效

              2.如果在页面加载完之后使用该方法，会碰到以下问题：1）整个页面被覆盖。2）不是向页面中添加内容。3）创建一个新页面

　　　　　3.在严格验证的XHTML中可能会遇到问题。

　　2、element.innerHTML

　　innerHTML允许以字符串的方式获取和更新任何元素中的整个内容。

　　优点：1.和DOM操作相比，可以使用更少的代码添加大量的标签

　　         2.向页面中添加大量元素时，速度比DOM操作快。

　　　　    3.当需要移除一个元素时，操作简单，直接设为空字符串即可。

　　缺点：1.不应该用它添加用户输入的内容。可能会带来安全隐患。

　　　　   2.添加大的DOM片段时，很难独立区分每一个元素。

　　3、DOM操作

　　DOM操作提供了一组方法和属性，用来访问、创建以及更新元素和文本节点

　　优点：1.不影响事件处理程序。　　

　　　　   2.可以轻易的使用脚本逐步添加元素。

　　缺点：代码量大，速度慢。

　　十、属性节点

　　1、检查一个属性并获取它的值

　　2、创建属性并更改其值

　　3、移除属性

　　方法：

　　getAttribute():获取属性值

　　hasAttribute():检查元素节点是否包含特定属性。

　　setAttribute():设置属性值

　　removeAttribute():从元素节点移除属性

var firstItem = document.getElementById('one');
if(firstItem.hasAttribute('class'))
{
     firstItem.removeAttribute('class');   
}
firstItem.setAttribute('class','cool')