JavaScript自學筆記之學步闌珊

BOM和DOM介紹

BOM，Browser Object Model，瀏覽器對象模型。
BOM主要提供了訪問和操作瀏覽器各組件的方式。

瀏覽器組件：
window（瀏覽器窗口）
location（地址欄）
history（瀏覽歷史）
screen（顯示器屏幕）
navigator（瀏覽器軟件）
document（網頁）

DOM，Document Object Model，文檔對象模型。
DOM主要提供了訪問和操作HTML標記的方式。

HTML標記：
圖片標記
表格標記
表單標記
body、html標記
……

BOM和DOM不是JS的內容。它們是W3C指定的規範。但是，BOM和DOM在瀏覽器中以對象的形式得以實現。
換句話說：BOM和DOM都是由一組對象構成的。

BOM對象結構
window瀏覽器窗口對象是JS中最大的對象。其他所有的對象，都是window的子對象。
包括：
①document文檔對象，代表一個網頁。
②location地址欄對象，對地址欄的操作。
③history歷史記錄對象，對歷史記錄盡心操作。
④navigator瀏覽器軟件對象，主要用來判斷用戶使用的什麼瀏覽器，可以解決兼容性問題。
⑤screen屏幕對象，
獲取屏幕的相關信息。

document文檔對象包括：img對象、table對象、form對象、input對象、body對象、html對象、div對象、span對象。

Window對象屬性

name：指瀏覽器窗口的名字或者框架的名字。這個名字是給<a> 標記的target屬性來用的。
設置窗口的名字：window.name=”newWin”
top：代表最頂層窗口。如：window.top
parent：代表父級窗口，主要用於框架。
self：代表當前窗口，主要用於框架中。
innerWidth：指瀏覽器窗口的內寬（不含菜單欄、工具欄、地址欄、狀態欄），該屬性Firefox支持。
在IE下，使用document.documentElement.clientWidth來代替window.innerWidth
innerHeight：指瀏覽器窗口的內高（不含菜單欄、工具欄、地址欄、狀態欄），該屬性Firefox支持。
在IE下，使用document.documentElement.clientHeight來代替window,innerHeight
document.documentElement就是<html>標記對象
document.body就是<body>標記對象

window對象方法

alert()：彈出一個警告對話框。
prompt()：彈出一個輸入對話框。
confirm()：彈出一個確認對話框。如果單擊“確認按鈕”返回true，如果單擊“取消”返回false。
close()：關閉窗口
print()：打印窗口

open()方法
功能：打開一個新的瀏覽器窗口。
語法：var winobj = window.open([url],[name],[options]);
說明：參數可有可無。如果沒有指定參數，則打開一個選項卡式的窗口（大小是最大化）。
參數：
rul：準備在新窗口中顯示哪個文件。url可以爲空字符串，表示顯示一個空的頁面。
name：新窗口的名字，該名字給<a> 標記的target屬性來用。
options：窗口的規格
width：新窗口的寬度
height：新窗口的高度
left：新窗口距離屏幕左邊的距離
top：新窗口距離屏幕上邊的距離
menubar：時候顯示菜單欄，取值：yes、no
toolbar：是否顯示工具欄
location：是否顯示地址欄
status：是否顯示狀態欄
scrollbars：是否顯示滾動條，不能省略s字母。

返回值：返回一個window對象的變量，可以通過該名稱跟蹤該窗口。winObj具備window對象的所有屬性和方法。

onload事件：當網頁加載完成，指<body> 標記的所有內容全部加載完成，才觸發該事件（條件）。通過onload事件屬性，去調用JS的函數。onload屬性只有<body> 標記纔有。

onclick事件：當單擊時，去調用JS代碼。所有HTML標記都具有該事件屬性。

延時器方法——setTimeout()
setTime()
功能：設置一個延時器，時間一到，就執行JS代碼一次。
語法：var timer=window.setTimeout(code,millisec)
參數：
code：是任何合法的JS代碼，一般情況下是JS函數。該函數要放在引號中。
示例：window.setTimeout(“close()”,2000)
window.setTimeout(init,2000);//傳函數地址，因此不需要加括號。如果加括號，是將函數的執行結果傳到方法中。
millisec：毫秒值
返回值：返回一個延時器的id變量，這個id變量給clearTimeout()用來清除。

