DOM

1. 节点层级

1.1 Node 类型

 Node.ELEMENT_NODE(1)；
 Node.ATTRIBUTE_NODE(2)；
 Node.TEXT_NODE(3)；
 Node.CDATA_SECTION_NODE(4)；
 Node.ENTITY_REFERENCE_NODE(5)；
 Node.ENTITY_NODE(6)；
 Node.PROCESSING_INSTRUCTION_NODE(7)；
 Node.COMMENT_NODE(8)；
 Node.DOCUMENT_NODE(9)；
 Node.DOCUMENT_TYPE_NODE(10)；
 Node.DOCUMENT_FRAGMENT_NODE(11)；
 Node.NOTATION_NODE(12)。

if (someNode.nodeType == 1){ //适用于所有浏览器
alert("Node is an element.");
}

1.1.1 nodeName 和 nodeValue 属性

if (someNode.nodeType == 1){
value = someNode.nodeName; //nodeName 的值是元素的标签名
}

1.1.2 节点关系

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

//在 IE8 及之前版本中无效
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);

function convertToArray(nodes){
var array = null;
try {
array = Array.prototype.slice.call(nodes, 0); //针对非 IE 浏览器
} catch (ex) {
array = new Array();
for (var i=0, len=nodes.length; i < len; i++){
array.push(nodes[i]);
}
}
return array;
}

if (someNode.nextSibling === null){
alert("Last node in the parent’s childNodes list.");
} else if (someNode.previousSibling === null){
alert("First node in the parent’s childNodes list.");
}

1.1.3 操作节点

var returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode); //true
alert(someNode.lastChild == newNode); //true

//someNode 有多个子节点
var returnedNode = someNode.appendChild(someNode.firstChild);
alert(returnedNode == someNode.firstChild); //false
alert(returnedNode == someNode.lastChild); //true

//插入后成为最后一个子节点
returnedNode = someNode.insertBefore(newNode, null);
alert(newNode == someNode.lastChild); //true
//插入后成为第一个子节点
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
alert(returnedNode == newNode); //true
alert(newNode == someNode.firstChild); //true
//插入到最后一个子节点前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild);
alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true

//替换第一个子节点
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);
//替换最后一个子节点
returnedNode = someNode.replaceChild(newNode, someNode.lastChild);

//移除第一个子节点
var formerFirstChild = someNode.removeChild(someNode.firstChild);
//移除最后一个子节点
var formerLastChild = someNode.removeChild(someNode.lastChild);

1.1.4 其他方法

• item 1


• item 2


• item 3

var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length); //3（ IE < 9）或 7（其他浏览器）
var shallowList = myList.cloneNode(false);
alert(shallowList.childNodes.length); //0

1.2 Document 类型

 nodeType 的值为 9；
 nodeName 的值为"#document"；
 nodeValue 的值为 null；
 parentNode 的值为 null；
 ownerDocument 的值为 null；
 其子节点可能是一个 DocumentType （最多一个） 、 Element （最多一个） 、 ProcessingInstruction或 Comment。

1.2.1 文档的子节点

var html = document.documentElement; //取得对的引用
alert(html === document.childNodes[0]); //true
alert(html === document.firstChild); //true

var body = document.body; //取得对的引用

var doctype = document.doctype; //取得对<!DOCTYPE>的引用

1.2.2 文档信息

//取得文档标题
var originalTitle = document.title;
//设置文档标题
document.title = "New page title";

//取得完整的 URL
var url = document.URL;
//取得域名
var domain = document.domain;
//取得来源页面的 URL
var referrer = document.referrer;

//假设页面来自 p2p.wrox.com 域
document.domain = "wrox.com"; // 成功
document.domain = "nczonline.net"; // 出错！

//假设页面来自于 p2p.wrox.com 域
document.domain = "wrox.com"; //松散的（成功）
document.domain = "p2p.wrox.com"; //紧绷的（出错！）

