JavaScript DOMの基礎_基礎知識

 DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口);

 DOM描绘了一个层次化的节点树,运行开发人员可以添加/移除和修改页面的某一部分;

一 DOM介绍

 D(文档):可以理解为整个Web加载的网页文档;
 O(对象):可以理解为类似window对象之类的东西,可以调用属性和方法,这里说的是document对象;
 M(模型):可以理解为网页文档的树形结构;

1.节点

 加载HTML页面时,Web浏览器生成一个树形结构,用来表示页面内部结构;
 DOM将这种节点结构理解为由节点组成;
 html元素为根节点;head元素是html的子节点;meta元素和title元素之间是兄弟关系;

 
 2.节点种类:元素节点/文本节点/属性节点
eb47a3572d93e4bf98afb55cb24837c5测试Div16b28748ea4df4d9c2150843fecfba68
要素ノード => div;
属性ノード => title="要素属性"
テキスト ノード => テスト Div 2 要素の検索
W3C は、ノードを迅速に操作できるように、ノードを見つけるための比較的便利でシンプルなメソッドと属性を提供します。 DOM (Document Object Model) は、HTML および XML ドキュメントのドキュメント オブジェクト モデル、API (アプリケーション プログラム インターフェイス) です。

DOM は階層的なノード ツリーを表し、開発者はページの特定の部分を追加/削除したり、変更したりできます。

要素ノードの検索方法

メソッド getElementById() 特定の ID 要素のノードを取得します;
getElementsByTagName() 同じ要素のノードリストを取得します; getElementsByName() 同じ名前を持つノードのリストを取得します;
getAttribute() 特定の要素のノード属性の値を取得します;
setAttribute() 特定の要素のノード属性の値を設定します。
RemoveAttribute() は、特定の要素のノード属性を削除します。


1.getElementById()

//メソッドはパラメータを受け取ります: 要素の ID を取得します; // 対応する要素が見つかった場合は、その要素の HTMLDivElement オブジェクトを返します。存在しない場合は、null を返します。 Document.getElementById('box'); // [オブジェクト HTMLDivElement];

// getElementById() を通じて特定の要素ノードを取得すると、このノード オブジェクトが取得されます。 // このノード オブジェクトを通じて、その一連のプロパティにアクセスできます

(1). 要素ノードの属性にアクセスします
属性の説明
tagName 要素ノードのタグ名を取得します;
innerHTML 要素ノードのコンテンツを取得します。非 W3C DOM 仕様
Document.getElementById('box').tagName; // =>DIV;
Document.getElementById('box').innerHTML; // =>テストディビジョン;

(2).HTML 共通属性にアクセスする
属性の説明
要素ノードの ID 名;
title 要素ノードの title 属性値;

style スタイル CSS インライン スタイル属性値;

className CSS 要素のクラス;

document.getElementById('box').id; // =>id;
Document.getElementById('box').title; // タイトルを取得;

document.getElementById('box').style; // CSSStyleDeclaration オブジェクトを取得します;

Document.getElementById('box').style.color; // スタイル オブジェクトのカラー値、つまり要素行内に設定されたスタイル値を取得します。 Document.getElementById('box').style.color='red' // スタイル オブジェクトに色の値を設定します;

document.getElementById('box').className // クラスを取得;

Document.getElementById('box').className='pox' // クラスを設定します;

document.getElementById('box').bbb; // IE 以外ではサポートされていないカスタム属性の値を取得します。

2.getElementsByTagName()
//メソッドは、同じ要素名を持つノードのリストを格納するオブジェクト配列 HTMLCollection (NodeList) 配列を返します。 Document.getElementsByTagName('*'); // ワイルドカードを使用してすべての要素を取得します。
// PS: IE がワイルドカードを使用すると、ドキュメントの先頭にある HTML の仕様ステートメントが最初の要素ノードとして扱われます。
document.getElementsByTagName('li'); // =>[object HTMLCollection];すべての li 要素を取得します;

Document.getElementsByTagName('li').[0] // 最初の li 要素を取得します;

3.getElementsByName()

同じ名前 (名前) 設定を持つ要素を取得し、オブジェクト配列 HTMLCollection (NodeList) を返します。 Document.getElementsByName('add'); // name='add';

で入力要素のコレクションを取得します。 // PS: HTML で不正な属性については、JS によって得られる互換性が異なります。

// IE は正式な名前属性をサポートしていますが、カスタム属性との非互換性の問題が発生します。

4.getAttribute()

メソッドは要素の属性の値を取得します。 ただし、「.attr」を直接使用して属性値を取得する方法とは若干異なります;

Document.getElementById('box').getAttribute('mydiv') // カスタム属性値を取得します; Document.getElementById('box').mydiv; // カスタム属性値を取得します。IE でのみサポートされます。
5.setAttribute()

