JavaScript DOM の高度なメソッド_基礎知識

DOM 自体には、要素ノードを表す Element タイプやテキスト ノードを表す Text タイプなど、多くのタイプがあります。

1 つの DOM タイプ

タイプ名 説明

ノードは、IE ではサポートされていないすべてのタイプの値の統一インターフェイスを表します。 Document はドキュメントのタイプを表します。
要素は要素のノード タイプを表します。
テキストはテキスト ノード タイプを表します。
Comment ドキュメント内のコメントの種類を表します。
CDATASection は CDATA 領域のタイプを表します。
DocumentType はドキュメント宣言のタイプを表します。
DocumentFragment はドキュメントフラグメントのタイプを表します。
Attr は属性ノードのタイプを表します。

1.ノードタイプ

DOM レベル 1 は、DOM 内のすべてのノード タイプによって実装される Node インターフェイスを定義します。 この Node インターフェイスは、JavaScript の Node タイプとして実装されます。

IE を除き、このタイプは他のすべてのブラウザでアクセスできます。

2.文書タイプ

//ドキュメント タイプはドキュメント、またはドキュメントのルート ノードを表します。このノードは非表示であり、特定の要素タグがありません。 ドキュメント; // ドキュメント;

document.nodeType; // 9;タイプ値;

document.childNodes[0] // 最初の子ノード オブジェクト;
; document.childNodes[1] // HTMLHtmlElement;
;
// 100db36a723c770d327fc0aef2ce13b1 タグの要素ノード オブジェクト HTMLHtmlElement を直接取得したい場合は、documentElement を直接使用できます。 document.documentElement; // HTMLHtmlElement;

// 以前は 6c04bd5ca3fcae76e30b72ad730ca86d タグを取得する必要があることがよくありました: document.getElementsByTagName('body')[0];

document.body; // HTMLBodyElement;

// 100db36a723c770d327fc0aef2ce13b1 の前にドキュメント宣言があります: 1a309583e26acea4f04ca31122d8c535 はブラウザの最初のノードとして処理されます。 document.doctype; // DocumentType;

// Document には、タスクを迅速に正確に処理するのに役立ついくつかのレガシー プロパティとオブジェクト コレクションがあります。 // 属性

document.title; //b2386ffb911b14667cb8f0f91ea547a7

の値を取得および設定します。 document.URL; // URL パスを取得します;
document.domain; // ドメイン名を取得します;

// ページに他のサブドメインのフレームまたはインライン フレームが含まれている場合、document.domain

を設定できると非常に便利です。 // クロスドメインのセキュリティ制限により、異なるサブドメインのページは JavaScript を介して通信できません。 // 各ページの document.domain を同じ値に設定すると、これらのページは相互に JavaScript オブジェクトにアクセスできます。 document.referrer; // 現在のページにリンクされているページの URL を保存します。 // オブジェクトのコレクション
document.anchors; // ドキュメント内の name 属性を持つ要素のコレクションを取得します;
document.links; // ドキュメント内の href 属性を持つ 3499910bf9dac5ae3c52d5ede7383485 要素のコレクションを取得します。 document.forms; // ドキュメント内の ff9c23ada1bcecdd1a0fb5d5a0f18437 要素のコレクションを取得します。 document.images; // ドキュメント内の a1f02c36ba31691bcfe87b2722de723b 要素のコレクションを取得します。

3.要素の種類



//要素タイプは、HTML で要素ノードを表すために使用されます。前の章で、要素ノードの検索/作成などの操作が紹介されました。
// 要素ノードの nodeType は 1、nodeName は要素のタグ名です。 // 要素ノード オブジェクトは、IE 以外のブラウザではその特定の要素ノードのオブジェクト タイプを返すことができます。 要素名 Type
HTML HTMLHtmlElement;
DIV HTMLDivElement;
BODY HTMLBodyElement;
P HTMLParamElement;

4.テキストタイプ

5.Comment类型

 Comment类型表示文档中的注释,nodeType是8,nodeName是#comment,nodeValue是注释的内容;
     var box = document.getElementById('box');
     alert(box.firstChild);                        // Comment;

6.Attr类型
 Attr类型表示文档元素中的属性;nodeType为11;nodeName为属性名,nodeValue为属性值;详细内容在上一章;

二 DOM扩展
1.呈现模式

// 从IE6开始区分标准模式和混杂模式(怪异模式),主要看文档的声明;
// IE为document对象添加了一个名为compatMode属性,这个属性可以识别IE浏览器的文档处于什么模式;
// 如果是标准模式,则返回CSS1Compat;如果是混杂模式则返回BackCompat;
  if(document.compatMode == 'CSS1Compat'){
    alert(document.documentElement.clientWidth);
  }else{
    alert(document.body.clientWidth);
  }