1.2.3 查找元素

var images = document.getElementsByTagName("img");
alert(images.length); //输出图像的数量
alert(images[0].src); //输出第一个图像元素的 src 特性
alert(images.item(0).src); //输出第一个图像元素的 src 特性

var myImage = images.namedItem("myImage");
var myImage = images["myImage"];

var allElements = document.getElementsByTagName("*");

var radios = document.getElementsByName("color");

• 但是，对于这里的单选按钮来说， namedItem()方法则只会取得第一项（因为每一项的 name 特性都相同） 。

1.2.4 特殊集合

 document.anchors，包含文档中所有带 name 特性的元素；
 document.applets，包含文档中所有的元素，因为不再推荐使用元素，
所以这个集合已经不建议使用了；
 document.forms，包含文档中所有的

元素，与 document.getElementsByTagName("form")
得到的结果相同；
 document.images，包含文档中所有的元素，与 document.getElementsByTagName
("img")得到的结果相同；
 document.links，包含文档中所有带 href 特性的元素。

1.2.5 DOM 一致性检测

1.2.6 文档写入

//1. write()
//2. writeln()
//3. open()
//4. close()

The current date and time is:

• 方法 open()和 close()分别用于打开和关闭网页的输出流。
  如果是在页面加载期间使用 write()或 writeln()方法，则不需要用到这两个方法。

1.3 Element 类型

 nodeType 的值为 1；
 nodeName 的值为元素的标签名；
 nodeValue 的值为 null；
 parentNode 可能是 Document 或 Element；
 其子节点可能是 Element、 Text、 Comment、 ProcessingInstruction、 CDATASection 或 EntityReference。

var div = document.getElementById("myDiv");
alert(div.tagName); //"DIV"
alert(div.tagName == div.nodeName); //true

if (element.tagName == "div"){ //不能这样比较，很容易出错！
//在此执行某些操作
}
if (element.tagName.toLowerCase() == "div"){ //这样最好（适用于任何文档）
//在此执行某些操作
}

1.3.1 HTML 元素

 id，元素在文档中的唯一标识符。
 title，有关元素的附加说明信息，一般通过工具提示条显示出来。
 lang，元素内容的语言代码，很少使用。
 dir，语言的方向，值为"ltr"（left-to-right，从左至右）或"rtl"（right-to-left，从右至左） ，也很少使用。
 className，与元素的 class 特性对应，即为元素指定的 CSS 类。没有将这个属性命名为 class，是因为 class 是 ECMAScript 的保留字。

var div = document.getElementById("myDiv");
alert(div.id); //"myDiv""
alert(div.className); //"bd"
alert(div.title); //"Body text"
alert(div.lang); //"en"
alert(div.dir); //"ltr"

div.id = "someOtherId";
div.className = "ft";
div.title = "Some other text";
div.lang = "fr";
div.dir ="rtl";

1.3.2 取得特性

var div = document.getElementById("myDiv");
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")); //"bd"
alert(div.getAttribute("title")); //"Body text"
alert(div.getAttribute("lang")); //"en"
alert(div.getAttribute("dir")); //"ltr"

var value = div.getAttribute("my_special_attribute");

alert(div.id); //"myDiv"
alert(div.my_special_attribute); //undefined（ IE 除外）
alert(div.align); //"left"

• 在 IE7 及以前版本中，通过 getAttribute()方法访问 style 特性或 onclick 这样的事件处理特性时，返回的值与属性的值相同。
  换句话说， getAttribute("style")返回一个对象，而 getAttribute("onclick")返回一个函数。
  虽然 IE8 已经修复了这个bug，但不同IE版本间的不一致性，也是导致开发人员不使用getAttribute()访问HTML特性的一个原因。

1.3.3 设置特性

div.setAttribute("id", "someOtherId");
div.setAttribute("class", "ft");
div.setAttribute("title", "Some other text");
div.setAttribute("lang","fr");
div.setAttribute("dir", "rtl");

