Javascript DOMベース

9770 ワード

JavaScript dom

ドキュメントのオブジェクトモデルはとても重要です.ドキュメントの構造、スタイルなどの変更はそれに依存します.今日はまだ比較的に暇です.更新を続けます.このエディタはちょっと問題がありますので、コードブロックが見せられませんので、コードを全部表示しました.ご了承ください.
DOM——ファイルオブジェクトモデル(Docment Object Model、DOMと略称)は、W 3 Cグループが推奨する処理拡張可能な標的言語の標準的なプログラミングインターフェースである.Dcument Object Modelの歴史は1990年代後半にさかのぼることができます.マイクロソフトとNETcapeの「ブラウザ大戦」は、両方がJavascriptとJSscriptで生死を決するため、大規模なブラウザに強力な機能を与えます.マイクロソフトはウェブページの技術に多くの専門的なものを加入しています.VBScript、ActiveXコントロール、マイクロソフトの自宅DTMLフォーマットなどがあります.多くのウェブページはマイクロソフト以外のプラットフォームやブラウザでは正常に表示できません.DOMは当時の奥ゆかしい傑作である.この昔のことを知ればいいです.
DOMアウトライン——W 3 Cによると DOM仕様、DOMはHTMLとXMLのアプリケーションプログラミングインターフェース(API)であり、DOMはページ全体を階層ノードからなるファイルにマッピングする.1級、2級、3級の3段階があります.
DOMノード——父要素と子要素の関係.1つの親要素は1階の従属関係だけです.例えばULおよびLiのように、liの下にstrongなどのラベルがあるなら、彼はULのサブノード(要素)ではない.
childNodes()

<script>
    window.onload=function(){
        var oUl=document.getElementById('ul1');
        alert(oUl.childNodes.length);
    };
</script>
<body>
<ul id="ul1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>

火狐とGoogleの下で7を弾いて、IE 9で3弾いて、ブラウザーの間の互換性がない問題.もちろんchildNodesの代わりにチルドレンを使ってもいいです.互換性の問題はありません.

<script>
    window.onload=function(){
        var oUl=document.getElementById('ul1');
        oUl.childNodes[0].style.background='red';
    };
</script>

上のコードは本来、liに赤い背景を追加しましたが、成功しませんでした.どこが問題になりましたか?なぜなら、フラミンゴはliとliの間のスペース、つまり空のテキストノードを一つのノードとして扱うからです.
nodeTypeノードタイプ、1は要素ノード、2はatr属性、3はテキストノードを表します.
offset Partは、ある位置決め要素の親要素を表し、ページ上の要素の絶対座標を取得する.
最初の後尾のサブノードfirstChildとfirstElementChildはそれぞれIEとフォックスの下で効果があり、1つの判断文によって互換性を実現したり、「または」文で1つの変数にコピーしたりして実現することができる.同じようにlastChildとlastElement Childがあります.
兄弟のサブノードnextSiblingとnextElement Sibling.previous SiblingとnextElement Siling
DOM方式の操作要素——set Attribute、get Attribute、removeAttribute

<script>
    window.onload=function(){
        var otxt=document.getElementById('txt1');
        //otxt.value='123';
        //otxt['value']="12"
        //otxt.setAttribute('value','1');
        alert(otxt.getAttribute('id'));
    };
</script>
<body>
<input type="text" id="txt1" />
</body>

classNameで元素を取得します.
パッケージ関数は複数回にわたって使用されていますが、クラス名の取得は頻繁に行われています.以下はパッケージ関数のコードです.

<script type="text/javascript">
function getByClass(oParent, sClass)//          ，               
{
    var aEle=oParent.getElementsByTagName('*');//             
    var aResult=[];
    var i=0;
    
    for(i=0;i<aEle.length;i++)
    {
        if(aEle[i].className==sClass)//              ，      
        {
            aResult.push(aEle[i]);
        }
    }
    
    return aResult;//      ，              
}

window.onload=function ()
{
    var oUl=document.getElementById('ul1');
    var aBox=getByClass(oUl, 'box');
    var i=0;
    
    for(i=0;i<aBox.length;i++)
    {
        aBox[i].style.background='yellow';
    }
}
</script>