clearTimeout()
功能：清除延時器id變量
語法：window.clearTimeout(timer)
參數：timer就是有setTimeout()設置的延時器的id變量。

//實例：簡單計數器
//全局變量
var i = 0;
var timer;
function start2(){
    //獲取網頁中id=result的<input>元素對象
    var inputObj = document.getElementById("result");
    //<input>標記有什麼屬性，那麼，對應的元素對象就有什麼屬性。
    inputObj.value = "該程序已經裕興了"+i+"秒！";
    i++;
    //延時器
    //延時器要想實現重複執行，必須在函數中不斷調用自己。
    //這麼實現以後，延時器就可以模擬定時器的效果了。
    timer = window.setTimeout("start2()",1000);
}
function stop2(){
    window.clearTimeout(timer);
}
</script>
</head>
<body>
<input id="result" type="button" value="該程序已運行了0秒！"/><br>
<input type="button" value="開始" οnclick="start2()"/>
<input type="button" value="停止" οnclick="stop2()"/>

定時器方法
setInterva()
功能：設置一個定時器。定時器，重複不斷的執行JS代碼（週期性）。
語法：var timer = window.setInterval(code,millisec)
參數：
code：是任何合法的JS代碼，一般情況下是JS函數。該函數要放在引號中。
示例：window.setInterval(“init()”,2000)
示例：window.setInterval(init,2000);//傳函數地址，因此不需要加括號。如果加括號，是將函數的執行結果傳到方法中。
millisec：毫秒值
返回值：返回一個定時器的id變量，這個id變量給clearInterval()用來清除。

clearInterval()
功能：清除定時器id變量
語法：window.clearInterval(timer)
參數：timer就是由setInterval()設置的定時器的id變量。

//實例：圖片自動切換
<script>
//網頁加載完成，去調用JS函數
window.onload = init;//函數傳地址，不能帶括號
//定義函數
function init(){
    //定時器：每隔1秒，調start2()函數一次
    //定時器總是調用其他函數，而延時器總是調用自己所在的函數。
    window.setInterval("start2()",1000);
}
//全局變量
var i = 1;
function start2(){
    //獲取網頁中的id=img01的圖片元素對象
    var imgObj = document.getElementById("img01");
    //圖片對象有src屬性，那麼imgObj對象也有src對象
    imgObj.src = "images/dd_scroll_"+i+".jpg";
    i++;
    //如果超過6，則i = 1。
    if(i>6)
    {
        i = 1;
    }
}
</script>
</head>
<body>
<img id="img01" src="images/dd_scroll_1.jpg" />
</body>
</html>

screen屏幕對象
Width：屏幕的寬度，只讀屬性
Height：屏幕的高度，只讀屬性
availWidth：屏幕的有效寬度，不含任務欄。只讀屬性。
availHeight：屏幕的有效高度，不含任務欄。只讀屬性。

navigator對象
appName：瀏覽器軟件名稱，主要用來判斷用戶使用的是什麼核心的瀏覽器。
如果是IE瀏覽器，返回值爲：Microsoft Internet Explorer
如果是Firefox瀏覽器，返回值爲：Netscape

appVersion：瀏覽器軟件的核心版本號。
systemLanguage：系統語言
userLanguage：用戶語言
platform：平臺

Location地址欄對象
href：獲取地址欄中完整的地址。可以實現JS的網頁跳轉。location.href=”http://www.baidu.com”;
host：主機名
hostname：主機名
pathname：文件路徑及文件名
search：查詢字符串。

？號之後的部分是查詢字符串
protocol：協議，如：http://、ftp://
hash：錨點名稱。如：#top
reload([true])：刷新網頁。true參數表示強制刷新

注意：所有的屬性，重新賦值後，網頁將自動刷新。

<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>

history對象
length：歷史記錄的個數
go(n)：同時可以實現“前進”和“後退”
i.history.go(0)：刷新網頁
ii.history.go(-1)：後退
iii.history.go(1)：前進一步
iv.history.go(3)：前進三步
forward()：相當於瀏覽器的“前進”按鈕
back()：相當於瀏覽器的“後退”按鈕

DOM

DOM，Document Object Model，文檔對象模型。我們可以把網頁中的所有“東西”看成是“對象”。
DOM官方定義：DOM可以使腳本動態的訪問或操作網頁的內容、網頁的外觀、網頁的結構。