div.id = "someOtherId";
div.align = "left";

//不过，像下面这样为 DOM 元素添加一个自定义的属性，该属性不会自动成为元素的特性。
div.mycolor = "red";
alert(div.getAttribute("mycolor")); //null（ IE 除外）

div.removeAttribute("class");

1.3.4 attributes 属性

 getNamedItem(name)：返回 nodeName 属性等于 name 的节点；
 removeNamedItem(name)：从列表中移除 nodeName 属性等于 name 的节点；
 setNamedItem(node)：向列表中添加节点，以节点的 nodeName 属性为索引；
 item(pos)：返回位于数字 pos 位置处的节点。

var id = element.attributes.getNamedItem("id").nodeValue;
var id = element.attributes["id"].nodeValue;

element.attributes["id"].nodeValue = "someOtherId";

var oldAttr = element.attributes.removeNamedItem("id");

element.attributes.setNamedItem(newAttr);

function outputAttributes(element){
var pairs = new Array(),
attrName,
attrValue,
i,
len;
for (i=0, len=element.attributes.length; i < len; i++){
attrName = element.attributes[i].nodeName;
attrValue = element.attributes[i].nodeValue;
if (element.attributes[i].specified) {
pairs.push(attrName + "="" + attrValue + """);
}
}
return pairs.join(" ");
}

1.3.5 创建元素

var div = document.createElement("div");
div.id = "myNewDiv";
div.className = "box";
document.body.appendChild(div);

var div = document.createElement("<div id="myNewDiv" class="box">");

if (client.browser.ie && client.browser.ie <=7){
//创建一个带 name 特性的 iframe 元素
var iframe = document.createElement("<iframe name="myframe">");
//创建 input 元素
var input = document.createElement("<input type="checkbox">");
//创建 button 元素
var button = document.createElement("<button type="reset">");
//创建单选按钮
var radio1 = document.createElement("<input type="radio" name="choice" "＋
"value="1">");
var radio2 = document.createElement("<input type="radio" name="choice" "＋
"value="2">");
}

1.3.6 元素的子节点

for (var i=0, len=element.childNodes.length; i < len; i++){
if (element.childNodes[i].nodeType == 1){
//执行某些操作
}
}

• Item 1


• Item 2


• Item 3

var ul = document.getElementById("myList");
var items = ul.getElementsByTagName("li");

