BOM和DOM編程:
BOM(BOM(browser object model)?????瀏覽器對(duì)象模型
DOM(document object model) 文檔對(duì)象模型
window? === 瀏覽器
?history? ? ? 歷史記錄
?location? ?? 路徑
screen????屏幕
navigator????瀏覽器內(nèi)核信息?
document????文檔DOM
1埠偿、window.open()????打開新窗口
2契讲、window.close()????關(guān)閉當(dāng)前窗口
3排龄、window.moveTo()?????移動(dòng)當(dāng)前窗口 (相對(duì)于左上角)
4浪默、window.resizeTo()????調(diào)整當(dāng)前窗口的尺寸
5、window.moveBy()?????移動(dòng)當(dāng)前窗口 (相對(duì)于鼠標(biāo))
6、window.location?????????對(duì)象用于獲得當(dāng)前頁(yè)面的地址 (URL),并把瀏覽器重定向到新的頁(yè)面
history? ? ? 歷史記錄
1封拧、history.length ?? 當(dāng)前站點(diǎn)的瀏覽次數(shù)
2、history.back() ?? 返回上一頁(yè)
3夭问、history.forward() ?? 返回下一頁(yè)
4泽西、history.go() ? ? ?? -1 表示向后,1表示向前
screen ? ? 屏幕
1缰趋、screen.width ? ? ?? 屏幕寬度
2捧杉、screen.height????????? 屏幕高度
3、screen.availWidth ? ? ?? 獲取除任務(wù)欄外系統(tǒng)屏幕的寬
4秘血、screen.availHeight????????獲取除任務(wù)欄外系統(tǒng)屏幕的高
navigator????瀏覽器內(nèi)核信息
1味抖、navigator.userAgent ? ? ? 對(duì)象包含有關(guān)訪問者瀏覽器的信息
location ? ?? 位置
1、window.location.href???? 當(dāng)前url
2灰粮、window.location.hostname????主機(jī)名稱
3仔涩、window.location.host???? 主機(jī)名稱 + 端口
4、window.location.port???? 端口
5粘舟、window.location.protocol???? 協(xié)議
6熔脂、window.location.search?????后面的值
7佩研、window.location.hash????錨點(diǎn)后面的值
?Javascript中認(rèn)為document根節(jié)點(diǎn)
document節(jié)點(diǎn)樹
獲取DOM對(duì)象的方式:
1、通過id直接調(diào)取霞揉,不推薦旬薯,知道就好
2、通過id适秩,使用document對(duì)象getElementById方法來(lái)獲取
3绊序、通過class類名稱,來(lái)獲然嘬瘛(返回值是一個(gè)列表)
通過下標(biāo)增加
4骤公、通過標(biāo)簽名稱
5、通過name屬性來(lái)獲嚷旎帷:(name)屬性是表單元素專有的淋样,所以不建議使用
二、操作DOM對(duì)象的內(nèi)容
1胁住、操作DOM對(duì)象的內(nèi)容有三種方法:innerHTML
innerText:操作內(nèi)容的文本
innerContent:
注意xss和csrf攻擊:使用inner時(shí)一定要注意使用安全的數(shù)據(jù)
操作DOM對(duì)象的屬性:
1、DOM對(duì)象.屬性???????? 修改新的:DOM對(duì)象.屬性=新值
2刊咳、DOM對(duì)象["屬性名稱"]
3彪见、DOM對(duì)象.getAttribute("屬性名稱");DOM對(duì)象.setAttribute("屬性名稱", "新值");
操作DOM對(duì)象的樣式:
通過DOM對(duì)象.style.樣式名稱這種方式,獲取樣式值跷坝,只能獲取行內(nèi)樣式酵镜,無(wú)法獲取頁(yè)面或者外聯(lián)樣式
? w3c為大家提供了一個(gè)api,用于獲取樣式
該api存在兼容性柴钻,IE9+:console.info(_show.style.width);
針對(duì)于IE8及其以下瀏覽器淮韭,MS專門提供了一個(gè)api:
console.info(_show.currentStyle.height)
獲取寬、高
另一種方法: 因?yàn)楂@取寬高的值進(jìn)行操作贴届,那么使用之前的方法靠粪,獲取的值是攜帶單位的字符串操作時(shí)需要先去掉單位,計(jì)算完成后毫蚓,賦值時(shí)又需要拼接單位占键, offsetWidth? offsetHeight 獲取的時(shí)候是存在邊框
+