js-API 03 DOM節點操作，BOM

阿新 • • 發佈：2020-08-04

DOM
一，節點
HTML 文件中的所有內容都是節點：
整個文件是一個文件節點document，每個 HTML 元素是元素節點，HTML 元素內的文字是文字節點，每個 HTML 屬性是屬性節點，註釋是註釋節點
二,獲取節點型別的三種方式
Nodetype
Nodetype獲取節點的型別
1  element 元素節點
2  attr     屬性節點
3  Text    文字節點
8  comment註釋節點
nodeName
元素節點的 nodeName 是標籤名稱（大寫）
屬性節點的 nodeName 是屬性名稱
文字節點的 nodeName 永遠是 #text
文件節點的 nodeName 永遠是 #document
nodeValue
對於文字節點，nodeValue 屬性包含文字。
對於屬性節點，nodeValue 屬性包含屬性值。
文件節點和元素節點，nodeValue 屬性的值始終為  
null。
三,建立元素
document.write()
document.createElement()
box.innerHTML
四,Event事件的相容寫法
獲得event物件相容性寫法 
event ||  window.event;
event.target||event.srcElement
五,繫結事件的新方式
addEventListener和attachEvent方法
son.addEventListener('click', once1);
物件.addEventListener("事件型別",事件處理函式,false)
引數1:事件的型別---事件的名字,沒有on
引數2:事件處理函式 
---函式(命名函式,匿名函式)
引數3:布林型別,是否冒泡
區別 this不同,addEventListener 中的this是當前繫結事件的物件
六,移除解綁事件
三,繫結解綁
繫結事件 addEventListener
var son = document.querySelector(".son");
son.addEventListener('click', once1,false);
function once1() {
alert(1)
}

繫結事件attachEvent()
解綁事件
son.removeEventListener('click', once1,false);
 
function once1() {
alert(1)
}

解綁事件的其他方法
 物件.detachEvent("on事件型別",函式名字)；
元素.onclick=null;
七，如何阻止冒泡（存在相容性）
e.stopPropagation(); 谷歌和火狐支援,
window.event.cancelBubble=true; IE特有的,谷歌支援,火狐不支援

BOM
一,對話方塊
alert()
prompt()
confirm()
二,載入事件
Onload事件
onload 事件會在頁面或影象載入完成後立即發生。
onload 通常用於 <body> 元素，在頁面完全載入後(包括圖片、css檔案等等。)執行指令碼程式碼。
三,Location物件
常用屬性
位址列上#及後面的內容
console.log(window.location.hash);
主機名及埠號
console.log(window.location.host);
主機名
console.log(window.location.hostname);
檔案的路徑---相對路徑
console.log(window.location.pathname);
埠號
console.log(window.location.port);
協議
console.log(window.location.protocol);
搜尋的內容
console.log(window.location.search);
瀏覽器地址
window.location.href
跳轉的
my$("btn1").onclick = function () {
window.location.href = "15test.html";};
Navigator物件
通過userAgent可以判斷使用者瀏覽器的型別
console.log(window.navigator.userAgent);
四,定時器
SetInteval()
clearInteval()
setTimeout()
五,阻止預設事件
w3c的方法是e.preventDefault()
IE則是使用e.returnValue = false;