Webフロントエンド開発(四)--DOMとBOM
5410 ワード
1.DOM(Dcument Object Model)文書オブジェクトモデルは、JavaScriptの中でHTMLドキュメントをツリーとして使用しています.この木にはルートノードがあり、ルートノードの下には多くのサブノードがあります.各ノードはDOMオブジェクトとして見なされます.JavaScriptは、DOMオブジェクトを操作することにより、HTMLファイル全体の再構築、追加、削除、変更、またはページ上の項目の再構築を完了します.これによりウェブページの動的効果を達成し、ユーザーとのインタラクションを向上させる. W 3 C DOM規格によると、DOMはブラウザ、プラットフォーム、言語とは無関係なインターフェースであり、ページの他の標準的なコンポーネント にアクセスできるようにする. javaのJDKに持参されたorg.w 3 c.domパッケージの実現類は、DOMプログラミング規範 を実現しました. HTMLドキュメントのいずれかのタグにはID属性があります.いずれのタグもDOMオブジェクト です. documentはJavaScriptのDOMオブジェクトの最上位のオブジェクトであり、すべての小文字は直接に を使用することができます.
1.DOMオブジェクトを取得する3つの方法は、JavaScriptをブラウザと「対話」し、ブラウザの情報を取得し、操作ブラウザ を実行することができるようにする. BOMは規範に欠けていますが、業界の標準規格があります.
1.windowオブジェクトに関する方法 位置が違います.BOMオブジェクトはブラウザフォームにあります.DOMオブジェクトはウェブページのHTMLコードにあります. DOMには標準があり、W 3 Cで制定されています.たとえばXML解析にもDOM方式が使われています.BOMは標準がありません. BOMの核心はwindowで、windowオブジェクトはまた二重の役割を持っています.JSを通じてブラウザウィンドウにアクセスするインターフェースであり、またglobalグローバルオブジェクト です. windowはdocumentを含んでいるので、JavaScriptは直接windowのdocumentオブジェクトを使ってドキュメントの内容と構造をアクセス、検索、修正することができます.documentオブジェクトはまたDOMオブジェクトのルートノードであるため、DOMがBOMに含まれていると理解できる.つまり、ブラウザから提供されたアクセスはBOMオブジェクトであり、BOMオブジェクトはDOMオブジェクトにアクセスし、JSはブラウザやブラウザで読み取られたドキュメントを操作することができる.
1.DOMオブジェクトを取得する3つの方法
var element = document.getElementById(id); //
var element = document.getElementByName(name); //
var element = document.getElementByTagName(tagname); //
function getUsername(){
// DOM
var inputDomObj = document.getElementById("username");
// DOM value
var username = inputDomObj.value;
// value
alert("username = " + username);
// value "yyb"
inputDomObj.value = "yyb";
//
inputDomObj.type = "checkbox";
}
//id
// html id
//innerHTML： HTML ，
var div1 = document.getElementById("div1");
div1.innerHTML = " innerHTML "
//innerText： HTML ，
var div2 = document.getElementById("div2");
div2.innerText = " innerText "
var arr = [1,2,3,4,5];
//join()
var str = arr.join("-"); //
alert(str); //1-2-3-4-5
//reverse()
arr.reverse();
//push() ，
arr.push(6); //
//pop() ，
arr.pop(); //
//JS
function checkOrCancelAll(){
// email
var allEmailDomObjs = document.getElementByName("email");
// DOM
var checkAll = document.getElementById("checkAll");
// DOM
for(var i=0;i<allEmailDomObjs.length;i++){
if(checkAll.checked){
allEmailDomObjs[i].checked = true;
}else{
allEmailDomObjs[i].checked = false;
}
}
}
1
2
3
4
/*
change ： 、
onchange ，onchange select
this DOM
this.value DOM value
*/
function getValue(provinceValue){
alert(provinceValue);
}
var tableRowObj = stuTable.insertRow(index); //
var tableCell = tableRowObj.insertCell(0); // td
tableObject.deleteRow(tableRowObj.rowIndex); //
var optionDomObj = document.creatElement("option"); // option
provinceDomObj.appendChild(optionDomObj); // option dom
//JavaScript
//
var nowTime = new Date();
//
document.write(" ：" + nowTime.toString());
//
var strTime = nowTime.toLocaleString();
1.windowオブジェクトに関する方法
window.alert("") //
window.setInterval(" ", ); //
window.setTimeout(" ", ); // 【 】
window.confirm(" "); // ， ture， false
//confirm alert
// ，
//
window.open("www.baidu.com"); //
window.open("www.baidu.com"，"_self"); // ， window
window.open("www.baidu.com"，"_blank"); //
window.open("www.baidu.com"，"_top"); //
window.open("www.baidu.com"，"_parent"); //
window.close(); //
//
window.onload = function(){
alert("page loaded");
}