DOM的分類
核心DOM：提供了同時操作HTML文檔和XML文檔的公共的屬性和方法
HTML DOM：針對HTML文檔提供的專用的屬性方法
XML DOM：針對XML文檔提供的專用的屬性和方法
CSS DOM：提供了操作CSS的屬性和方法
Event DOM：時間對象模型。如：onclidk、onload等。

HTML節點樹
在HTML中，稱爲“標籤”
在DOM中，稱爲“節點”
在JS中，稱爲“對象”

根節點：一個HTML文檔中只有一個根，它就是HTML節點
子節點：某一個節點的下級節點
父節點：某一個節點的上級節點
兄弟節點：兩個子節點同屬於一個父節點

DOM中節點類型
document文檔節點，代表整個網頁，不代表任何HTML標記，但它是html節點的父節點。
element元素節點，指任何HTML標籤。每一個HTML標籤就稱一個“元素節點”。它可以有文本節點和屬性節點。
attribute屬性節點。指HTML標籤的屬性。
text節點。節點樹的最底節點。

核心DOM 中的公共的屬性和方法
注：核心DOM中查找節點（標籤），都是從根節點（html節點）開始的。
1、節點訪問
nodeName：節點名稱。
nodeValue：節點的值。只有文本節點纔有值，元素節點沒有值。nodeValue的值只能是“純文本”，不能含有任何的HTML標籤和CSS屬性。
firstChild：第1個子節點。
lastChild：最後1個子節點。
childNodes：子節點列表，是一個數組。
parentNode：父節點。
查找<html>標籤的方法：
document.firstChild
document.documentElement
查找<body> 標籤的方法：
document.firstChild.lastChild
document.body

2、對節點的屬性操作
setAttribute(name,value)：給某個節點添加一個屬性。
getAttribute(name)：獲取某個節點屬性的值。
removeAttribute(name)：刪除某個節點的屬性。

window.onload = function(){
    //查找body節點
    var node_body = document.body;
    //查找img節點
    var imgObj = node_body.firstChild;
    //增加屬性
    imgObj.setAttribute("src","images/01.jpg");
    imgObj.setAttribute("width","400");
    imgObj.setAttribute("border","2");
    imgObj.setAttribute("style","cursor:pointer;");
    //刪除border屬性
    imgObj.removeAttribute("border");
}
</script>
</head>
<body><img /></body>
</html>

3、節點的創建
document.createElement(tagName)：創建一個指定的HTML標籤，一個節點
tagName：是指不帶尖括號的HTML標記名稱。
示例：var imgObj = document.createElement(“img”)

parentNode.appendChild(childNode)：將創建的節點，追加到某個父節點下。
parentNode：父節點，必須存在。
childNode：子節點
示例：document.body.appendChild(imgObj)

parentNode.removeChild(childNode)：刪除某個父節點下的子節點。
parentNode：父節點
childNode：要刪除的子節點。
示例：document.body.removeChild(imgObj)

<script type="text/javascript">
//網頁加載完成後
window.onload = function(){
    //創建一個<img>標記
    var imgObj = document.createElement("img");
    //增加屬性
    imgObj.setAttribute("src","images/01.jpg");
    imgObj.setAttribute("width","400");
    //將創建的圖片節點掛載到某個父節點下
    document.body.appendChild(imgObj);
}
</script>
</head>
<body>
</body>
</html>

//綜合實例：隨機顯示小星星
<script type="text/javascript">
/*
（1）網頁背景色爲黑色
（2）創建圖片節點，追加到<body>父節點
（3）圖片隨機大小
（4）圖片隨機定位座標（x,y）
（5）定時器
（6）網頁加載完成，開始星星
（7）星星顯示範圍更窗口的寬高一樣。（0,window.innerWidth）
（8）點擊星星，星星消失
*/
window.onload = function(){
    //更改網頁背景顏色
    document.body.bgColor="#000";
    //定時器：1秒鐘，顯示一個星星
    window.setInterval("star()",1000);
}
//動畫主函數
function star(){
    //創建圖片節點
    var imgObj = document.createElement("img");
    //添加src屬性
    imgObj.setAttribute("src","images/xingxing.gif");
    //添加width屬性。getRandom()隨機數函數
    var width=getRandom(15,85);
    imgObj.setAttribute("width",width);
    //添加style屬性（行內樣式）
    var x=getRandom(0,window.innerWidth);
    var y=getRandom(0,window.innerHeight);
    imgObj.setAttribut("style","position:absolute;left:"+x+"px;top:"+y+"px;");
    //添加onclick事件屬性
    //this代表當前對象，this是一個對象
    //this是系統關鍵字，this只能在函數內使用
    imgObj.setAttribute("onclick","removeImg(this)");
    //將圖片節點掛載到<body>父節點下
    document.body.appendChild(imgObj);
}
//函數：求隨機數函數
function getRandom(min,max){
    //隨機數
    var random=Math.random()*(max-min)+min;
    //向下取整
    random=Math.floor(random);
    //返回結果
    return random;
}
//函數：刪除節點
fucntion removeImg(obj){
    document.body.removeChild(obj);
}
</script>
</head>
<body>
</body>

