JavaScriptシリーズ(23):JavaScriptとDOM(上)--初心者にも適用

23175 ワード

javascript xhtml

ドキュメントオブジェクトモデルDocument Object Model
DOM(Document Object Model、ドキュメントオブジェクトモデル)は、JavaScriptとのコンテンツインタラクションによるAPIである.JavascriptとDOMは一般的に全体としてよく使われています.Javascriptは通常DOM操作とインタラクションに使用されるからです.

深入理解JavaScript系列（23）：JavaScript与DOM（上）——也适用于新手_第1张图片

主な内容:http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-series-lesson-1/
DOMについては、いくつかの知識に注意する必要があります:1.Windowsオブジェクトはグローバルオブジェクトとして、つまりWindowsを通じてグローバルオブジェクトにアクセスできます.

プロパティは、オブジェクトの下に変数として格納され、ページに作成されたすべてのグローバルオブジェクトがwindowオブジェクトのプロパティになります.

メソッドは、オブジェクトの下に関数として格納されます.左右の関数がwindowオブジェクトの下に格納されるため、メソッドとも呼ばれます.

2.DOMは、nodeノードを介して構成されたWebドキュメントの階層を作成します.ここでは、いくつかのDOM nodeタイプがあります.最も重要なのは、Element、Text、Documentです.

Elementノードはページに要素が表示されているので、段落要素()があれば、このDOMノードからアクセスできます.

Textノードはページに表示されているすべてのテキスト関連要素なので、段落にテキストが入っていればDOMのTextノードを通じて直接このテキスト

にアクセスできます.

Documentノードは、DOMのルートノードであるドキュメント全体を表します.

3.各エンジンはDOM規格の実装に対して少し異なる.例えば、Firefoxブラウザが使用するGeckoエンジンは良好な実装(W 3 C仕様を完全に遵守していないにもかかわらず)を持っているが、IEブラウザが使用するTridentエンジンの実装は不完全でバグもあり、開発者に多くの問題をもたらしている.
Firefoxを使用している場合は、すぐにFirebugプラグインをダウンロードすることをお勧めします.DOM構造を理解するのに役立ちます.
Web上のJavaScript
Script要素
WebサイトのページでJavaScriptを使用する場合は、SCRIPT要素を使用する必要があります.

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>JavaScript!title>  
head>  
<body>        
<script type="text/javascript">  
// 
      
// ]]>  
            script>        
body>  
html>

上記のコードは、厳密にはSCRIPTのTYPE属性をアプリケーション/javascriptに設定する必要がありますが、IEはこれをサポートしていないため、普段はtext/javascriptと書くかtypeを直接削除しなければなりません.また、SCRIPT要素のコメント行//を見ると、ブラウザはXHTMLラベルに解析されません.
Deferプロパティ
SCRIPT要素で宣言されたコードは、ページのロード時に実行されます.唯一の例外は、SCRIPT要素にdeferプロパティを追加することです.deferプロパティはブラウザにHTMLドキュメントをロードしてからJSコードを実行するように伝えますが、このプロパティはIEでしか使用できません.
外部スクリプトの接続
外部スクリプトを理解するには、SRCプロパティをSCRIPTで簡単に使用すればいいだけです.個別のJSファイルを使用するメリットは、キャッシュできることです.また、CDATAの問題も心配する必要はありません.

<script type="text/javascript" src="my-script.js">script>

JavaScript必須
DOMを続ける前に、JavaScriptの核心的な必須知識を復習してみましょう.まだ知らないなら、大丈夫です.この章では少し時間をかけて振り返ります.
JavaScriptには、Number,String,Boolean,Object,Undefind and Nullといういくつかのデータ型があります.
一方通行の注釈は二重スラッシュ//を使用し、二重スラッシュの後ろのすべての文字は注釈され、複数行は/*と*/で囲まれていることに注意してください.
Number
JavaScriptではすべてのNumberが浮動小数点型で、数値変数を宣言するときは引用符を使用しないでください.

