Sishi II --- BDMとDOM

BDMとDOM

ECMAScriptの、DOM、およびBOMにはJavaScript。

BOM（ブラウザのオブジェクトモデルは）にはJavaScript対応ブラウザが可能ブラウザオブジェクトモデルを指し、「話。」

DOM（ドキュメントオブジェクトモデル）を使用すると、HTMLドキュメントのすべての要素にアクセスするためのドキュメントオブジェクトモデルを指します。

、BDM

1.1のWindowsオブジェクト

すべてのブラウザは、Windowsのオブジェクト、すべてのJavaScriptのグローバルオブジェクトをサポートする機能、および変数は、自動的にWindowsの対象となります。グローバル変数はwindowオブジェクトのプロパティです、グローバル関数は、windowオブジェクトです。

Windowsは、Windowsのために書かれた参照を省略することができるWindowsオブジェクトのメソッドとプロパティを呼び出して、JavaScriptオブジェクトの最高レベルの一つであるオブジェクト。

一部のWindows方法：

window.innerHeight  --->浏览器窗口内部高度
window.innerWidth   --->浏览器窗口内部宽度
window.Open()       --->打开新窗口
window.Close()      --->关闭当前窗口

1.2のWindowsサブオブジェクト

1.2.1ナビゲータオブジェクト

ブラウザのオブジェクト、オブジェクトは、ブラウザ関連の情報を含む、ユーザによって使用されるブラウザによって決定することができます。

navigator.appName      ---> Web浏览器全称
navigator.appVersion   --->Web浏览器厂商版本与详细字符串
navigator.userAgent    --->客户端信息
navigator.platform     --->浏览器所在的操作系统

1.2.2画面オブジェクト

画面オブジェクトは、一般的な方法は以下のとおりです。

screen.availWidth   --->可用屏幕宽度
screen.availHeight  --->可用屏幕高度

1.2.3履歴オブジェクト

閲覧履歴などの履歴オブジェクトブラウザ、しかし、あなたが特定のアドレスを見ることができない、オブジェクトのメソッドは、次のとおりです。

history.forward()   --->前进
history.back()      --->后退

1.2.4ターゲット地域

ローカルオブジェクトは、現在のページのURLのアドレスを取得し、新しいページにブラウザをリダイレクトするために使用されています。共通の属性とメソッド：

location.herf         --->获取URL
location.herf="URL"   --->跳到指定网址
location.reload()     --->重新加载

1.2.5ポップアップボックス

アラートボックス：

アラートボックスは、多くの場合、ユーザーはいくつかの情報を得ることができることを確実にするために使用されます。警告ボックスが表示されたら、ユーザーは続行するために[OK]ボタンをクリックする必要があります。

alert("警告！")；

確認ボックス：

特定の情報を確認したり、受信するユーザーのためのボックスをチェックします。確認ボックスが表示されたら、ユーザーは続行するために、ボタンをOK]または[キャンセル]をクリックする必要があります。ユーザーが確認するためにクリックした場合、戻り値はtrueです。ユーザーが[キャンセル]をクリックした場合、戻り値はfalseです。

confirm("确认？？？？？")

ヒントボックス：

プロンプトボックスは、多くの場合、ページに入る前に入力する値をユーザーに促すために使用されています。プロンプトボックスが表示されたら、ユーザーが操作を継続するために、ボタンを、その後、値を入力し、[OK]または[キャンセル]をクリックする必要があります。ユーザーが確認するためにクリックした場合、戻り値は入力されます。ユーザーが[キャンセル]をクリックした場合、戻り値はnullです。

prompt("请输入确认信息")

1.3タイミング

1.3.1のsetTimeout

var t = setTimeout("JS语句,毫秒")

setTimeout（）メソッドは、値を返します。上記のステートメントでは、値がTで名前の変数に格納されています。あなたがこののsetTimeout（）をキャンセルしたい場合は、それを指定するには、この変数名を使用することができます。

最初のパラメータのsetTimeout（）は、JavaScriptステートメントを含む文字列です。この文は、ALERTMSG（として「警告（ 『5秒！』）」、または関数の呼び出し、）」ようなものであってもよいです。

第2のパラメータは、何ミリ秒（1,000ミリ秒が1に等しい）から現在の実装からパラメータを示しています。

1.3.2てclearTimeout（）

clearTimeout(setTimeout_variable)