2.滚动

 DOM提供了一些滚动页面的方法
   document.getElementById('box').scrollIntoView();        // 设置指定可见;

3.children属性

 由于子节点空白问题,IE和其他浏览器解释不一致;如果只想得到有效子节点,可以使用children属性;这个属性是非标准的;
     var box = docuemnt.getElementById('box');
     alert(box.children.length);                             // 得到有效子节点数目;

4.contains()方法

 判断一个节点是不是另一个节点的后代,可以使用contains()方法;
    var box = document.getElementById('box');
    alert(box.contains(box.firstChild));                    // =>true;

三 DOM操作内容
1.innerText属性

document.getElementById('box').innerText;        // 获取文本内容(如有html直接过滤掉);
  document.getElementById('box').innerText = 'Mr.Lee';  // 设置文本(如有html转义);
  // PS:除了Firefox之外,其他浏览器均支持这个方法;Firefox的DOM3级提供了另外一个类似的属性:textContent;
  // 兼容方法
  function getInnerText(element){
    return (typeof element.textContent == 'string')?element.textContent:element.innerText;
  }
  function setInnerText(element,text){
    if(typeof element.textContent == 'string'){
      element.textContent = text;
    }else{
      element.innerText = text;
    }
  }

2.innerHTML属性

 innerHTML属性可以解析HTML;
     document.getElementById('box').innerHTML;                   // 获取文本(不过滤HTML);
     document.getElementById('box').innerHTML = 'a4b561c25d9afb9ac8dc4d70affff4191230d36329ec37a2cc24d42c7229b69747a';    // 加粗的123;
 虽然innerHTML可以插入HTML,但本身还是有一定的限制,也就是所谓的作用域元素,离开这个作用域就无效了;
    box.innerHTML = "3f1c4e4b6b16bbbd69b2ee476dc4f83aalert('Lee');2cacc6d41bbb37262a98f745aa00fbf0";           // 3f1c4e4b6b16bbbd69b2ee476dc4f83a元素不能被执行;
    box.innerHTML = "c9ccee2e6ea535a969eb3f532ad9fe89background:red;531ac245ce3e4fe3d50054a55f265927";           // c9ccee2e6ea535a969eb3f532ad9fe89元素不能被执行;

3.outerText

 outerText在取值的时候和innerText一样,同时Firefox不支持;
 而且赋值方法相当危险,它不单替换文本内容,还将元素直接抹去;
     var box = document.getElementById('box');
     box.outerText = 'a4b561c25d9afb9ac8dc4d70affff4191230d36329ec37a2cc24d42c7229b69747a';
     alert(document.getElementById('box'));                       // =>null; 不建议使用;

4.outerHTML

// outerHTML属性在取值和innerHTML一致,但和outerText一样,赋值之后将元素抹去;
  var box = document.getElementById('box');
  box.outerHTML = '123';
  alert(document.getElementById('box'));           // null;

// PS:关于最常用的innerHTML属性和节点操作方法的比较;在插入大量HTML标记时,使用innerHTML的效率明显要高很多;
// 因为在设置innerHTML时,会创建一个HTML解析器,这个解析器是浏览器级别的;因此执行JavaScript会快得多;
// 但是,创建和销毁HTML解析器也会带来性能损失,最好控制在最合理的范围内;
  for(var i=0; i<10; i++){
    ul.innerHTML = '<i>item</i>';      // 避免频繁;
  }
  // 完善
  for(var i=0; i<10; i++){
    a = '<li>item</i>';            // 临时保存;
  }
  ul.innerHTML = a;

四 小结

DOM是语言中立的API,用于访问和操作HTML和XML文档;
DOM1级将HTML和XML文档形象地看作一个层次化的节点树,可以使用JavaScript来操作这个节点树,进而改变底层文档的外观和结构;

DOM由各种节点构成,简要总结如下:

1.最基本的节点类型是Node,用于抽象地表示文档中一个独立的部分;所有其他类型都继承自Node;
2.Document类型表示整个文档,是一组分层节点的根节点;在JavaScript中,document对象是Document的一个实例;
使用document对象,有很多种方式可以查询和获取节点;
3.Element节点表示文档中的所有HTML或XML元素,可以用来操作这些元素的内容和属性;
4.另外还有一些节点类型,分别表示文本内容/注释/文档类型/CDATA区域和文档片段;