//  ：  var     
var leftSide = 100;  
var topSide = 50;  
var areaOfRectangle = leftSide * topSide; // = 5000

String
JavaScriptで文字列を宣言するのはとても簡単で、他の言語と同じように、JSでは一重引用符や二重引用符を使ってもいいです.

var firstPart = 'Hello';  
var secondPart = 'World!';  
var allOfIt = firstPart + ' ' + secondPart; // Hello World!  
// +        。

Boolean
ブールタイプは条件判断に使用され、ブールタイプはtrueとfalseの2つの値しかありません.論理オペレータを使用した比較は、ブール値を返します.

5 === (3 + 2); // = true  
//               
var veryTired = true;
//     
if (veryTired) {
//      
}

===比較オペレータでもあり、数値だけでなくタイプも比較されます.
Function
関数は特殊なオブジェクトです.

//   function           
function myFunctionName(arg1, arg2) {
//     
}

//            
function (arg1, arg2) {
// Function code goes here.  
}

//        ，                  
//          
myFunctionName(); //   
myFunctionName('foo', 'bar'); //    

//           

(function () {
//        
})();

Array
配列も特殊なオブジェクトです.値(またはオブジェクト)が含まれています.これらのデータにアクセスするには、数値インデックスを使用する必要があります.

// 2       

//    :  
var fruit = ['apple', 'lemon', 'banana'];

// Array    :  
var fruit = new Array('apple', 'lemon', 'banana');

fruit[0]; //    1  (apple)  
fruit[1]; //    2  (lemon)  
fruit[2]; //    3  (banana)

Object
オブジェクトはkey-valueの集合であり、配列と似ています.唯一の違いは、データごとに名前を定義できることです.

// 2     Object  

//    （   ）
var profile = {
    name: 'Bob',
    age: 99,
    job: 'Freelance Hitman'
};

//   Object    
var profile = new Object();
profile.name = 'Bob';
profile.age = 99;
profile.job = 'Freelance Hitman';

IF/Else文
JSで最も多く使われている文は条件文です.

var legalDrinkingAge = 21;  
var yourAge = 29;  

