Javascript 組成：ECMAscript、Dom、Bom

時間 2019-12-09

標籤 javascript 組成 ecmascript dom bom 欄目 JavaScript 简体版

原文原文鏈接

1、核心（ECMAScript）css

ECMAScript 定義的只是這門語言的基礎，而在此基礎之上能夠構建更完善的腳本語言。html

2、瀏覽器對象模型（BOM)——對應window對象數組

window：窗口瀏覽器

window.open("打開的地址","打開的位置")
window.opener:打開此頁面的上一個頁面對象
window.close():關閉當前頁面

location：地址欄dom

window.location.href="http://www.baidu.com";//修改頁面地址，會跳轉頁面（超連接）

history：歷史記錄 spa

window.history.back();//頁面進行後退；

document：文檔code

注：window可省略orm

3、文檔對象模型（DOM）htm

dom: document object model 文檔對象模型對象

定時器：

一、延遲執行（只執行一次）

基本格式：

setTimeout（function（）{}，時間）;

時間用毫秒，1000毫秒=1秒

二、間隔執行（執行屢次）

基本格式：

setInterval ( function(){},時間);

清除定時器；

clearTimeout（setTimeout對象）

clearInterval（setInterval對象）

例：

function dianji(){
    setInterval(function(){
        console.log(9);
    },1000);
}

三、DOM操做

1、找到元素：

   docunment.getElementById("id")；//根據id找，最多找一個；
    var a =docunment.getElementById("id");//將找到的元素放在變量中；
    docunment.getElementsByName("name")；//根據name找，找出來的是數組；
    docunment.getElementsByTagName("name")；//根據標籤名找，找出來的是數組；
    docunment.getElementsByClassName("name")// 根據classname找，找出來的是數組；

2、操做內容：

1. 非表單元素：

1）獲取內容：

a.innerHTML;//a爲自定義元素，標籤裏的html代碼和文字都獲取了

直接用就是獲取內容

加等號就是修改內容

例：

/*HTML內容*/
<body>
    <div id="me">
        <b>試試吧</b>
    </div>
</body>

/*js中的內容*/
<script>
 var a= document.getElementById("me");//用innerHTML獲取div中的內容
    alert(a.innerHTML);    
</script>

結果：

2）設置內容：

a.innerHTML = "<font color=red >hello world </font>";

若是用設置內容代碼結果以下，div中的內容被替換了：

2. 表單元素：

1）獲取內容，有兩種獲取方式：

var t = document.f1.t1; //form表單ID爲f1裏面的ID爲t1的input；
var t = document.getElementById("id"); //直接用ID獲取。
alert(t.value);// 獲取input中的value值；
 alert(t.innerHTML); //獲取<textarea> 這裏的值 </textarea>；

2）設置內容： t.value="內容改變"；

3. 一個小知識點：

<a href="www.baidu.com" onclick ="return flase">轉向百度</a> ；加了return flase則不會跳轉，默認是return true會跳轉。按鈕也同樣，若是按鈕中設置return flase 則不會進行提交，利用這個能夠對提交跳轉進行控制。

3、操做屬性

首先利用元素的ID找到該元素，存於一個變量中：

var a = document.getElementById("id");//根據id找元素

而後能夠對該元素的屬性進行操做：

a.setAttribute("屬性名","屬性值"); //設置一個屬性，添加或更改均可以；

a.getAttribute("屬性名")；//獲取屬性的值；

a.removeAttribute("屬性名")；//移除一個屬性。

4、操做樣式

首先利用元素的ID找到該元素，存於一個變量中：

var a = document.getElementById("id")；

而後能夠對該元素的屬性進行操做：

a.style.樣式="" ； //操做此ID樣式的屬性。

樣式爲CSS中的樣式，全部的樣式均可以用代碼進行操做。

document.body.stye.backgroundColor="顏色"；整個窗口的背景色。

操做樣式的class：a.className="樣式表中的classname" 操做一批樣式

注意：

① dom操做css樣式只能操做「行內樣式」(css樣式分爲行內、內部、外部)

② 操做屬性樣式例如background-color/border-left-color，

須要變爲backgroundColor、borderLeftColor，中恆線去掉，後邊首字母大寫。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。