一、BOM
（1）bom就是浏覽器對象模型
（2）常用屬性
window.location.href//操作浏覽器的目前網頁位址
window.location.search//擷取url中？之後的内容
window.location.hash//得到url中#之後的内容
(3)事件捕獲
addEventListener（“click”，function，false）
二、DOM
（1）DOM不屬于JS是W3C的内容，其作用就是為了随心所欲操作網頁上的節點
（2）元素與節點的差別
W3C中：
在 HTML DOM （文檔對象模型）中，每個部分都是節點：
文檔本身是文檔節點
所有 HTML 元素是元素節點
所有 HTML 屬性是屬性節點
HTML 元素内的文本是文本節點 （包括回車符也是屬于文本節點）
注釋是注釋節點
Element 對象可以擁有類型為元素節點、文本節點、注釋節點的子節點。
NodeList 對象表示節點清單，比如 HTML 元素的子節點集合。
元素也可以擁有屬性。屬性是屬性節點。
（3）擷取元素與節點總結
//①擷取元素系列（就是document去擷取）
document.getElementById()
document.getElementsByClassId()
document.getElementsByTagName()
//getElementsByTagName()可以根據标簽名來擷取一組元素節點對象
//這個方法會給我們傳回一個類數組對象，所有查詢到的元素都會封裝到對象中
//即使查詢到的元素隻有一個，也會封裝到數組中傳回
document.querySelector()//()中是用css選擇器的選擇方式
document.querySelectorAll()
/*
* 如果需要讀取元素節點屬性，
* 直接使用 元素.屬性名
* 例子：元素.id 元素.name 元素.value
* 注意：class屬性不能采用這種方式，
* 讀取class屬性時需要使用 元素.className
*/
//②擷取結點系列
.childNodes//子結點
//childNodes屬性會擷取包括文本節點在呢的所有節點
//根據DOM标簽标簽間空白也會當成文本節點
.children//子元素
.previousSibling//上一個兄弟結點
.nextSibling//下一個兄弟節點
.previousElementSibling//擷取前一個兄弟元素
.nextElementSibling//擷取後一個兄弟元素
.parentNode//父
.firstElementChild//擷取目前元素的第一個子元素
.lastElementChild//擷取目前元素的最後一個子元素
.firstChild//第一個孩子節點
.lastChild//最後一個孩子節點
（3）DOM的增删改，這裡是觀看尚學堂視訊，實在是記不清講師名字了。抱歉
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
window.onload = function() {
//建立一個"廣州"節點,添加到#city下
myClick("btn01",function(){
//建立廣州節點 <li>廣州</li>
//建立li元素節點
/*
* document.createElement()
* 可以用于建立一個元素節點對象，
* 它需要一個标簽名作為參數，将會根據該标簽名建立元素節點對象，
* 并将建立好的對象作為傳回值傳回
*/
var li = document.createElement("li");
//建立廣州文本節點
/*
* document.createTextNode()
* 可以用來建立一個文本節點對象
* 需要一個文本内容作為參數，将會根據該内容建立文本節點，并将新的節點傳回
*/
var gzText = document.createTextNode("廣州");
//将gzText設定li的子節點
/*
* appendChild()
* - 向一個父節點中添加一個新的子節點
* - 用法：父節點.appendChild(子節點);
*/
li.appendChild(gzText);
//擷取id為city的節點
var city = document.getElementById("city");
//将廣州添加到city下
city.appendChild(li);
});
//将"廣州"節點插入到#bj前面
myClick("btn02",function(){
//建立一個廣州
var li = document.createElement("li");
var gzText = document.createTextNode("廣州");
li.appendChild(gzText);
//擷取id為bj的節點
var bj = document.getElementById("bj");
//擷取city
var city = document.getElementById("city");
/*
* insertBefore()
* - 可以在指定的子節點前插入新的子節點
* - 文法：
* 父節點.insertBefore(新節點,舊節點);
*/
city.insertBefore(li , bj);
});
//使用"廣州"節點替換#bj節點
myClick("btn03",function(){
//建立一個廣州
var li = document.createElement("li");
var gzText = document.createTextNode("廣州");
li.appendChild(gzText);
//擷取id為bj的節點
var bj = document.getElementById("bj");
//擷取city
var city = document.getElementById("city");
/*
* replaceChild()
* - 可以使用指定的子節點替換已有的子節點
* - 文法：父節點.replaceChild(新節點,舊節點);
*/
city.replaceChild(li , bj);
});
//删除#bj節點
myClick("btn04",function(){
//擷取id為bj的節點
var bj = document.getElementById("bj");
//擷取city
var city = document.getElementById("city");
/*
* removeChild()
* - 可以删除一個子節點
* - 文法：父節點.removeChild(子節點);
*
* 子節點.parentNode.removeChild(子節點);
*/
//city.removeChild(bj);
bj.parentNode.removeChild(bj);
});
//讀取#city内的HTML代碼
myClick("btn05",function(){
//擷取city
var city = document.getElementById("city");
alert(city.innerHTML);
});
//設定#bj内的HTML代碼
myClick("btn06" , function(){
//擷取bj
var bj = document.getElementById("bj");
bj.innerHTML = "昌平";
});
myClick("btn07",function(){
//向city中添加廣州
var city = document.getElementById("city");
/*
* 使用innerHTML也可以完成DOM的增删改的相關操作
* 一般我們會兩種方式結合使用
*/
//city.innerHTML += "<li>廣州</li>";
//建立一個li
var li = document.createElement("li");
//向li中設定文本
li.innerHTML = "廣州";
//将li添加到city中
city.appendChild(li);
});
};
function myClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜歡哪個城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>東京</li>
<li>首爾</li>
</ul>
</div>
</div>
<div id="btnList">
<div><button id="btn01">建立一個"廣州"節點,添加到#city下</button></div>
<div><button id="btn02">将"廣州"節點插入到#bj前面</button></div>
<div><button id="btn03">使用"廣州"節點替換#bj節點</button></div>
<div><button id="btn04">删除#bj節點</button></div>
<div><button id="btn05">讀取#city内的HTML代碼</button></div>
<div><button id="btn06">設定#bj内的HTML代碼</button></div>
<div><button id="btn07">建立一個"廣州"節點,添加到#city下</button></div>
</div>
</body>
</html>
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)