• 要注意的是，这里
  的后代中只包含直接子元素。不过，如果它包含更多层次的后代元素，
  那么各个层次中包含的
  • 元素也都会返回。

  1.4 Text 类型

   nodeType 的值为 3；
   nodeName 的值为"#text"；
   nodeValue 的值为节点所包含的文本；
   parentNode 是一个 Element；
   不支持（没有）子节点。

   appendData(text)：将 text 添加到节点的末尾。
   deleteData(offset, count)：从 offset 指定的位置开始删除 count 个字符。
   insertData(offset, text)：在 offset 指定的位置插入 text。
   replaceData(offset, count, text)：用 text 替换从 offset 指定的位置开始到 offset+ count 为止处的文本。
   splitText(offset)：从 offset 指定的位置将当前文本节点分成两个文本节点。
   substringData(offset, count)：提取从 offset 指定的位置开始到 offset+count 为止处的字符串。

  
  

  
  
  
  
  
  
  Hello World!

  var textNode = div.firstChild; //或者 div.childNodes[0]
  //在取得了文本节点的引用后，就可以像下面这样来修改它了。
  div.firstChild.nodeValue = "Some other message";

  //输出结果是"Some <strong>other</strong> message"
  div.firstChild.nodeValue = "Some other message";

  1.4.1 创建文本节点

  var textNode = document.createTextNode("Hello world!");

  var element = document.createElement("div");
  element.className = "message";
  var textNode = document.createTextNode("Hello world!");
  element.appendChild(textNode);
  document.body.appendChild(element);

  var element = document.createElement("div");
  element.className = "message";
  var textNode = document.createTextNode("Hello world!");
  element.appendChild(textNode);
  var anotherTextNode = document.createTextNode("Yippee!");
  element.appendChild(anotherTextNode);
  document.body.appendChild(element);

  • 如果两个文本节点是相邻的同胞节点，那么这两个节点中的文本就会连起来显示，中间不会有空格。

  1.4.2 规范化文本节点

  //normalize()
  var element = document.createElement("div");
  element.className = "message";
  var textNode = document.createTextNode("Hello world!");
  element.appendChild(textNode);
  var anotherTextNode = document.createTextNode("Yippee!");
  element.appendChild(anotherTextNode);
  document.body.appendChild(element);
  alert(element.childNodes.length); //2
  element.normalize();
  alert(element.childNodes.length); //1
  alert(element.firstChild.nodeValue); // "Hello world!Yippee!"

  1.4.3 分割文本节点

  var element = document.createElement("div");
  element.className = "message";
  var textNode = document.createTextNode("Hello world!");
  element.appendChild(textNode);
  document.body.appendChild(element);
  var newNode = element.firstChild.splitText(5);
  alert(element.firstChild.nodeValue); //"Hello"
  alert(newNode.nodeValue); //" world!"
  alert(element.childNodes.length); //2

  • 分割文本节点是从文本节点中提取数据的一种常用 DOM 解析技术。

  1.5 Commnet 类型

   nodeType 的值为 8；
   nodeName 的值为"#comment"；
   nodeValue 的值是注释的内容；
   parentNode 可能是 Document 或 Element；
   不支持（没有）子节点。

  
  var div = document.getElementById("myDiv");
  var comment = div.firstChild;
  alert(comment.data); //"A comment"

  var comment = document.createComment("A comment ");

  • Comment 类型与 Text 类型继承自相同的基类，因此它拥有除 splitText()之外的所有字符串操作方法。
    与 Text 类型相似，也可以通过 nodeValue 或 data 属性来取得注释的内容。

  1.6 CDATASection 类型

   nodeType 的值为 4；
   nodeName 的值为"#cdata-section"；
   nodeValue 的值是 CDATA 区域中的内容；
   parentNode 可能是 Document 或 Element；
   不支持（没有）子节点。

  //CDATA 区域只会出现在 XML 文档中，因此多数浏览器都会把 CDATA 区域错误地解析为 Comment或 Element。
  

  • CDATASection 类型只针对基于 XML 的文档，表示的是 CDATA 区域。与 Comment 类似，
    CDATASection 类型继承自 Text 类型，因此拥有除 splitText()之外的所有字符串操作方法。

  1.7 DocumentType 类型

   nodeType 的值为 10；
   nodeName 的值为 doctype 的名称；
   nodeValue 的值为 null；
   parentNode 是 Document；
   不支持（没有）子节点。

  
  DocumentType 的 name 属性中保存的就是"HTML"：
  alert(document.doctype.name); //"HTML"

  1.8 DocumentFragment 类型

   nodeType 的值为 11；
   nodeName 的值为"#document-fragment"；
   nodeValue 的值为 null；
   parentNode 的值为 null；
   子节点可以是 Element、 ProcessingInstruction、 Comment、 Text、 CDATASection 或 EntityReference。

  var fragment = document.createDocumentFragment();

  
  //假设我们想为这个
  元素添加 3 个列表项。如果逐个地添加列表项，将会导致浏览器反复渲染（呈现）新信息。
  //为避免这个问题，可以像下面这样使用一个文档片段来保存创建的列表项，然后再一次性将它们添加到文档中。
  var fragment = document.createDocumentFragment();
  var ul = document.getElementById("myList");
  var li = null;
  for (var i=0; i < 3; i++){
  li = document.createElement("li");
  li.appendChild(document.createTextNode("Item " + (i+1)));
  fragment.appendChild(li);
  }
  ul.appendChild(fragment);

  1.9 Attr 类型

   nodeType 的值为 2；
   nodeName 的值是特性的名称；
   nodeValue 的值是特性的值；
   parentNode 的值为 null；
   在 HTML 中不支持（没有）子节点；
   在 XML 中子节点可以是 Text 或 EntityReference。

  //Attr 对象有 3 个属性： name、 value 和 specified。其中， name 是特性名称（与 nodeName 的值相同），
  //value 是特性的值（与 nodeValue 的值相同），而 specified 是一个布尔值，用以区别特性是在代码中指定的，还是默认的。
  var attr = document.createAttribute("align");
  attr.value = "left";
  element.setAttributeNode(attr);
  alert(element.attributes["align"].value); //"left"
  alert(element.getAttributeNode("align").value); //"left"
  alert(element.getAttribute("align")); //"left"

  • 我们并不建议直接访问特性节点。实际上，使用 getAttribute()、setAttribute() 和 removeAttribute()方法远比操作特性节点更为方便。

  2. DOM 操作技术

  2.1 动态脚本

  function loadScript(url){
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = url;
  document.body.appendChild(script);
  }
  loadScript("client.js");

  function loadScriptString(code){
  var script = document.createElement("script");
  script.type = "text/javascript";
  try {
  script.appendChild(document.createTextNode(code));
  } catch (ex){
  script.text = code;
  }
  document.body.appendChild(script);
  }
  下面是调用这个函数的示例：
  loadScriptString("function sayHi(){alert('hi');}");

  2.2 动态样式

  var link = document.createElement("link");
  link.rel = "stylesheet";
  link.type = "text/css";
  link.href = "style.css";
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);

  function loadStyleString(css){
  var style = document.createElement("style");
  style.type = "text/css";
  try{
  style.appendChild(document.createTextNode(css));
  } catch (ex){
  style.styleSheet.cssText = css;
  }
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(style);
  }
  loadStyleString("body{background-color:red}");

  2.3 操作表格

  
  
  
  
  
  
  
  
  
  
  
  

  Cell 1,1	Cell 2,1
  Cell 1,2	Cell 2,2

  //创建 table
  var table = document.createElement("table");
  table.border = 1;
  table.width = "100%";
  //创建 tbody
  var tbody = document.createElement("tbody");
  table.appendChild(tbody);
  //创建第一行
  tbody.insertRow(0);
  tbody.rows[0].insertCell(0);
  tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
  tbody.rows[0].insertCell(1);
  tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));
  //创建第二行
  tbody.insertRow(1);
  tbody.rows[1].insertCell(0);
  tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
  tbody.rows[1].insertCell(1);
  tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));
  //将表格添加到文档主体中
  document.body.appendChild(table);

  2.4 使用 NodeList

  var divs = document.getElementsByTagName("div"),
  i,
  div;
  for (i=0; i < divs.length; i++){
  div = document.createElement("div");
  document.body.appendChild(div);
  }

  var divs = document.getElementsByTagName("div"),
  i,
  len,
  div;
  for (i=0, len=divs.length; i < len; i++){
  div = document.createElement("div");
  document.body.appendChild(div);
  }

  3. 小结

  •  最基本的节点类型是 Node，用于抽象地表示文档中一个独立的部分；所有其他类型都继承自Node。
  •  Document 类型表示整个文档，是一组分层节点的根节点。在 JavaScript 中， document 对象是
    Document 的一个实例。使用 document 对象，有很多种方式可以查询和取得节点。
  •  Element 节点表示文档中的所有 HTML 或 XML 元素，可以用来操作这些元素的内容和特性。
  •  另外还有一些节点类型，分别表示文本内容、注释、文档类型、 CDATA 区域和文档片段。
  • 访问 DOM 的操作在多数情况下都很直观，不过在处理