このメソッドは、要素に属性と値を設定します。属性名と値の 2 つのパラメーターを受け取ります。 属性自体がすでに存在する場合は上書きされます。
Document.getElementById('box').setAttribute('align','center') // 属性と値を設定します。

// PS: IE7 以前では、setAttribute() メソッドを使用してクラス属性とスタイル属性を設定しても効果はありません。

6.removeAttribute()
メソッドは HTML 属性を削除できます。 Document.getElementById('box').removeAttribute('style') // スタイル属性を削除します;

3 つの DOM ノード

1.node ノード属性
//ノードは要素ノード/属性ノードとテキスト ノードに分割できます。

// これらのノードには、nodeName/nodeType および nodeValue;

の 3 つの属性があります。 情報ノードの属性 ノードタイプ ノード名 ノードタイプ ノード値

要素1の要素名 null

属性 属性名 属性値2 属性値

テキストの内容

Document.getElementById('box').nodeType; // =>1;

2. 階層ノード属性

// 階層ノードは、親ノードと子ノード/兄弟ノードに分割できます。

// 要素ノードの 1 つを取得すると、階層ノード属性を使用して、その関連レベルのノードを取得できます。

ノード関係図

階層ノード属性
属性の説明
childNodes 現在の要素ノードのすべての子ノードを読み取ります;
firstChild 現在の要素ノードの最初の子ノードを読み取ります;
lastChild 現在の要素ノードの最後の子ノードを取得します;
ownerDocument ノードのドキュメント ルート ノードを取得します。これは document;
に相当します。 parentNode 現在のノードの親ノードを取得します;
previousSibling 現在のノードの前の兄弟ノードを取得します;
nextSibling 現在のノードの次の兄弟ノードを取得します;
属性 現在の要素ノードのすべての属性ノードのセットを取得します;

(1).childNodes 属性

属性は、特定の要素ノードのすべての子ノードを取得します。これらの子ノードには、要素ノードとテキスト ノードが含まれます。 PS: childNodes[n] を使用して子ノード オブジェクトを返す場合、HTMLElement;
などの要素の子ノードを返すことができます。 また、次のようなテキスト サブノードを返すこともあります。 要素のサブノードは、nodeName または tagName を使用してタグ名を取得できます。テキストのサブノードは、nodeValue
を使用して取得できます。 var box = document.getElementById('box');
for(var i=0; i 要素ノードであると判断し、要素ラベル名を出力します。 If(box.childNodes[i].nodeType === 1){
console.log('要素ノード:' box.childNodes[i].nodeName);
テキスト ノードであると判断し、テキスト コンテンツを出力します。
}else if(box.childNodes[i].nodeType ===3){
console.log('テキスト ノード:' box.childNodes[i].nodeValue);
}
}
PS1: テキスト ノードを取得するとき (重要な点は、それが要素ノードではないということです)、テキスト コンテンツを出力するために innerHTML 属性を使用することはできません。 この非標準属性は、要素ノードに含まれるテキストを出力する前に要素ノードを取得するために使用する必要があります。 alert(box.innerHTML); innerHTML と nodeValue;
の最初の違い
PS2: innerHTML と nodeValue に値が割り当てられている場合、nodeValue はテキストに含まれる HTML を特殊文字にエスケープし、それによってプレーン テキストを形成する効果を実現します。 innerHTML はテキスト内の特殊文字を解析します。 box.childNodes[0].nodeValue = '8e99a69fbe029cd4e2b854e244eab143abc128dba7a3a77be0113eb0bea6ea0a5d0';
box.innerHTML = '8e99a69fbe029cd4e2b854e244eab143abc128dba7a3a77be0113eb0bea6ea0a5d0';
(2).firstChild 属性と lastChild 属性
firstChild = childNodes[0]; 現在の要素の最初の子ノードを取得します;

lastChild = childNodes[box.childNodes.length-1]; 現在の要素の最後の子ノードを取得します;

(3).ownerDocument プロパティ
ノードのドキュメント オブジェクト ルート ノードを返します。返されるオブジェクトは document;
と同等です。 alert(box.ownerDocument === document); // =>true;ルートノード;

(4).parentNode/previousSibling/nextSibling プロパティ

parentNode: このノードの親ノードを返します。
previousSibling: このノードの前の兄弟ノードを返します
nextSibling: このノードの次の兄弟ノードを返します
alert(box.parentNode.nodeName); // 親ノードのラベル名を取得します;
alert(box.firstChild.nextSibling); // 2 番目のノードを取得します;
alert(box.lastChild.previousSibling); // 最後から 2 番目のノードを取得します;

(5).attributes 属性
属性は、ノードの属性ノード コレクションを返します。
alert(document.getElementById('box').attributes); // =>NamedNodeMap;

(6) 空白のテキスト ノードを無視します