if ( yourAge >= legalDrinkingAge ) {   
    alert('You can drink.');  
} else {  
    alert('Sorry, you cannot drink.');

JavaScriptオペレータ
このページにアクセスして、すべてのJSオペレータを表示することをお勧めします.ここでは、いくつかの例を示します.

//     
var someMaths = 2 + 3 + 4 - 10 * 100 / 2;  

//     
if ( 2 == (5 - 3 ) { /*    */ } // ==       
      
//     
if ( 2 != (5 - 3 ) { /*    */ }   

//     （  ） 
2 === 2 //    2 == 2  
2 !== 3 //    2 != 3  
      
//   :  
var numberOfFruit = 9;  
numberOfFruit -= 2; //     "numberOfFruit = numberOfFruit - 2"  
numberOfFruit += 2; //     "numberOfFruit = numberOfFruit + 2"

Loopサイクル
Loopループは配列やオブジェクトのすべてのメンバーを巡るときに便利で、JavaScriptで最も多く使われているのはFORとWHILE文です.

var envatoTutSites = ['NETTUTS', 'PSDTUTS', 'AUDIOTUTS', 'AETUTS', 'VECTORTUTS'];

// WHILE  
var counter = 0;
var lengthOfArray = envatoTutSites.length;
while (counter < lengthOfArray) {
    alert(envatoTutSites[counter]);
    counter++; //    counter += 1;  
}

// FOR  
// i      ，       
for (var i = 0, length = envatoTutSites.length; i < length; i++) {
    alert(envatoTutSites[i]);
}

DOM本文
DOMノードへのアクセス
例として、HTMLにはテキストと無秩序なリストが含まれています.

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>JavaScript!title>  
head>  
<body>  

<p id="intro">My first paragraph...p>  

<ul>  
<li>List item 1li>  
<li>List item 1li>  
<li>List item 1li>  
<li>List item 1li>  
<li>List item 1li>  
ul>  

<script type="text/javascript">  
// 
  
// ]]>  
script>  

body>  
html>

上記の例では、getElementById DOMメソッドを使用してp段落にアクセスし、SCRIPTに次のコードを追加します.

var introParagraph = document.getElementById('intro');  
//      DOM  ，  DOM

変数introParagraphは現在、DOMノードに参照されています.コンテンツやプロパティをクエリーしたり、他の操作を削除したり、クローンしたり、DOMツリーの他のノードに移動したりすることができます.
ドキュメント上の任意の内容は、JavaScriptとDOM APIを使用してアクセスできます.同様に、上記の無秩序リストにもアクセスできます.唯一の問題は、この要素にID属性がないことです.IDであれば同じ方法を使用するか、次のgetElementsByTagName方式を使用することができます.

var allUnorderedLists = document.getElementsByTagName('ul');  
// 'getElementsByTagName'          
// -

getElementsByTagName
getElementsByTagNameメソッドはノードの集合を返します.配列と似ていてもlengthプロパティがあります.重要な特性はliveです.この要素に新しいli要素を追加すると、この集合が自動的に更新され、配列タイプにアクセスできるようになります.0から始めます.

//       : [0]  
var unorderedList = document.getElementsByTagName('ul')[0];

//      li  :  
var allListItems = unorderedList.getElementsByTagName('li');

//     
for (var i = 0, length = allListItems.length; i < length; i++) {
//       text  
    alert(allListItems[i].firstChild.data);
}

次の例では、DOMが取得した知識をより明確に示します.

深入理解JavaScript系列（23）：JavaScript与DOM（上）——也适用于新手_第2张图片

DOMシャトル
「シャトル」という言葉は主にDOMを通じてノードを検索することを記述するために使用され、DOM APIは多くのノード属性を提供し、ノードを上または下に検索します.
すべてのノードにはこれらのプロパティがあり、関連するnodeノードにアクセスできます.

Node.childNodes:単一要素の下にあるすべての直接サブノード要素にアクセスします.ループ可能なクラス配列オブジェクトです.このノードセットは、textノードや他の要素ノードなど、異なるタイプのサブノードを保護することができる.

Node.firstChild:'childNodes'配列の最初の項目('Element.childNodes[0]')と同じ効果で、ショートカットのみです.

Node.LastChild:'childNodes'配列の最後の項目('Element.childNodes[Element.childNodes.length-1])と同じ効果で、ショートカットのみです.shortcut.

Node.parentNode:現在のノードの親ノードにアクセスします.親ノードは1つしかありません.祖先ノードは「Node.parentNode.parentNode'の形式でアクセスします.

Node.nextSibling:DOMツリー上の現在のノードと同じレベルの次のノードにアクセスします.

Node.previousSibling:DOMツリー上の現在のノードと同じレベルの前のノードにアクセスします.

深入理解JavaScript系列（23）：JavaScript与DOM（上）——也适用于新手_第3张图片

この図を通して、理解するのはずっと簡単ですが、非常に重要な知識点があります:それは要素の間にスペースがあることができなくて、もしulとliの間にスペースがあるならば、内容が空のtext nodeノードだと思われて、このようにul.childNodes[0]は最初のli要素ではありません.したがって、次のノードもそうではありません.間に空行のノードがあるため、一般的にこのような場合、すべてのサブノードを遍歴してnodeTypeタイプ、1は要素、2は属性、3はtextノードと判断する必要があります.詳細なtypeタイプは、このアドレスを使用できます.

    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

まとめ
オリジナルのDOMメソッドとプロパティは、日常的な応用に十分です.この章では、いくつかの例を挙げます.次の章では、ブラウザイベントモデルも含めて、より多くの例を挙げます.
同期と推奨
この文書はディレクトリインデックスに同期されています:JavaScriptシリーズの詳細な理解
JavaScriptシリーズの文章を深く理解して、オリジナル、翻訳、転載などの各タイプの文章を含んで、もしあなたに役に立つならば、おじさんに書く動力を推薦して支持してください.

PHP学習ノート-配列(1)

OpenSSLから、BoringSSLに移行