課程內(nèi)容
1.認(rèn)識(shí)DOM
當(dāng)網(wǎng)頁被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁面的文檔對(duì)象模型（Document Object Model）。
- JavaScript 能夠改變頁面中的所有 HTML 元素
- JavaScript 能夠改變頁面中的所有 HTML 屬性
- JavaScript 能夠改變頁面中的所有 CSS 樣式
- JavaScript 能夠?qū)撁嬷械乃惺录龀龇磻?yīng)
1.1 DOM節(jié)點(diǎn)樹
1.2節(jié)點(diǎn)關(guān)系
<html>
<head>
<title>DOM 教程</title>
</head>
<body>
<h1>DOM 第一課</h1>
<p>Hello world!</p>
</body>
</html>
從上面的 HTML 中：
<html> 節(jié)點(diǎn)沒有父節(jié)點(diǎn)；它是根節(jié)點(diǎn)
<head> 和 <body> 的父節(jié)點(diǎn)是<html> 節(jié)點(diǎn)
文本節(jié)點(diǎn) "Hello world!" 的父節(jié)點(diǎn)是 <p> 節(jié)點(diǎn)
并且：
<html> 節(jié)點(diǎn)擁有兩個(gè)子節(jié)點(diǎn)：<head> 和 <body>
<head> 節(jié)點(diǎn)擁有一個(gè)子節(jié)點(diǎn)：<title> 節(jié)點(diǎn)
<title> 節(jié)點(diǎn)也擁有一個(gè)子節(jié)點(diǎn)：文本節(jié)點(diǎn) "DOM 教程"
<h1> 和 <p> 節(jié)點(diǎn)是同胞節(jié)點(diǎn)，同時(shí)也是<body> 的子節(jié)點(diǎn)
document 對(duì)象
每個(gè)載入瀏覽器的HTML文檔都會(huì)成為document對(duì)象。document對(duì)象包含了文檔的基本信息，我們可以通過JavaScript對(duì)HTML頁面中的所有元素進(jìn)行訪問、修改。
document對(duì)象常用屬性
- document.doctype
- document.title
- document.head
- document.body
Element 對(duì)象
除了document對(duì)象，在DOM中最常用的就是Element對(duì)象了，Element對(duì)象表示HTML元素。
Element 對(duì)象可以擁有類型為元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)的子節(jié)點(diǎn)，DOM提供了一系列的方法可以進(jìn)行元素的增、刪、改、查操作
Element有幾個(gè)重要屬性
- nodeName：元素標(biāo)簽名，還有個(gè)類似的tagName
- className：類名
- id：元素id
- children：子元素列表（HTMLCollection）
- childNodes：子元素列表（NodeList）
- firstChild：第一個(gè)子元素
- lastChild：最后一個(gè)子元素
- nextSibling：下一個(gè)兄弟元素
- previousSibling：上一個(gè)兄弟元素
- parentNode、parentElement：父元素
2.節(jié)點(diǎn)訪問
getElementById() 方法返回帶有指定 ID 的元素：如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。這也是獲取一個(gè)元素最快的方法
var elem = document.getElementById("test");
getElementsByTagName()方法返回所有指定標(biāo)簽的元素（搜索范圍包括本身）。返回值是一個(gè)HTMLCollection對(duì)象,也就是說，搜索結(jié)果是一個(gè)動(dòng)態(tài)集合，任何元素的變化都會(huì)實(shí)時(shí)反映在返回的集合中。這個(gè)方法不僅可以在document對(duì)象上調(diào)用，也可以在任何元素節(jié)點(diǎn)上調(diào)用。
var paras = document.getElementsByTagName("p");
getElementsByClassName() 方法返回一個(gè)類似數(shù)組的對(duì)象（HTMLCollection類型的對(duì)象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實(shí)時(shí)反映在返回結(jié)果中。這個(gè)方法不僅可以在document對(duì)象上調(diào)用，也可以在任何元素節(jié)點(diǎn)上調(diào)用。
var element=document.getElementsByClassName("intro");
querySelector()
querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)。如果有多個(gè)節(jié)點(diǎn)滿足匹配條件，則返回第一個(gè)匹配的節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。
var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');
querySelector方法無法選中CSS偽元素。
querySelectorAll()
querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)，返回的是NodeList類型的對(duì)象。NodeList對(duì)象不是動(dòng)態(tài)集合，所以元素節(jié)點(diǎn)的變化無法實(shí)時(shí)反映在返回結(jié)果中。
elementList = document.querySelectorAll(selectors);
querySelectorAll方法的參數(shù)，可以是逗號(hào)分隔的多個(gè)CSS選擇器，返回所有匹配其中一個(gè)選擇器的元素。
var matches = document.querySelectorAll("div.note, div.alert");
上面代碼返回class屬性是note或alert的div元素。
3.DOM修改添加
修改html內(nèi)容
修改 HTML 內(nèi)容的最簡單的方法時(shí)使用 innerHTML 屬性。
如需改變 HTML 元素的內(nèi)容，請(qǐng)使用這個(gè)語法：
document.getElementById(id).innerHTML=new HTML
<p id="p1">Hello World!</p>
<script>
//改變p1的內(nèi)容
var el = document.getElementById("p1");
el.innerHTML="New text!";
console.log(el);
</script>
修改html屬性
如需改變 HTML 元素的屬性，請(qǐng)使用這個(gè)語法：
document.getElementById(id).attribute=新值 document.getElementById(id).setAttribute(屬性, 值)
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
document.getElementById("image").setAttribute('class','pic');
</script>
改變樣式
element.style.xxx = xxx;
<p id="p1">我是段落，要變色</p>
<button>變色</button>
<script>
document.getElementsByTagName('button')[0].onclick=function(){
document.getElementById('p1').style.color="red";
}
</script>
創(chuàng)建新的 HTML 元素
創(chuàng)建元素，然后把它追加到已有的元素上
<div class="d1">
</div>
<script>
var para=document.createElement("p");
para.innerHtml="我是新添加的段落";
var element=document.getElementById("d1");
element.appendChild(para);
</script>
添加元素
appendChild，使用方法target.appendChild(newChild);
<div id="content"></div>
<button id="btn">添加圖片</button>
<script>
var btn = document.getElementById("btn");
btn.onclick=function(){
var img = document.createElement("img");
img.src = "http://www.baidu.com/img/baidu_sylogo1.gif";
btn.appendChild(img);
}
<script>
insertBefore
- insertBefore() 方法的作用是：在現(xiàn)有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)
- insertBefore用法:target.insertBefore(newChild,existingChild)
- newChild作為target的子節(jié)點(diǎn)插入到existingChild節(jié)點(diǎn)之前
刪除元素
removeChild
element.removeChild(img);
