DOM操作

js的DOM操作

DOM是W3C的标准，定义了访问HTML和XML的标准，可以访问所有的HTML元素，连同他包含的文本和属性。

W3C DOM 标准被分为 3 个不同的部分：
* 核心 DOM - 针对任何结构化文档的标准模型
* XML DOM - 针对 XML 文档的标准模型
* HTML DOM - 针对 HTML 文档的标准模型

HTML DOM

常用的DOM操作方法

一些常用的 HTML DOM 方法：
* getElementById(id) - 获取带有指定 id 的节点（元素）
* appendChild(node) - 插入新的子节点（元素）
* removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：
* innerHTML - 节点（元素）的文本值
* parentNode - 节点（元素）的父节点
* childNodes - 节点（元素）的子节点
* attributes - 节点（元素）的属性节点

DOM对性能的影响

参考链接

DOM操作会导致用户阻塞的重构(reflow)和重绘(repaint)，就是你在页面上的任何操作都是有代价的,有些大有些小,如果我们的操作比较频繁或者波及范围较大,那么就要讲究方式和技巧.reflow和repaint就是我们在改变页面或者说操作DOM时,会带来的两种后果.

reflow意味着结构的改变,比如一堆元素堆叠,改变其中一个的宽高,那么相应的所有元素的位置都要改变.

repaint意味着样式的改变比如div调整了背景色等,但是位置不变,只改变我们操作的元素.所以通常来看repaint的代价要远小于reflow,速度也更快.

减少性能影响的方法：

• 能放到DOM操作之外的操作就放到外面,DOM操作要尽量少.

// 不好的做法
for (var i=0; i < items.length; i++){
    var item = document.createElement("li");
    item.appendChild(document.createTextNode("Option " + i));
    list.appendChild(item);
}   


// 更好的做法
// 使用容器存放临时变更， 最后再一次性更新DOM
var fragment = document.createDocumentFragment();
for (var i=0; i < items.length; i++){
    var item = document.createElement("li");
    item.appendChild(document.createTextNode("Option " + i));
    fragment.appendChild(item);
}
list.appendChild(fragment);

• 大范围操作先把容器隐藏,在其中操作完成后,再显示
• 样式操作不要注意修改属性,直接替换class
• 用变量保存DOM对象而不是多次获取,同时减少操作DOM属性的次数.

//不好

function addAnchor(parentElement, anchorText, anchorClass) {
  var element = document.createElement('a');
  parentElement.appendChild(element);
  element.innerHTML = anchorText;
  element.className = anchorClass;
}


//更好

function addAnchor(parentElement, anchorText, anchorClass) {
  var element = document.createElement('a');
  element.innerHTML = anchorText;
  element.className = anchorClass;
  parentElement.appendChild(element);
}

XML DOM

参考链接

XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。

DOM获取节点

• 获取元素值

  getElementsByTagName() 方法返回包含拥有指定标签名的所有元素的节点列表，其中的元素的顺序是它们在源文档中出现的顺序。

  • 获取属性的值

通过使用 getAttribute() 方法或属性节点的 nodeValue 属性来完成这个任务。

• 获取属性值

  getAttribute() 方法返回属性的值。
  getAttributeNode() 方法返回属性节点。

DOM创建节点

• 创建元素节点

用 createElement() 来创建一个新的元素节点，并使用 appendChild() 把它添加到一个节点

xmlDoc = loadXMLDoc("books.xml");
newel = xmlDoc.createElement("edition");
x = xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newel);

1.通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
2.创建一个新的元素节点 <edition>
3.向第一个 <book> 元素追加这个元素节点

• 创建属性节点

  用 createAttribute() 来创建新的属性节点，并使用 setAttributeNode() 把该节点插入一个元素中。
  用 setAttribute() 为一个元素创建一个新的属性。

• 创建文本节点

  用 createTextNode() 来创建新的文本节点，并使用 appendChild() 把该文本节点添加到一个元素中。

DOM删除节点

• 删除元素节点
  emoveChild() 方法删除指定的节点。
  当一个节点被删除时，其所有子节点也会被删除。

• 删除当前节点
  removeChild() 方法是唯一可以删除指定节点的方法。
  当你已定位需要删除的节点时，就可以通过使用 parentNode 属性和 removeChild() 方法来删除此节点：

• 删除文本节点
  removeChild() 方法可用于删除文本节点：

• 清空文本节点
  nodeValue 属性可用于改变或清空文本节点的值

DOM添加节点

• 添加节点

appendChild() 方法向已存在的节点添加子节点。新节点会添加（追加）到任何已存在的子节点之后。

• 插入节点

insertBefore() 方法用于在指定的子节点之前插入节点。在被添加的节点的位置很重要时，此方法很有用。

• 添加新属性

  setAttribute() 可创建一个新的属性：

• 向文本节点添加文本

insertData() 方法有两个参数：

offset - 在何处开始插入字符（以 0 开始）
string - 要插入的字符串

DOM替换节点

• 替换元素节点

replaceChild() 方法用于替换节点。

• 替换文本节点的数据

replaceData() 方法有三个参数：

offset - 在何处开始替换字符。Offset 值以 0 开始。
length - 要替换多少字符
string - 要插入的字符串

• 用 nodeValue 属性来替换文本节点中数据会更加容易。

js的数据类型

参考链接

基本数据类型

string（字符串）：
字符串是存储字符（比如 “Bill Gates”）的变量，可以是引号中的任意文本。您可以使用单引号或双引号：
number：只有一种数字类型。数字可以带小数点，也可以不带：
boolean：布尔（逻辑）只能有两个值：true 或 false。

复合数据类型
Array（数组）：

var cars=new Array("Saab","Volvo","BMW");
////
var cars=["Saab","Volvo","BMW"];
///////
var cars=new Array();
 cars[0]="Saab";
 cars[1]="Volvo";
 cars[2]="BMW";

object（对象）：对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔

var person={firstname:"John", lastname:"Doe", id:5566};

特殊数据类型

undefined:表示变量不含有值，未定义
null:空对象

可变类型
不可变类型