JS函數(shù)的重載
什么是重載？ 方法名相同，參數(shù)不同
- JS是否存在重載？
--不存在，調(diào)用最后一個(gè)方法,把傳遞的參數(shù)保存到arguments里面
-- 但是可以通過其他方式模擬重載 arguments
BOM browser object model 瀏覽器對(duì)象模型
有哪些對(duì)象？
- navigator 獲取客戶機(jī)的信息（瀏覽器的信息）
navigator.appName - screen 獲取屏幕的信息
screen.width/ screen .height - localtion 請(qǐng)求url的地址
href屬性
-- 獲取到請(qǐng)求的url地址 location.href
-- 設(shè)置url地址
頁(yè)面上設(shè)置一個(gè)按鈕，綁定事件，點(diǎn)擊頁(yè)面跳轉(zhuǎn)另一個(gè)頁(yè)面
<input type="button" value = "tiaozhuan" onclick="href1"> - history
history.back()
history.forward()
- window
-窗口對(duì)象
-頂層對(duì)象(所有的bom對(duì)象都是在windows里面操作的)
方法：
a. windows.alert() 頁(yè)面彈窗，顯內(nèi)容
b. windows.confirm() 確認(rèn)框
var flag = windows.confirm("顯示的內(nèi)容");
c. prompt: 輸入的對(duì)話框
window.promp("pls input ：","0")
window.promp("在顯示的內(nèi)容 ：","默認(rèn)值")
d. open(): 可以打開一個(gè)新的窗口，
open("打開新窗口的地址","","窗口特征，比如高度和寬度")
-- 創(chuàng)建一個(gè)按鈕，點(diǎn)擊打開新的窗口
window.open("JSDate.html","","width=200,height=300");
e. close()關(guān)閉窗口 瀏覽器兼容性差
windows.close()
f. 做定時(shí)器
--setInterval("JS代碼"，“毫秒數(shù)”) 每3秒執(zhí)行一次js代碼
window.setInterval("alert('123')","3000");
--setTimeout("JS代碼"，“毫秒數(shù)”) 在毫秒數(shù)之后執(zhí)行，只執(zhí)行一次
window.setTimeout(alert('12345'),"2000");
-- clearInterval() //清除setInterval
var id1 = window.setInterval("alert('123')","3000");
//通過setInterval會(huì)有一個(gè)返回值
-- clearTimeout() //清除setTimeout
DOM document object model： 文檔對(duì)象模型
- 文檔：超文本文檔（超文本標(biāo)記文檔）html、xml
對(duì)象：提供了屬性和方法
模型： 使用屬性和方法操作不好文本標(biāo)記型文檔
-- 可以使用js里面的dom提供的對(duì)象的屬性和方法，對(duì)標(biāo)記性文檔進(jìn)行操作
-- 如何進(jìn)行操作？ 首先 封裝成對(duì)象（需要把html中的標(biāo)簽 屬性文本內(nèi)容都封裝成對(duì)象）
-- 要想對(duì)標(biāo)記型文檔進(jìn)行操作，解析標(biāo)記型文檔
-- 解析過程
根據(jù)html的層級(jí)結(jié)構(gòu) 在內(nèi)存中分配一個(gè)樹形結(jié)構(gòu) 需要把html中的每部分封裝成對(duì)象
-document對(duì)象：整個(gè)文檔
-element對(duì)象：標(biāo)簽對(duì)象
-屬性對(duì)象
-文本對(duì)象
-- node對(duì)象，這些對(duì)象的父對(duì)象
如果在對(duì)象里面找不到想要的方法 這個(gè)時(shí)候到Node對(duì)象里面去找 - DOM 模型和DHTML
DOM的三種模型：
-- level1 將html文檔封裝成對(duì)象
-- level2 在level1的基礎(chǔ)上添加新的功能，例如：對(duì)于事件和CSS樣式的支持
-- level3 支持xml11.0的一些新特性 - DHTML 是很多技術(shù)的簡(jiǎn)稱：
-HTML： 封裝數(shù)據(jù)
-css：使用屬性和屬性值設(shè)置樣式
-dom ：操作html文檔
-javascript：專門指的是js的語(yǔ)法語(yǔ)句（ECMAScript）
Document對(duì)象
- 表示整個(gè)對(duì)象
- 常用方法
- write()方法：a. 向頁(yè)面輸出變量 b. 向頁(yè)面輸出html代碼
- getElementById():通過id得到標(biāo)簽，返回對(duì)象
// getElementById() 通過id得到標(biāo)簽
var input1 = document.getElementById("name");
//得到input的value值
alert(input1.value);
//向input中設(shè)置一個(gè)值value
input1.value = "cccc";
- getElementsByName(): 通過標(biāo)簽的name的屬性值得到標(biāo)簽，返回集合或數(shù)組
var input2 = document.getElementsByName("byname");//傳遞的參數(shù)是name的屬性值
alert(input2.length);
//遍歷數(shù)組
for (var i = input2.length - 1; i >= 0; i--) {
document.write(input2[i].value);
document.write("<br/>");
}
- getElementsByTagName(): 通過標(biāo)簽名稱得到標(biāo)簽，返回集合或數(shù)組
// 演示getElementsByTagName方法
var input3 = document.getElementsByTagName("input");//傳遞的參數(shù)是標(biāo)簽名稱
alert(input3.length);
for (var i = input3.length - 1; i >= 0; i--) {
alert(input3[i].value);
}
- 注意：只有一個(gè)標(biāo)簽或name，這個(gè)使用getEelementsByname(or TagName)返回的是一個(gè)數(shù)組，但是只有一個(gè)，可以直接數(shù)組下標(biāo)獲取值
var input3 = document.getElementsByTagName("input")[0];
alert(input3.value);
Window 練習(xí)
opener:可以得到創(chuàng)建這個(gè)窗口的窗口
//實(shí)現(xiàn)input1方法
fucntion input1(num1.nam1){
//需要把num1 和nam1 復(fù)制到window頁(yè)面，
//跨頁(yè)面的操作 opener:可以得到創(chuàng)建這個(gè)窗口的窗口
var pwin = window.opener();
pwin.document.getElementById("userId").value = num1;
pwin.document.getElementById("userName").value = nam1;
//關(guān)閉窗口
wimdow.close();
}
練習(xí)一：在末尾添加節(jié)點(diǎn)
- 獲取到ul標(biāo)簽
- 創(chuàng)建li標(biāo)簽 document.createElement()
- 創(chuàng)建文本document.createTextNode()
- 將文本添加到li下 appendChild()
- 將li添加到ul下
function add1(){
//獲取到ul標(biāo)簽
var ul1 = document.getElementById("ulid");
//創(chuàng)建標(biāo)簽
var li1 = document.createElement("li");
//創(chuàng)建文本
var text1 = document.createTextNode("555");
//文本加入li下面
li1.appendChild(text1);
//li加入ul末尾
ul1.appendChild(li1);
}
元素對(duì)象
- 要操作element對(duì)象，首先必須要獲取到element，使用document的方法獲取
- 方法：
- getAttribute(): 獲取的值
//獲取input標(biāo)簽
var input1 = document.getElementById("inputid");
alert(input1.value);
alert(input1.getAttrinute(value));
- setAttribute(name,value);
- removeAttribute(name); 無(wú)法刪除value
- 獲取標(biāo)簽下的子標(biāo)簽
a. 使用屬性childNodes 但是兼容性很差
b. 在Element對(duì)象中查找其他節(jié)點(diǎn)的唯一有效方法就是getElementByTagName()方法，返回一個(gè)集合
//獲取到ul標(biāo)簽
var ul2 = document.getElementById("ulid");
//獲取子標(biāo)簽
var licount = ul2.getElementsByTagName("li");
alert(licount.length);
Node對(duì)象屬性一
- nodeName
- nodeType
- nodeValue
- 使用dom解析html的時(shí)候，需要html'里面的標(biāo)簽，屬性，文本都封裝成對(duì)象
- 標(biāo)簽節(jié)點(diǎn)對(duì)應(yīng)的值
nodeType：1
nodeName：大寫的標(biāo)簽名稱 eg:SPAN
nodeValue: null - 屬性節(jié)點(diǎn)對(duì)應(yīng)的值
nodeType：2
nodeName：屬性名稱
nodeValue: 屬性的值 - 文本節(jié)點(diǎn)對(duì)應(yīng)的值
nodeType：3
nodeName：text
nodeValue: 文本內(nèi)容
Node對(duì)象屬性二
- 父節(jié)點(diǎn)
parentNode
//Node節(jié)點(diǎn)演示：得到li
var li2 = document.getElementById("li11");
//得到ul
var ul22 = li2.parentNode;
alert(ul22.id);
- 子節(jié)點(diǎn)
childNodes：得到所有的子節(jié)點(diǎn)，兼容性很差
firstChild：獲取第一個(gè)子節(jié)點(diǎn)
var ul3 = document.getElementById("ulid");
var li111 = ul3.firstChild;
alert(li111.id);
lastChild：獲取最后一個(gè)子節(jié)點(diǎn)
var ul3 = document.getElementById("ulid");
alert(ul3.lastChild.id);
- 同輩節(jié)點(diǎn)
nextSibling:返回給定節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)
previousSibling:返回給定節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn)
var li33 = document.getElementById("li33");
alert(li33.nextSibling.id);
