javascript DOM学習ノート

DOM
dom中国語翻訳はドキュメントオブジェクトモデルです.
domのNodeListとNameNodeMapとHTMLCollectionはダイナミックなダイナミックな動きをしています.
node(ノード)
父の元素のfirst Child;lastChild;チルドノード[7];サブ要素のparent Nodeは親要素のnodeのnext Sibilingです.次の同級node nodeが存在しない場合はnullに戻ります.
ノードを取得
これは私達が書きました.これはbody div inputなどのラベルの山です.ブラウザ内の構造document.getElementById(idは一つの要素しか設定できません.)document.getElements ByTagName()*(得られたのは配列***です.)そして、最初の元素を獲得したいならば、同時にlengthという属性があります.

var oli=oul.getElementsByTagName("li")
alert(oli[0]);
alert(oli[1]);

もう一つの問題はmydiv.getElements ByTagName(「li」)で得られたのはすべてのliです.多くの層があればすべてのli元素に戻ります.
*.getElements ByClass Name()*(獲得したのは配列)同上です.
変更オブジェクトの作成
createElement()

var mydiv =document.creatElement("div");
mydiv.id="myid";
mydiv.className ="myclassname";
//                  
document.body.appendChild(mydiv);

.RemoveElement()

.イメージ

.link

削除ノードを追加

apendChild(new)サブノード

を追加する.

var returnNode =someNode.appendChild(newNode);
//            
alert(someNode.lastChild==newNode); //ture

insertBefore(newNode,oldNode)はnewNodeをoldNodeの前に挿入します.

var returnNode =someNode.insertChild(newNode,someNode.firstChild);
alert(newNode == newNode == someNode.firstNode);//ture

replacceChild(new,old)

RemoveChild(old)は、サブノード

を削除する.
オブジェクトの属性を取得

get Attribute(「width」)

set Attribute(「width」)

div.setAttribute("id","otheId");
//    
div.id="otherId"；
//           setAttribute           
div.mycloth="   "；    

removeAttribute(「width」)

DOM 2とDOM 3は都domに対して機能アップグレードを行います.

addEvent Listener

removeEvent Lister

dispatch Event

dom整合性検査

document.implementation.hasFeature("xml","2.0");

ドキュメントの書き込み

    
    
        document.write("<strong>"+(new Date()).toString()+"</strong>");
        //     write   html（   innerText innerHtml      ）
        //   js

        document.write("<script type=\"text/javascript\" src=\"file.js\"+""); //false
        document.write(""); //ture

    

動的挿入スクリプト
js

function loadScript(url) {
        var script=document.creatElement("script");
        script.type="text/javascript";
        script.scr=url;
        document.body.appendChild(script);
    }
loadScript(javascript.js);

css

function loadStyles(url) {
        var link=document.creatElement("link");
        link.rel="stylesheet";
        link.type="text/css";
        link.url=url;

        var head=document.getElementsByTagName('head')[0].appendChild(link);
    }
    loadStyles("style.css")

注意:
div.tagName==DIV;//divではないので、element.tag Name.toLowerCase()==「div」が一番いいです.これでいいです
domを操作する時、一つの問題があります.domはダイナミックです.

var divs=document.getElementsByTagName('div');
    for(var i=0;i