DOMおよびBOMベースの学習、フロントエンド

JavaScriptを基本的な構文のいくつかを学ぶことが、発見の完了と相互作用がないとブラウザの後、したがって、真のブラウザとの相互作用を実現するために、DOMおよびBOMの知識を習得する必要があるためにいくつかの時間前。

BOM(ブラウザのオブジェクトモデルは)にはJavaScript対応ブラウザが可能ブラウザオブジェクトモデルを指し、「話。」
DOM(ドキュメントオブジェクトモデル)を使用すると、HTMLドキュメントのすべての要素にアクセスするためのドキュメントオブジェクトモデルを指します。

サブオブジェクトの.window導入

1.locationは、オブジェクト
window.locationのオブジェクトは、現在のページのアドレス(URL)を取得するために使用され、ブラウザが新しいページにリダイレクトされます。
共通のプロパティとメソッド:

location.href					//获取URL
location.href="URL"			//跳转到指定页面
location.reload()				//重新加载页面

2.ポップアップボックスは、
JavaScriptの三つのメッセージボックスに作成することができます。警告ボックス、チェックボックス、バルーン

/*警告框*/
alert("今天天气真好!")
/*确认框*/
confirm("请点击确定!")
/*提示框*/
prompt("请在下方输入","你的答案")

3.タイミング関連
のJavaScriptを使用することによって、我々は、時間の特定の間隔をおいて、後でコードを実行するのではなく、即座にすることができます。

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

実行完了後のsetTimeout()を使用すると、タイマーをキャンセルしたい場合は目的がタイミングをキャンセル達成するように、あなたがてclearTimeout()を使用して変数の値をクリアすることができ、定義された変数に格納されている値を返します。

//在指定时间之后执行一次函数
var t  = setTimeout(function(){alert(123);},3000)   //3秒后执行alert(123)
//取消setTimeout计时
clearTimeout(t)

clearInterval()メソッドは、と同様実行またはウィンドウを閉じ、使用とのsetTimeout()を停止するまでのsetTimeout()メソッドは、所定の時間関数変化内に一度だけ行われるが、たsetInterval()メソッドは、同じ範囲内に保つことができる時間間隔で関数を呼び出します。

二.DOMはじめに

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

1.検索ラベル

直接検索:

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取
document.getElementsByTagName     根据标签名获取标签合集

間接検索:

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

2.ノードの動作

ノードを作成します

实例:var divEle = document.createElement("div");

ノードの追加

追加一个子节点
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);
把增加的节点放到某个节点的前面:
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "www.12345.com");

ノードを削除します。

somenode.removeChild(要删除的节点)    //somenode是要删除节点的父元素

交換用ノード

somenode.replaceChild(newnode, 某个节点);  //somenode是要删除节点的父元素

属性ノード

divEle.innerText		
divEle.innerHTML		//获取文本节点的值
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"  //设置文本节点的值

属性操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

フォーム(入力選択テキストエリア)あなたがコンテンツを視聴したい場合には:

elementNode.value    //查看上述三个标签中的内容

クラス操作

className  获取所有样式类名(字符串)
classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true,否则返回false
classList.toggle(cls)  存在就删除,否则添加

3.イベント

一般的なイベント

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。             
onblur         元素失去焦点。         
onchange       域的内容被改变。            

onkeydown      某个键盘按键被按下。         
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击,使用的对象是form。

おすすめ

転載: blog.csdn.net/w819104246/article/details/89766212