Dom | Chow's Blog

1.节点层次

a.Node类型

JavaScript 中的所有节点类型都继承自 Node 类型.因此所有节点类型都共享着相同的基本属性和方法。
对于元素节点， nodeName中始终保存的都是元素的标签名，而nodeValue始终为null。

1）.节点关系

每个节点都有一个childNodes属性，其中保存着一个NodeList对象。
NodeList是一组类数组对象；用于保存一组有序节点；有length属性,但是它不是Array的实例；
访问NodeList中的节点：[] 或者是 item()

1
2
3

var firstChildNode = someNode.childNodes[0];
var secondChildNode = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

可以将 NodeList对象 转换成数组。

function  coverNodelistToArray( nodes ){
    var array = null;
    try{
        array = Array.prototype.slice.call( nodes, 0 );   // ie8中不能实现， 因此必须手动进行创建数组
    }catch(ex){
        array = new Array();

        for( var i = 0; i < nodes.length; i++ ){
              array.push( nodes[i] );
        }
    }

    return array;
}

node关系图

关系指针都是只读的。

操作节点

i> appendChild ：用于向 childNodes 列表末尾添加一个节点。添加节点后，childNodes 的新增节点、父节点和以前的最后的一个子节点的关系指针都会相应地得到更新。更新完成后，返回新增的节点。

1
2
3

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

如果传入到appendChild() 中的节点已经是文档的一部分，结果该节点从原来的位置将会转移到新位置。

1
2
3

var returnNode = someNode.appendChild( someNode.firstChild );
returnNode == someNode.firstChild;  // false
returnNode == someNode.lastChild;  // true

ii> insertBefore : 参数一要插入的节点，参数二参考位置的节点。将会返回插入的节点。如果参数二为null,那么插入节点将会被添加到最后一个子节点。

iii> replaceChild : 参数一要插入的节点，参数二要被替换的节点。将会返回被替换的节点，并从文档中删除。

v> removeChild ：要删除的节点将会被返回。最后这两个方法其实在文档中还存在，只是没有了位置。

vi> cloneNode : 参数布尔值，表示是否进行深度复制， true 表示深度复制，包括 本身 和 整个子节点树 false 表示浅复制，只复制 节点本身

vii> normalize : 由于解析器的实现差异，可能会出现文本节点不包含文本（删除它），或者接连出现两个文本节点出现（合并为一个文本节点）

b.Document类型

在浏览器中 document对象 是HTMLDocument( 继承自 Document 类型) 的一个实例，表示整个html页面。 document 是 window 的一个属性

– nodeType ： 9
– nodeName : “#document”
– nodeValue : null
– parentNode : null

Document访问其子节点的方式：（1）通过 documentElement 属性，这个属性始终指向HTML页面中的元素（2）通过 childNodes
(3)document 还有一个 body 属性，直接指向元素

i> 文档信息
– title ：可访问可修改。
– URL ：包含页面完整的URL（即地址栏中显示的URL）
– domain : 只包含页面的域名，可设置
– referrer : 保存着链接到当前页面的那个页面的URL。

如果URL中包含一个子域名，例如 ditu.baidu.com, 那么只能将 domain 设置为 “baidu.com” ( URL中包含 www，也是如此 )。不能将这个属性设置为 URL 中不包含的域，否则出错。

由于跨域安全限制，来自不同子域的页面无法通过 JavaScript 通信。而通过将每个页面的 document.domain 设置为相同的值，这些页面就可以互相访问对方包含的 JavaScript 对象了。例如，假设有一个页面加载自 www.wrox.com，其中包含一个内嵌框架，框架内的页面加载自 p2p.wrox.com。由于 document.domain 字符串不一样，内外两个页面之间无法相互访问对方的 JavaScript 对象。但如果将这两个页面的 document.domain 值都设置为”wrox.com”，它们之间就可以通信了。

ii> 查找元素
方法： getElementById() 和 getElementsByTagName()

IE7 及较低版本还为此方法添加了一个有意思的“怪癖”： name 特性与给定 ID 匹配的表单元素（<input>、<textarea>、 <button>及<select>）也会被该方法返回。如果有哪个表单元素的 name 特性等于指定的 ID，而且该元素在文档中位于带有给定 ID 的元素前面，那么 IE 就会返回那个表单元素。

1 2	<input type="text" name="myElement" value="Text field"> <div id="myElement">A div</div> // 结果会返回<input>元素

iii> 文档写入
– write() ：会在文档原样写入
– writeIn() ：在字符串末尾添加一个换行符（ \n ）

这两个方法在页面被加载的过程中使用。

<html>
  <head>
      <title>document.write() Example</title>
  </head>
  <body>
    <p>The current date and time is:

        <script type="text/javascript">
          document.write("<strong>" + (new Date()).toString() + "</strong>");
        </script>

    </p>
</body>
</html>

动态地包含外部资源

<html>
    <head>
        <title>document.write() Example 2</title>
    </head>
    <body>
        <script type="text/javascript">
            document.write("<script type=\"text/javascript\" src=\"file.js\">" +
            "</script>");
        </script>
</body>
</html>

即使这个文件看起来没错，但字符串”“将被解释为与外部的