要素createElementを作成します()
以下は「作成li」というボタンをクリックしてliを作成し、テキストボックスに内容を入力すると、該当名称のliが作成されますが、プログラムは実行できません.どこが間違っているか探してください.プログラムは大丈夫です.firebugもエラーを提示していません.以下は具体的なコードです.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>  Li</title>
<script>
    window.onload=function(){
        var otxt=document.getElementById('txt1');
        var obtn=document.getElementById('btn');
        var oul=document.getElementById('ul1');

        obtn.onclick=function(){
            var oli=document.createElement('li');
            oli.innerHTML=otxt.value;
            oul.appendChild('oli');

        };
    };


</script>
</head>
<body>
<input id="txt1" type="text"  />
<input id="btn" type="button" value="    li" />
<ul id="ul1">
    <li>123</li>
</ul>
</body>
</html>

元素を追加するapendChild()
彼は親要素のサブノードの後ろに新しい要素を追加します.
要素insertBeforeを挿入()
彼は父要素のサブノードの前に新しい要素を追加しています.彼の名前も覚えやすいです.具体的な例は次のコードを見てもいいです.中には判断文があります.長さがゼロなら、apendChildを使って新しい元素を追加します.ここではinsertBeforeは使えません.要素が一つもないとinsertBeforeは機能しないので、apendChildを使って要素の後ろから要素を挿入します.それとも最初の要素を0に加えてもいいですか?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>     </title>
<script type="text/javascript">
// .insertBefore(   ,    )

window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oTxt=document.getElementById('txt1');
    var oUl=document.getElementById('ul1');
    
    oBtn.onclick=function ()
    {
        var oLi=document.createElement('li');
        var aLi=oUl.getElementsByTagName('li');
        
        oLi.innerHTML=oTxt.value;
        
        if(aLi.length==0)
        {
            oUl.appendChild(oLi);
        }
        else
        {
            oUl.insertBefore(oLi, aLi[0]);
        }
    }
}
</script>
</head>

<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="  Li"/>
<ul id="ul1">
</ul>
</body>
</html>

要素removeChildを削除()
以下の例を見てください.シングルリンクの場合、liを削除して、thisを使ってあなたがクリックしたいリンクを取得します.その次に、parent Nodeを使って父要素を取得します.もちろん、RemoveChild方法によって該当する要素を削除します.(そうだ、テキストエディタのBUGを見つけました.テキストの色は時々変えられません.2回の色を変えたら、灰色の黒になります.＝!)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>     </title>
<script type="text/javascript">
window.onload=function ()
{
    var aA=document.getElementsByTagName('a');
    var oUl=document.getElementById('ul1');
    var i=0;
    
    for(i=0;i<aA.length;i++)
    {
        aA[i].onclick=function ()
        {
            oUl.removeChild(this.parentNode);
        }
    }
}
</script>
</head>

<body>
<ul id="ul1">
    <li>sdfsdf <a href="javascript:;">  </a></li>
    <li>3432 <a href="javascript:;">  </a></li>
    <li>tttt <a href="javascript:;">  </a></li>
    <li>ww <a href="javascript:;">  </a></li>
</ul>
</body>
</html>

文書のかけら
ドキュメントの断片は性能を最適化できます.親たちは下記の二つの異なる方法を使って同じブラウザでテストできます.新しい興味のあるテストをしてください.私はchromeでテストした結果、カードが死んでしまいました.どんな状況なのか分かりません.10万回も循環しましたが、カードが死ぬほどではないでしょう.ドキュメントの破片は、要素を作成するために包装することができますが、一般的な方法は、要素を作成するためのものです.

      
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>     </title>
<script type="text/javascript">
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oUl=document.getElementById('ul1');
    
    oBtn.onclick=function ()
    {
        var iStart=new Date().getTime();
        var oFrag=document.createDocumentFragment();
        var i=0;
        
        for(i=0;i<100000;i++)
        {
            var oLi=document.createElement('li');
            
            oFrag.appendChild(oLi);
        }
        
        oUl.appendChild(oFrag);
        
        alert(new Date().getTime()-iStart);
    }
}
</script>
</head>

<body>
<input id="btn1" type="button" value="  "/>
<ul id="ul1">
</ul>
</body>
</html>

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>     </title>
<script type="text/javascript">
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oUl=document.getElementById('ul1');
    
    oBtn.onclick=function ()
    {
        var iStart=new Date().getTime();
        var i=0;
        
        for(i=0;i<100000;i++)
        {
            var oLi=document.createElement('li');
            
            oUl.appendChild(oLi);
        }
        
        alert(new Date().getTime()-iStart);
    }
}
</script>
</head>

<body>
<input id="btn1" type="button" value="  "/>
<ul id="ul1">
</ul>
</body>
</html>

js listをtreeに変換する方法の例(ツリーに配列)