JavaScriptのDOMドキュメントオブジェクトモデル

:(関係）ノードのプロパティは要素がサポートされていないと、低いバージョン、すなわち属性

childNodes-すべての子ノード（要素、コメント、テキスト）;
nodeType--属性は、ノード・タイプを表します。
children--取得要素の子
firstChild--最初の子ノード（要素、コメント、テキスト）
* FirstElementChild - 最初の要素の子
lastChild - 最後の子ノード（要素、コメント、テキスト）
* LastElementChild - 最後の要素の子
parentNode--親要素
offsetParentの - ポジショニングの親
例えば、previousSibling - 兄弟に
* PreviousElementSibling - 兄弟の一つの要素
nextSibling - 次の兄弟ノード
* NextElementSibling - 次の要素の兄弟

ノード操作（追加と削除）：

ノード--document.createElement（ 'DIV'）を作成します。

        >のdocument.createElement（' DIVは' ）要素ノードを作成

         > document.createTextNode（' テキストは' ）テキスト・ノードを作成

        ` 
            VAR newLi =のdocument.createElement（' のLiを' ）; 
            newLi.innerHTML = ' 444 ' 、
        ` `

エレメントの末尾に項目--parent.appendChild（子）を追加します。

        `
             VAR UL = document.getElementsByTagName（' UL '）[ 0 ]; 
            ul.appendChild（newLi）。
        `` `

--OldNode.parentNode.insertBefore（newNode、oldNodeが）前に指定されたノード要素を挿入します。

        `` `
             のvar LI2 =のdocument.getElementById（' LI2 ' ）。
            VAR newLi1 =のdocument.createElement（' 李' ）; 
            newLi1.innerHTML = ' 1-21-2 ' 。
            li2.parentNode.insertBefore（newLi1、LI2）。

        `` `

あるいは要素--replaceChild（newNode、oldNodeが）

        * newNodeがすでに既存のラベルの場合、タグの物理的な場所を変更することです
        `` ` 
            VAR newLi2 =のdocument.createElement（ 'リー'の）; 
            newLi2.innerHTML = '三三〇から三' ;
             VARの LI3 =のdocument.getElementById（ 'LI3' ）; 
        
            // ul.replaceChild（newLi2、LI3）; 
            li3.parentNode.replaceChild（newLi2、LI3）; 
        `

削除ノード--removeChild（delNode）

        、 `` `
             のvar LI5 =のdocument.getElementById（ 'LI5' ）。
            // ul.removeChild（LI5）。
            li5.parentNode.removeChild（LI5）。
            // li5.remove（）; すなわち不支持 
        `` `

コピーノード--cloneNode（）

        > cloneNodeを（）クローンノード、参照、タグのみコピー自体を通過しない、コンテンツを含まない
        
         >（cloneNodeをtrueに）深いクローン、タグのすべての内容をコピーし、内部タグを

要素法を取得します：

- のdocument.getElementById（）

- document.getElementsByTagName（）// []

- document.getElementsByClassName（）// []すなわちバージョンが低いサポートしていません。

        `
         @のブラウザのすべての要素を介して互換性のあるクラス名を取得する包装方法
            関数getByClass（ELE、CLS）{
                 // まずELEタグ（区別せずにタグ名）を取得
                VAR要素ele.getElementsByTagName =（「*」）;  
                 VAR進= []; 
                 // トラバース要素
                のための（VARの I = 0; I <elements.length; Iは++ ）{
                     //   上ELES [I] .className 'レッドCCCのAA' 
                    // 名詞の最初のクラスリストにアレイ
                    のvar clsAry =エレメント[I] .className.split（ ''）;   // [ '赤'、 'AA'、 'CCC'] 
                        // 配列クラス名トラバース、同じCLSクラス名がある場合、この要素は、進に入れている
                        ため（VAR J = 0; J <clsAry.length。J ++ ）{
                             場合（CLS == clsAry [J]）{ 
                                ary.push（要素[I]）。  
                                破ります;  
                            } 
                        } 
                } 
                戻り値化。   
            } 
        `` `

- document.querySelector（「＃ボックスは.red」）; //要素互換性のないバージョン、すなわち低取得

- document.querySelectorAll（「＃ボックス.red」）; //要素の集合を取得し、互換性のないバージョンすなわち低

JavaScriptのDOMドキュメントオブジェクトモデル

おすすめ