var t = setTimeout(function(){alert(123);},3000)  //指定时间后执行函数
clearTimeout(t)                // 曲线settimeout设置

1.3.3のsetInterval（）

setInterval("JS语句",时间间隔)

呼出関数または演算式に（ミリ秒単位で）指定された期間に従ってたsetInterval（）メソッド。

setInterval（）メソッドは、（）てclearIntervalまで、関数を呼び出すしていきますと呼ばれる、またはウィンドウが閉じられています。パラメータ値がてclearInterval（）メソッドを返すようにしたsetInterval（）IDが使用されます。

clearInterval(timer);

戻り値は、定期的に実行されるコードの値をキャンセルし、Windows.clearInterval（）に渡すことができます。

var timer = setInterval(function(){console.log(123);}, 3000)
// 每隔一段时间就执行一次相应函数
clearInterval(timer);        // 取消setInterval设置

二、DOM

DOM（ドキュメントオブジェクトモデル）は、文書や抽象概念の内容のためのメソッドのセットです。ページがロードされると、ブラウザは、ドキュメントオブジェクトモデル（ドキュメントオブジェクトモデル）のページを作成します。

2.1検索ラベル

2.1.1ダイレクト検索

document.getElementById          --->根据ID查找
document.getElementByClassName   --->根据class属性
document.getElementByTagName     --->根据标签名

検索について2.1.2

parentElement            --->父节点标签元素
children                 --->所有子标签
firstElementChild        --->第一个子标签元素
lastElementChild         --->最后一个子标签元素
nextElementSibling       --->下一个兄弟标签元素
previousElementSibling   --->上一个兄弟标签元素

2.2ノードの動作

ノードの作成2.2.1

createElement（タグ名）：

var divEle = document.createElement("div")

2.2.2ノードの追加

somenode.appendChild（newnode）：ノードを追加

場所のノード：somenode.insetBefore（newnode、位置）

var imEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele=document.getElementById("d1");d1Ele.appendChild(imgEle);

2.2.3削除ノード

親要素を呼び出すことによって、あなたは、削除方法を削除したい要素を取得します。

somenode.removeChild(要删除的节点);

2.2.4交換ノード

somenode.replaceChild(newnode,节点);

2.2.5取得ノード

//获取节点：
var divEle = docment.getElementById("d1")
divEle.innerText
divEle.innerHEML
//设置文本字典：
var divEle=document.getElementById("d1")
divEle.InnerText = "1"
divEle.innerHTML="<P>2</p>"

2.2.6属性

var divElement=document.getElementById("d1");
divEle.setAttribute("age","20")
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."

2.2.7値

構文：elementNode.value; .input、.select、.textareaに適しています。

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

2.2.8クラスの操作

className              --->获取所有类名
classList.remove(cls)  --->删除指定类
classList.add(cls)     --->添加类
clssList.contains(cls) --->判断
classList.toggle(cls)  --->存在删除，不存在添加

2.2.9 CSSを指定します

obj.style.backgroundColor="red"

CSSプロパティの一般的なスタイルの水平線で直接使用されていません。属性名。

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

最初の文字を含む水平線のCSS特性はバック水平ラインに大文字。

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

2.3イベント

HTML 4.0の新機能の1つは、HTMLブラウザのイベントは、ユーザーがHTML要素をクリックしたときにJavaScriptを開始するように、行動（アクション）をトリガする能力です。以下は、イベントアクションを定義するには、HTMLタグに挿入できる属性のリストです。

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。
onfocus        元素获得焦点。              
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

結合方法：

<div id="d1" onclick="changeColor(this);">点我</div>
<script>
  function changeColor(ths) {
　　    ths.style.backgroundColor="green";
  }
</script>

結合方法：

<div id="d2">点我</div>
<script>
　　  var divEle2 = document.getElementById("d2");
　　  divEle2.onclick=function () {
　　　　    this.innerText="呵呵";
  　　　}
</script>

2.4 window.onload

我々はページの要素にイベントをバインドすると、文書がロードされるまで、待つ必要があります。我々は、存在しないイベントの結合要素を与えることはできませんので。

window.onloadイベント火災ドキュメントのロード処理が終了。この時点では、文書内のすべてのオブジェクトはDOMに位置しており、すべての画像、スクリプト、リンク、およびサブフレームがロードを完了しました。

注：.onload（）関数は、現象を覆うように存在します。