。

  var body = document.getElementsByTagName('body')[0];// 获取body元素节点;  
  alert(body.childNodes.length);           // 非IE=7;  IE=3;

  // PS:在非IE中,标准的DOM具有识别空白文本节点的功能,而IE自动忽略了;
  function filterSpaceNode1(nodes){
    // 新数组;
    var ret = [];
    for(var i=0; i<nodes.length; i++){
      // 如果识别到空白文本节点,就不添加到数组;
      if(nodes[i].nodeType ===3 && /^\s+$/.test(nodes[i].nodeValue)) continue;
      // 把每次的元素节点,添加到数组里;
      ret.push(nodes[i]);
    }
    return ret;
  }

  // PS:上面的方法,采用忽略空白文件节点的方法,把得到的元素节点累加到数组里返回;
  function filterSpaceNode2(nodes){
    for(var i=0; i<nodes.length; i++){
      if(nodes[i].nodeType ===3 && /^\s+$/.test(nodes[i].nodeValue)){
        // 得到空白节点之后,一道父节点上,删除子节点;
        nodes[i].parentNode.removeChild(nodes[i]);
      }
    }
    return nodes;
  }

  // PS:firstChild等方法在获取节点时遇到空白节点,处理方法;
  function removeWhileNode(nodes){
    for(var i=0; i<nodes.childNodes.length; i++){
      if(nodes.childNodes[i].nodeType ===3 && /^\s+$/.test(nodes.childNodes[i].nodeValue)){
        nodes.childNodes[i].parentNode.removeChild(nodes.childNodes[i]);
      }
    }
    return nodes;
  }

4 つのノードの操作
// DOM はノードを検索するだけでなく、ノードの作成/ノードのコピー/ノードの挿入/ノードの削除、ノードの置換も行うことができます

ノードの操作方法
メソッドの説明
write() このメソッドは、ドキュメントに任意の文字列を挿入できます。
createElement() 要素ノードを作成します;
appendChild() 新しいノードを子ノード リストの末尾に追加します。
createTextNode() ファイル ノードを作成します;
insertBefore() 新しいノードを前に挿入します;
replaceChild() 古いノードを新しいノードに置き換えます;
cloneNode() ノードをコピーします;
RemoveChild() ノードを削除します;

(1).write() メソッド
//write() メソッドはドキュメントに任意の文字列を挿入できます;
document.write('e388a4556c0f65e1904146cc1a846beeこれは段落です!94b3e26ee717c64999d7867364b1b4a3') // 解析されたテキスト;

(2).createElement() メソッド
createElement() メソッドは要素ノードを作成できます。 document.createElement('p'); // [オブジェクト HTMLParagraphElement];

(3).appendChild() メソッド
appendChild() メソッドは、ノードの子ノード リストの末尾に新しいノードを追加します。 var box = document.getElementById('box'); var p = document.createElement('p'); // 新しい要素ノードを作成します
box.appendChild(p); // 新しい要素ノード e388a4556c0f65e1904146cc1a846bee を子ノードの末尾に追加します。

(4).createTextNode() メソッド

このメソッドはテキスト ノードを作成します。 var text = document.createTextNode('段落'); p.appendChild(text); // 子ノードの末尾にテキストノードを追加します;

(5).insertBefore() メソッド

// 该方法可以把节点添加到指定节点的前面;
  box.parentNode.insertBefore(p,box);      // 在<div>之前添加一个<p>;
  box.insertBefore(newNode,null);        // 将newNode添加到box自列表的最后节点;

  //PS:insertBefore()方法可以给当前元素的前面创建一个节点,但没有提供给当前元素的后面创建一个节点;
  function insertAfter(newElement,targetElement){
    // 得到父节点;
    var parent = targetElement.parentNode;
    // 如果最后一个子节点是当前元素,那么直接添加即可;
    if(parent.lastChild === targetElement){
      parent.appendChild(newElement);
    }else{
    // 否则,在当前节点的下一个节点之前添加;达成在当前节点后面添加节点的需求;
      parentNode.insertBefore(newElement,targetElement.nextSibling);
    }
  }

(6).replaceChild() メソッド

このメソッドは、ノードを指定されたノードに置き換えることができます。

box.parentNode.replaceChild(p,box); // dc6dce4a544fdca2df29d5ac0ea9906b を e388a4556c0f65e1904146cc1a846bee に置き換えます。

(7).cloneNode() メソッド

// このメソッドは子ノードをコピーできます。コピー後に返されるノードのコピーはドキュメントに属しますが、その親ノードは指定されていません。 // パラメーターは true です。ディープ コピーを実行します。これは、ノードとその子ノード ツリー全体をコピーします。 // パラメーターは false です。浅いコピーを実行し、ノード自体のみをコピーします。 var box = document.getElementById('box'); var clone = box.firstChild.cloneNode(true); // 最初の子ノードを取得します。true はコンテンツをコピーすることを意味します。 box.appendChild(clone); // 子ノードリストの最後に追加します;

(8).removeChild() メソッド

このメソッドは、指定されたノードを削除します。
box.parentNode.removeChild(box);

概要: 次の章で~