HTML DOM
HTML DOM中提供了通過id直接找節點的方法，而不用從html根節點開始。
每一個HTML標籤，都對應一個元素對象。
每一個HTML標籤的屬性，與對應的元素對象的屬性一一對應

window.onload=function(){
    //獲取網頁中id=img01的圖片對象
    var imgObj = document.getElementById("img01");
    //修改圖片的屬性值，圖片標記的屬性，元素對象也能用。
    imgObj.src="images/xingxing.gif";
    imgObj.width="400";
    imgObj.border=2;
    imgObj.style = "cursor:pointer";
    imgObj.style = "星星圖片"；
    //核心DOM中的屬性方法，元素對象都能用
    imgObj.parentNode.bgColor = "#ff0000";
}
</script>
</head>
<body>
<img id="img01" src="images/01.jpg" />

HTML DOM訪問HTML元素的常用方法

1、getElementById()
功能：查找網頁中指定id的元素對象。
語法：var obj = document.getElementById(id)
參數：id是指網頁中標記的id屬性的值。
返回值：返回一個元素對象。
舉例：var imgObj = document.getElementById(“img01”)

2、getElementByTagName(tagName)
功能：查找指定的HTML標籤，返回一個數組。
語法：var arrObj = parentNode.getElementByTagName(TagName)
參數：tagName是要查找的標籤名稱，不帶尖括號。
返回值：返回一個數組，如果只有一個節點，也返回一個數組。
舉例：var arrObj = ulObj.getElementByTagName(“li”)

window.onload = function(){
    //獲取id = ulTag的網頁對象
    var ulObj = document.getElementById("ulTag");
    //查找<ul>下的所有<li>標籤
    var arrObj = ulObj.getElementByTagName("li");
    //給所有的<li>標籤增加css效果
    for(var i=0;i<arrObj.length;i++){
        //給每個<li>標記加style屬性
        arrObj[i].style = "color:bule;font-size:24px;";
    }
}
</script>
</head>
<body>
<ul id="ulTag">
    <li>html超文本標記語言</li>
    <li>css層疊樣式表</li>
    <li>JavaScript客戶端腳本</li>
    <li>WAMP:dindows+apache+mysql+php</li>
</ul>
</body>

元素對象的屬性

tagName：標籤名稱，與核心DOM中nodeName一樣
className：css類的樣式
id：同HTML標記id屬性一樣
title：同HTML標記的title屬性一樣
style：同HTML標籤的style屬性一樣
innerHTML：包含HTML標籤中的所有的內容，包括HTML標籤等

offsetWidth：元素對象的可見寬度，不帶px單位
offsetHeight：元素對象的可見高度，不帶px單位
scrollWidth：元素對象的總高度，包括滾動條中的內容，不帶px單位
scrollHeight：元素對象的總高度，包括滾動條中的內容，不帶px單位
scrollTop：指內容向上滾動上去了多少距離（有滾動條是纔有效），默認值爲0
scrollLeft：指內容向左滾動過去了多少距離（有滾動條時纔有效）
onscroll：當拖動滾動條時，調用JS函數

JavaScript自學筆記之學步闌珊

BOM和DOM介紹

Window對象屬性

window對象方法

DOM

工作中用到的腳本合集

24-5-18 X

HTML5標籤與標籤

CSS佈局之負邊距

border-radius邊框圓角效果（CSS3）

CSS經典佈局之雙飛翼佈局

JavaScript初級學習筆記

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結