整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
在美女畫廊的案例中，我們需要獲取到 img 元素，并修改 img 中顯示的圖片還需要獲取到頁面上的 p 元素修改 p 元素中顯示的內(nèi)容，本章中我們就來學(xué)習(xí)如何修改元素的相關(guān)屬性。
基本屬性指的是 HTML 標(biāo)簽本身所具有的屬性(HTML 中的標(biāo)準(zhǔn)屬性)，這些屬性在瀏覽器把 HTML 文檔生成 DOM 樹的時(shí)候會(huì)自動(dòng)設(shè)置為 DOM 樹上元素節(jié)點(diǎn)對(duì)象的屬性。
常用的基本屬性：href、title、id、src。
獲取或者設(shè)置基本屬性的語法和步驟：
// 獲取 DOM 元素
let dom = document.getElementById('id');
// 獲取屬性
console.log(dom.屬性名稱)
// 設(shè)置屬性
dom.屬性名稱 = '屬性值'<a id="link" href="http://www.baidu.com">百度</a>let link = document.getElementById('link');
// 獲取元素的屬性
console.log(link.id); // "link"
console.log(link.href); // "http://www.baidu.com/"let link = document.getElementById('link');
// 設(shè)置元素的屬性
link.title = 'google';
link.href = 'http://www.google.com';你可以嘗試下點(diǎn)擊按鈕修改 img 標(biāo)簽的圖片(修改 src 屬性)。
在美女畫廊中我們需要更改 p 標(biāo)簽之間的內(nèi)容，但是如何設(shè)置標(biāo)簽之間的內(nèi)容？這里沒有對(duì)應(yīng) HTML 的標(biāo)準(zhǔn)屬性，但是這是一種常見的操作 DOM 對(duì)象提供了兩個(gè)屬性可以讓我們方便的修改標(biāo)簽之間的內(nèi)容：textContent 和 innerHTML，下面我們分別來介紹。
let p = document.getElementById('p');
// 獲取標(biāo)簽之間的內(nèi)容
console.log(p.textContent);
// 設(shè)置標(biāo)簽之間的內(nèi)容
p.textContent = 'Hello DOM';你可能在其他地方見過 innerText 屬性，注意這是早期 IE 中獲取或者設(shè)置標(biāo)簽之間文本內(nèi)容的屬性，現(xiàn)代瀏覽器依然支持該屬性，但是 DOM 中規(guī)定的標(biāo)準(zhǔn)屬性是 textContent
let p = document.getElementById('p');
// 獲取標(biāo)簽之間的內(nèi)容
console.log(p.innerHTML)
// 設(shè)置標(biāo)簽之間的內(nèi)容
p.innerHTML = '<b>Hello DOM</b>'在網(wǎng)頁中有一些特殊的符號(hào)，比如：< >；想要顯示這些符號(hào)需要對(duì)這些內(nèi)容進(jìn)行轉(zhuǎn)義，也就是使用 HTML 的實(shí)體。
字符實(shí)體的表示形式：
&字符實(shí)體編號(hào);
< // < 顯示小于號(hào)
> // > 顯示大于號(hào)顯示結(jié)果 | 描述 | 實(shí)體名稱 | 實(shí)體編號(hào) |
空格 |
|
| |
< | 小于號(hào) | < | < |
> | 大于號(hào) | > | > |
& | 和號(hào) | & | & |
" | 引號(hào) | " | " |
' | 撇號(hào) | ' (IE不支持) | ' |
￠ | 分（cent） | ¢ | ¢ |
￡ | 鎊（pound） | £ | £ |
￥ | 元（yen） | ¥ | ¥ |
€ | 歐元（euro） | € | € |
§ | 小節(jié) | § | § |
? | 版權(quán)（copyright） | © | © |
? | 注冊(cè)商標(biāo) | ® | ® |
? | 商標(biāo) | ™ | ™ |
× | 乘號(hào) | × | × |
÷ | 除號(hào) | ÷ | ÷ |
需要記住其中的空、>、< 的字符實(shí)體名稱
// 1. 獲取一組a元素
let links = document.getElementsByTagName('a');
// 2. 獲取id為photo的img元素
let photo = document.getElementById('photo');
// 3. 獲取id為des的p元素
let p = document.getElementById('des');
// 4. 循環(huán)遍歷a，注冊(cè) click事件
for (let i = 0; i < links.length; i++) {
links[i].onclick = function () {
// 4.1 獲取當(dāng)前點(diǎn)擊的a的href值賦值給 img的src屬性
photo.src = this.href;
// 4.2 獲取當(dāng)前點(diǎn)擊的a的title值賦值給p的 textContent
p.textContent = this.title;
// 4.3 取消a的默認(rèn)跳轉(zhuǎn)行為
return false;
};
}注意：給 a 元素注冊(cè)點(diǎn)擊事件的時(shí)候，如果 a 元素設(shè)置了 href 屬性，當(dāng)觸發(fā) a 的點(diǎn)擊事件并且事件處理函數(shù)執(zhí)行完畢后，會(huì)繼續(xù)執(zhí)行跳轉(zhuǎn)到 href 屬性，這是 a 標(biāo)簽的默認(rèn)行為。
我們想要 a 的事件處理函數(shù)不跳轉(zhuǎn)，取消 a 標(biāo)簽的默認(rèn)行為可以在事件處理函數(shù)中 return false
JavaScript 最初的目的是用來驗(yàn)證用戶的輸入是否合法，為了實(shí)現(xiàn)表單元素的驗(yàn)證，我們需要獲取用戶輸入的內(nèi)容，這需要使用到表單元素的屬性。
let btn = document.querySelector('#btn');
btn.onclick = function () {
let username = document.querySelector('#username').value;
let pwd = document.querySelector('#pwd').value;
let chk = document.querySelector('#chk');
if (!chk.checked) {
alert('請(qǐng)同意用戶協(xié)議');
return false;
}
if (username.length < 3 || username.length > 6) {
alert('用戶名應(yīng)該在3-6位之間');
return false;
}
if (pwd.length < 8) {
alert('密碼必須超過8位');
return false;
}
alert('我去登陸了')
// 阻止 a 的默認(rèn)行為
return false;
};// 1. 獲取復(fù)選框
let agree = document.querySelector('#agree');
// 2. 獲取按鈕
let registerBtn = document.querySelector('#registerBtn');
// 3. 給復(fù)選框注冊(cè)點(diǎn)擊事件
agree.onclick = function () {
registerBtn.disabled = !agree.checked;
};// 1. 獲取thead中一個(gè)復(fù)選框
let allck = document.querySelector('#all');
// 2. 獲取tbody中一組復(fù)選框
//【功能1】
let cks = document.querySelectorAll('tbody input[type=checkbox]');
// 3. 給thead中一個(gè)復(fù)選框注冊(cè)點(diǎn)擊事件
allck.onclick = function () {
// 3.1 獲取thead中這個(gè)復(fù)選框的checked值
let isOk = allck.checked;
// 3.2 循環(huán)遍歷tbody中的每一個(gè)復(fù)選框，設(shè)置checked值為thead中這個(gè)復(fù)選框的checked值
for (let i = 0; i < cks.length; i++) {
cks[i].checked = isOk;
}
};
//【功能2】
// 1. 循環(huán)遍歷tbody中每一個(gè)復(fù)選框注冊(cè)點(diǎn)擊事件
for (let i = 0; i < cks.length; i++) {
cks[i].onclick = function () {
// 2. 獲取tbody中所有的復(fù)選框的個(gè)數(shù)
let len1 = cks.length;
//3. 獲取tbody中選中的復(fù)選框的個(gè)數(shù)
let len2 = document.querySelectorAll('tbody input:checked').length;
// 4. 對(duì)比是否一致，若一致，則設(shè)置thead中全選框?yàn)閠rue，否則為false
if (len1 === len2) {
allck.checked = true;
} else {
allck.checked = false;
}
};
}到這里為止我們介紹的都是標(biāo)簽所擁有的屬性，也就是 HTML 中的標(biāo)準(zhǔn)屬性，標(biāo)簽中還支持自定義屬性，為了到達(dá)某些業(yè)務(wù)的需求，我們可以把數(shù)據(jù)存儲(chǔ)到標(biāo)簽的自定義屬性中。
例如：在購物車的案例中，如果我們要?jiǎng)h除某個(gè)購物車中的商品的話，我們可以把這條數(shù)據(jù)的 id 存儲(chǔ)到當(dāng)前行的自定義屬性中，例如：proId 這個(gè)屬性。
自定義屬性有兩種用法，分別是：
// div
const d5 = document.querySelector('#d5');
const d6 = document.querySelector('#d6');
// 瀏覽器中審查元素，可以看到 d5 的 div 中會(huì)有 proId 的屬性
d5.setAttribute('proId', 5)
console.log(d5.getAttribute('prodId'))
// 瀏覽器審查元素，可以看到 data-pro-id 的屬性
// 瀏覽器自動(dòng)把大寫字母轉(zhuǎn)換成了 pro-id 的形式
d6.dataset.proId = 6
console.log(d6.dataset.proId)注意：我們獲取到的自定義屬性或者標(biāo)準(zhǔn)屬性的值都是字符串類型。
<div id="d5" prodId="5">刪除</div>
<div id="d6">刪除</div>瀏覽器在處理 HTML 的時(shí)候，會(huì)把 HTML 文檔轉(zhuǎn)換為瀏覽器內(nèi)存中的 DOM 樹，在轉(zhuǎn)換的過程中，標(biāo)簽的 HTML 標(biāo)準(zhǔn)屬性會(huì)被轉(zhuǎn)換為 DOM 元素的屬性，但是標(biāo)簽的自定義屬性不會(huì)轉(zhuǎn)換為 DOM元素的屬性。
const d5 = document.querySelector('#d5');
console.log(d5.proId); // 打印的結(jié)果為 undefined但是我們可以設(shè)置 DOM 元素的自定義屬性，注意，這里的自定義屬性并不會(huì)轉(zhuǎn)換成 HTML 標(biāo)簽的自定義屬性，僅僅是對(duì)象的屬性，我們依然可以通過 DOM 對(duì)象，獲取到該屬性的值。
const d6 = document.querySelector('#d6');
d6.proId = 6
console.log(d6.proId); // 打印結(jié)果為 6<img id="small" width="80px" src="./images/small.jpg" data-big="./images/big.jpg"/>
<img id="big" src="./images/placeholder.jpg" />let small = document.querySelector('#small');
let big = document.querySelector('#big');
small.onclick = function () {
// 在事件處理函數(shù)中可以通過 this 獲取到觸發(fā)事件的元素
// 這里的 this 就是 small 對(duì)象
let bigImgSrc = this.dataset.big;
big.src = bigImgSrc;
};HTML DOM 允許 JavaScript 改變 HTML 元素的內(nèi)容。
改變 HTML 輸出流
JavaScript 能夠創(chuàng)建動(dòng)態(tài)的 HTML 內(nèi)容：
今天的日期是： Thu Aug 25 2016 09:23:24 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)
在 JavaScript 中，document.write() 可用于直接向 HTML 輸出流寫內(nèi)容。
實(shí)例
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
| 絕對(duì)不要在文檔加載完成之后使用 document.write()。這會(huì)覆蓋該文檔。 |
改變 HTML 內(nèi)容
修改 HTML 內(nèi)容的最簡(jiǎn)單的方法時(shí)使用 innerHTML 屬性。
如需改變 HTML 元素的內(nèi)容，請(qǐng)使用這個(gè)語法：
document.getElementById(id).innerHTML=新的 HTML
本例改變了 <p>元素的內(nèi)容：
實(shí)例
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>
本例改變了 <h1> 元素的內(nèi)容：
實(shí)例
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新標(biāo)題";
</script>
</body>
</html>
實(shí)例講解：
上面的 HTML 文檔含有 id="header" 的 <h1> 元素
我們使用 HTML DOM 來獲得 id="header" 的元素
JavaScript 更改此元素的內(nèi)容 (innerHTML)
改變 HTML 屬性
如需改變 HTML 元素的屬性，請(qǐng)使用這個(gè)語法：
document.getElementById(id).attribute=新屬性值
本例改變了 <img> 元素的 src 屬性：
實(shí)例
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
實(shí)例講解：
上面的 HTML 文檔含有 id="image" 的 <img> 元素
我們使用 HTML DOM 來獲得 id="image" 的元素
JavaScript 更改此元素的屬性（把 "smiley.gif" 改為 "landscape.jpg"）
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
到目前為止，我們已經(jīng)學(xué)過了JavaScript的一些簡(jiǎn)單的語法。但是這些簡(jiǎn)單的語法，并沒有和瀏覽器有任何交互。
也就是我們還不能制作一些我們經(jīng)?？吹降木W(wǎng)頁的一些交互，我們需要繼續(xù)學(xué)習(xí)BOM和DOM相關(guān)知識(shí)。
JavaScript分為 ECMAScript，DOM，BOM。
BOM（Browser Object Model）是指瀏覽器對(duì)象模型，它使 JavaScript 有能力與瀏覽器進(jìn)行“對(duì)話”。
DOM （Document Object Model）是指文檔對(duì)象模型，通過它，可以訪問HTML文檔的所有元素。
Window對(duì)象是客戶端JavaScript最高層對(duì)象之一，由于window對(duì)象是其它大部分對(duì)象的共同祖先，在調(diào)用window對(duì)象的方法和屬性時(shí)，可以省略window對(duì)象的引用。例如：window.document.write()可以簡(jiǎn)寫成：document.write()。
window對(duì)象
看上面的例子你會(huì)發(fā)現(xiàn)，name直接封裝到了window對(duì)象上，了解一下就可以了。
所有瀏覽器都支持 window 對(duì)象。它表示瀏覽器窗口。
*如果文檔包含框架（frame 或 iframe 標(biāo)簽），瀏覽器會(huì)為 HTML 文檔創(chuàng)建一個(gè) window 對(duì)象，并為每個(gè)框架創(chuàng)建一個(gè)額外的 window 對(duì)象（了解）。
*沒有應(yīng)用于 window 對(duì)象的公開標(biāo)準(zhǔn)，不過所有瀏覽器都支持該對(duì)象（了解）。
所有 JavaScript 全局對(duì)象、函數(shù)以及變量均自動(dòng)成為 window 對(duì)象的成員。
全局變量是 window 對(duì)象的屬性。全局函數(shù)是 window 對(duì)象的方法。
接下來要講的HTML DOM 的 document 也是 window 對(duì)象的屬性之一。
一些常用的Window方法：（在瀏覽器調(diào)試器的console里面輸入下面這些屬性或者方法，就能看到對(duì)應(yīng)的效果）
window的子對(duì)象
navigator對(duì)象（了解即可）
瀏覽器對(duì)象，通過這個(gè)對(duì)象可以判定用戶所使用的瀏覽器，包含了瀏覽器相關(guān)信息。
1
2
3
4
navigator.appName // Web瀏覽器全稱
navigator.appVersion // Web瀏覽器廠商和版本的詳細(xì)字符串
navigator.userAgent // 客戶端絕大部分信息
navigator.platform // 瀏覽器運(yùn)行所在的操作系統(tǒng)
看示例：
screen對(duì)象（了解即可）
屏幕對(duì)象，不常用。
一些屬性：
history對(duì)象（了解即可）
window.history 對(duì)象包含瀏覽器的歷史。
瀏覽歷史對(duì)象，包含了用戶對(duì)當(dāng)前頁面的瀏覽歷史，但我們無法查看具體的地址，可以簡(jiǎn)單的用來前進(jìn)或后退一個(gè)頁面。
1
2
history.forward() // 前進(jìn)一頁，其實(shí)也是window的屬性，window.history.forward()
history.back() // 后退一頁
location對(duì)象
window.location 對(duì)象用于獲得當(dāng)前頁面的地址 (URL)，并把瀏覽器重定向到新的頁面。
常用屬性和方法：
1
2
3
location.href 獲取URL
location.href="URL" // 跳轉(zhuǎn)到指定頁面
location.reload() 重新加載頁面,就是刷新一下頁面
上面的內(nèi)容需要大家記住的是：
1.window對(duì)象
2.window的子對(duì)象：location的那幾個(gè)屬性和方法
3.其他的作為了解
我們下面來學(xué)些比較有意思有用的內(nèi)容：
彈出框
可以在 JavaScript 中創(chuàng)建三種消息框：警告框、確認(rèn)框、提示框。
警告框
警告框經(jīng)常用于確保用戶可以得到某些信息。
當(dāng)警告框出現(xiàn)后，用戶需要點(diǎn)擊確定按鈕才能繼續(xù)進(jìn)行操作。
語法：
1
alert("你看到了嗎？");
確認(rèn)框（了解即可）
確認(rèn)框用于使用戶可以驗(yàn)證或者接受某些信息。
當(dāng)確認(rèn)框出現(xiàn)后，用戶需要點(diǎn)擊確定或者取消按鈕才能繼續(xù)進(jìn)行操作。
如果用戶點(diǎn)擊確認(rèn)，那么返回值為 true。如果用戶點(diǎn)擊取消，那么返回值為 false。
語法：
1
confirm("你確定嗎？")
我們可以根據(jù)返回的true和false來判斷一下，然后根據(jù)這個(gè)值來使用location去跳轉(zhuǎn)對(duì)應(yīng)的網(wǎng)站。
提示框（了解即可）
提示框經(jīng)常用于提示用戶在進(jìn)入頁面前輸入某個(gè)值。
當(dāng)提示框出現(xiàn)后，用戶需要輸入某個(gè)值，然后點(diǎn)擊確認(rèn)或取消按鈕才能繼續(xù)操縱。
如果用戶點(diǎn)擊確認(rèn)，那么返回值為輸入的值。如果用戶點(diǎn)擊取消，那么返回值為默認(rèn)值，就是第二個(gè)參數(shù)，如果沒有默認(rèn)值那么返回null。
語法：
1
prompt("請(qǐng)?jiān)谙路捷斎?,"你的答案")
可以通過用戶輸入的內(nèi)容來判斷我們?cè)趺慈ミM(jìn)行后面的操作
除了那個(gè)警告框（用的也不都），其他的都很少用，比較丑陋，了解一下就行
計(jì)時(shí)相關(guān)（比較重要）
通過使用 JavaScript，我們可以在一定時(shí)間間隔之后來執(zhí)行代碼，而不是在函數(shù)被調(diào)用后立即執(zhí)行。我們稱之為計(jì)時(shí)事件。
setTimeout() 一段時(shí)間后做一些事情
語法：
1
var t=setTimeout("JS語句",毫秒) 第一個(gè)參數(shù)js語句多數(shù)是寫一個(gè)函數(shù)，不然一般的js語句到這里就直接執(zhí)行了，先用函數(shù)封裝一下，返回值t其實(shí)就是一個(gè)id值（瀏覽器給你自動(dòng)分配的）
setTimeout() 方法會(huì)返回某個(gè)值。在上面的語句中，值被儲(chǔ)存在名為 t 的變量中。假如你希望取消這個(gè) setTimeout()，你可以使用這個(gè)變量名來指定它。
setTimeout() 的第一個(gè)參數(shù)是含有 JavaScript 語句的字符串。這個(gè)語句可能諸如 "alert('5 seconds!')"，或者對(duì)函數(shù)的調(diào)用，諸如 alertMsg()"。
第二個(gè)參數(shù)指示從當(dāng)前起多少毫秒后執(zhí)行第一個(gè)參數(shù)（1000 毫秒等于一秒）。
clearTimeout()
語法：
1
clearTimeout(setTimeout_variable)
舉個(gè)例子：
1
2
3
4
// 在指定時(shí)間之后執(zhí)行一次相應(yīng)函數(shù)
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout設(shè)置
clearTimeout(timer);
setInterval() 每隔一段時(shí)間做一些事情
setInterval() 方法可按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式。
setInterval() 方法會(huì)不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)。
語法：
1
setInterval("JS語句",時(shí)間間隔)
返回值
一個(gè)可以傳遞給 Window.clearInterval() 從而取消對(duì) code 的周期性執(zhí)行的值。
clearInterval()
clearInterval() 方法可取消由 setInterval() 設(shè)置的 timeout。
clearInterval() 方法的參數(shù)必須是由 setInterval() 返回的 ID 值。
語法：
1
clearInterval(setinterval返回的ID值)
舉個(gè)例子：
1
2
3
4
// 每隔一段時(shí)間就執(zhí)行一次相應(yīng)函數(shù)
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval設(shè)置
clearInterval(timer);
DOM
DOM（Document Object Model）是一套對(duì)文檔的內(nèi)容進(jìn)行抽象和概念化的方法。
當(dāng)網(wǎng)頁被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁面的文檔對(duì)象模型（Document Object Model）。
HTML DOM 模型被構(gòu)造為對(duì)象的樹。
HTML DOM 樹
DOM標(biāo)準(zhǔn)規(guī)定HTML文檔中的每個(gè)成分都是一個(gè)節(jié)點(diǎn)(node)：
JavaScript 可以通過DOM創(chuàng)建動(dòng)態(tài)的 HTML：
查找標(biāo)簽（和css一樣，你想操作某個(gè)標(biāo)簽需要先找到它）
直接查找
document.getElementById 根據(jù)ID獲取一個(gè)標(biāo)簽
document.getElementsByClassName 根據(jù)class屬性獲?。梢垣@取多個(gè)元素，所以返回的是一個(gè)數(shù)組）
document.getElementsByTagName 根據(jù)標(biāo)簽名獲取標(biāo)簽合集
例子：
間接查找
parentElement 父節(jié)點(diǎn)標(biāo)簽元素
children 所有子標(biāo)簽
firstElementChild 第一個(gè)子標(biāo)簽元素
lastElementChild 最后一個(gè)子標(biāo)簽元素
nextElementSibling 下一個(gè)兄弟標(biāo)簽元素
previousElementSibling 上一個(gè)兄弟標(biāo)簽元素
如果查找出來的內(nèi)容是個(gè)數(shù)組，那么就可以通過索引來取對(duì)應(yīng)的標(biāo)簽對(duì)象
上面說的這些查找標(biāo)簽的方法，以后我們很少用，等學(xué)了JQuery，會(huì)有很好用、更全的查找標(biāo)簽的功能，上面這些大家簡(jiǎn)單練習(xí)一下，有個(gè)了解就行了。
節(jié)點(diǎn)操作
創(chuàng)建節(jié)點(diǎn)（就是創(chuàng)建標(biāo)簽）
語法：
createElement(標(biāo)簽名)
示例：
1
var divEle = document.createElement("div");
添加節(jié)點(diǎn)
語法：
追加一個(gè)子節(jié)點(diǎn)（作為最后的子節(jié)點(diǎn)）
somenode.appendChild(newnode)；
把增加的節(jié)點(diǎn)放到某個(gè)節(jié)點(diǎn)的前邊。
somenode.insertBefore(newnode,某個(gè)節(jié)點(diǎn));
示例：
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);
刪除節(jié)點(diǎn)：
語法：
獲得要?jiǎng)h除的元素，通過父元素調(diào)用該方法刪除。
somenode.removeChild(要?jiǎng)h除的節(jié)點(diǎn))
替換節(jié)點(diǎn)：
語法：
somenode.replaceChild(newnode, 某個(gè)節(jié)點(diǎn));
somenode是父級(jí)標(biāo)簽，然后找到這個(gè)父標(biāo)簽里面的要被替換的子標(biāo)簽，然后用新的標(biāo)簽將該子標(biāo)簽替換掉
屬性節(jié)點(diǎn)
獲取文本節(jié)點(diǎn)的值：
var divEle = document.getElementById("d1")
divEle.innerText #輸入這個(gè)指令，一執(zhí)行就能獲取該標(biāo)簽和內(nèi)部所有標(biāo)簽的文本內(nèi)容
divEle.innerHTML #獲取的是該標(biāo)簽內(nèi)的所有內(nèi)容，包括文本和標(biāo)簽
設(shè)置文本節(jié)點(diǎn)的值：
var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>" #能識(shí)別成一個(gè)p標(biāo)簽
attribute操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18") #比較規(guī)范的寫法
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自帶的屬性還可以直接.屬性名來獲取和設(shè)置，如果是你自定義的屬性，是不能通過.來獲取屬性值的
imgEle.src
imgEle.src="..."
獲取值操作
語法：
elementNode.value
適用于以下標(biāo)簽，用戶輸入或者選擇類型的標(biāo)簽：
1.input
2.select
3.textarea
var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);
例如：頁面上有下面三個(gè)標(biāo)簽
class的操作
className 獲取所有樣式類名(字符串)
首先獲取標(biāo)簽對(duì)象
標(biāo)簽對(duì)象.classList.remove(cls) 刪除指定類
classList.add(cls) 添加類
classList.contains(cls) 存在返回true，否則返回false
classList.toggle(cls) 存在就刪除，否則添加，toggle的意思是切換，有了就給你刪除，如果沒有就給你加一個(gè)
例如：我想將c2的類加到class里面去
指定CSS操作
obj.style.backgroundColor="red"
JS操作CSS屬性的規(guī)律：
1.對(duì)于沒有中橫線的CSS屬性一般直接使用style.屬性名即可。如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2.對(duì)含有中橫線的CSS屬性，將中橫線后面的第一個(gè)字母換成大寫即可。如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
我們上面所說的這些修改樣式的方法，是不是應(yīng)該應(yīng)用在用戶的某些操作上啊，如果你用戶點(diǎn)擊了某個(gè)內(nèi)容，讓它變變顏色之類的，給用戶一些好看的效果或者指示的效果啊，所以這就要和我們下面要學(xué)的事件結(jié)合起來要做的事情，通過事件+上面的樣式修改來實(shí)現(xiàn)。
事件
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發(fā)瀏覽器中的動(dòng)作（action），比如當(dāng)用戶點(diǎn)擊某個(gè) HTML 元素時(shí)啟動(dòng)一段 JavaScript。下面是一個(gè)屬性列表，這些屬性可插入 HTML 標(biāo)簽來定義事件動(dòng)作。
常用事件(就先說一下onfocus，onblur，onclick，onchange吧，其他的回頭再說~~)
onclick 當(dāng)用戶點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。
ondblclick 當(dāng)用戶雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。
onfocus 元素獲得焦點(diǎn)。 // 練習(xí)：輸入框
onblur 元素失去焦點(diǎn)。 應(yīng)用場(chǎng)景：用于表單驗(yàn)證,用戶離開某個(gè)輸入框時(shí),代表已經(jīng)輸入完了,我們可以對(duì)它進(jìn)行驗(yàn)證.
onchange 域的內(nèi)容被改變。 應(yīng)用場(chǎng)景：通常用于表單元素,當(dāng)元素內(nèi)容被改變時(shí)觸發(fā).（select聯(lián)動(dòng)）
onkeydown 某個(gè)鍵盤按鍵被按下。 應(yīng)用場(chǎng)景: 當(dāng)用戶在最后一個(gè)輸入框按下回車按鍵時(shí),表單提交.
onkeypress 某個(gè)鍵盤按鍵被按下并松開。
onkeyup 某個(gè)鍵盤按鍵被松開。
onload 一張頁面或一幅圖像完成加載。
onmousedown 鼠標(biāo)按鈕被按下。
onmousemove 鼠標(biāo)被移動(dòng)。
onmouseout 鼠標(biāo)從某元素移開。
onmouseover 鼠標(biāo)移到某元素之上。
onselect 在文本框中的文本被選中時(shí)發(fā)生。
onsubmit 確認(rèn)按鈕被點(diǎn)擊，使用的對(duì)象是form。
綁定方式：
方式一：（已經(jīng)不常用了，多數(shù)用方式二了）
<div id="d1" onclick="changeColor(this);">點(diǎn)我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
注意：
this是實(shí)參，表示觸發(fā)事件的當(dāng)前元素。
函數(shù)定義過程中的ths為形參。
方式二：
<div id="d2">點(diǎn)我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
//console.log(this)
this.innerText="呵呵"; #哪個(gè)標(biāo)簽觸發(fā)的這個(gè)事件，this就指向誰
}
</script>
注意一個(gè)問題：
還有一種解決辦法就是將script標(biāo)簽寫到body標(biāo)簽最下面
結(jié)合計(jì)時(shí)器的事件示例，input框里面動(dòng)態(tài)顯示時(shí)間:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>定時(shí)器</title>
<script> //當(dāng)js代碼中有找標(biāo)簽的操作的時(shí)候，別忘了頁面加載的時(shí)候的順序，以防出現(xiàn)找不到標(biāo)簽的情況出現(xiàn)，我們可以將這個(gè)script標(biāo)簽放到body標(biāo)簽最下面，或者用window.onload，<br>這里我沒有放，你們練習(xí)的時(shí)候放到下面去
var intervalId; //用來保存定時(shí)器對(duì)象，因?yàn)殚_始定時(shí)器是一個(gè)函數(shù)，結(jié)束定時(shí)器是一個(gè)函數(shù)，兩個(gè)函數(shù)都是操作的一個(gè)定時(shí)器，讓他們互相能夠操作這個(gè)定時(shí)器，<br>就需要一個(gè)全局變量來接受一下這個(gè)對(duì)象
//把當(dāng)前事件放到id為i1的input標(biāo)簽里面
function f() {
var timeStr = (new Date()).toLocaleString(); // 1.拿到當(dāng)前事件
var inputEle = document.getElementById("i1");// 2.獲取input標(biāo)簽對(duì)象
inputEle.value = timeStr; //3.將事件賦值給input標(biāo)簽的value屬性
}
//開始定時(shí)任務(wù)
function start() {
f();
if (intervalId === undefined) { //如果不加這個(gè)判斷條件，你每次點(diǎn)擊開始按鈕，就創(chuàng)建一個(gè)定時(shí)器，每點(diǎn)一次就創(chuàng)建一個(gè)定時(shí)器，點(diǎn)的次數(shù)多了就會(huì)在頁面上生成好多個(gè)定時(shí)器，<br>并且點(diǎn)擊停止按鈕的時(shí)候，只能停止最后一個(gè)定時(shí)器，這樣不好，也不對(duì)，所以加一個(gè)判斷
intervalId = setInterval(f, 1000);
}
}
//結(jié)束定時(shí)任務(wù)
function end() {
clearInterval(intervalId); // 清除對(duì)應(yīng)的那個(gè)定時(shí)器
intervalId = undefined;
}
</script>
</head>
<body>
<input type="text" id="i1">
<input type="button" value="開始" id="start" onclick="start();">
<input type="button" value="結(jié)束" id="end" onclick="end();">
</body>
</html>
事件示例：
搜索框示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框示例</title>
</head>
<body>
<input id="d1" type="text" value="請(qǐng)輸入關(guān)鍵字" onblur="blur()" onfocus="focus()">
<script>
function focus(){ //如果在標(biāo)簽中寫的blur()等方法，沒有傳入this參數(shù)，那么我們就需要自己來獲取一下這個(gè)標(biāo)簽，例如下面的getElementById('d1')
var inputEle=document.getElementById("d1");
if (inputEle.value==="請(qǐng)輸入關(guān)鍵字"){
inputEle.value="";
//inputEle.setAttribute('value','')
}
}
function blur(){
var inputEle=document.getElementById("d1");
var val=inputEle.value;
if(!val.trim()){
inputEle.value="請(qǐng)輸入關(guān)鍵字";
}
}
</script>
</body>
</html>
select聯(lián)動(dòng)：選擇省份，自動(dòng)列出所有的城市，例如：選擇河北省就顯示河北省所有的市
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>select聯(lián)動(dòng)</title>
</head>
<body>
<select id="province">
<option>請(qǐng)選擇省:</option>
</select>
<select id="city">
<option>請(qǐng)選擇市:</option>
</select>
<script>
data = {"河北省": ["廊坊", "邯鄲"], "北京": ["朝陽區(qū)", "海淀區(qū)"], "山東": ["威海市", "煙臺(tái)市"]};
var p = document.getElementById("province");
var c = document.getElementById("city");
//頁面一刷新就將所有的省份都添加到select標(biāo)簽中
for (var i in data) {
var optionP = document.createElement("option"); //創(chuàng)建option標(biāo)簽
optionP.innerHTML = i; //將省份的數(shù)據(jù)添加到option標(biāo)簽中
p.appendChild(optionP);//將option標(biāo)簽添加到select標(biāo)簽中
}
//只要select中選擇的值發(fā)生變化的時(shí)候，就可以觸發(fā)一個(gè)onchange事件，那么我們就可以通過這個(gè)事件來完成select標(biāo)簽聯(lián)動(dòng)
p.onchange = function () {
//1.獲取省的值
var pro = (this.options[this.selectedIndex]).innerHTML;//this.selectedIndex是當(dāng)前選擇的option標(biāo)簽的索引位置，this.options是獲取所有的option標(biāo)簽，<br>通過索引拿到當(dāng)前選擇的option標(biāo)簽對(duì)象，然后.innerHTML獲取對(duì)象中的內(nèi)容，也就是省份
//還可以這樣獲取?。簐ar pro = this.value;
var citys = data[pro]; //2. 通過上面獲得的省份去data里面取出該省對(duì)應(yīng)的所有的市
// 3. 清空option
c.innerHTML = ""; //清空顯示市的那個(gè)select標(biāo)簽里面的內(nèi)容
//4.循環(huán)所有的市，然后添加到顯示市的那個(gè)select標(biāo)簽中
for (var i=0;i<citys.length;i++) {
var option_city = document.createElement("option");
option_city.innerHTML = citys[i];
c.appendChild(option_city);
}
}
</script>
</body>
</html>
window.onload
當(dāng)我們給頁面上的元素綁定事件的時(shí)候，必須等到文檔加載完畢。因?yàn)槲覀儫o法給一個(gè)不存在的元素綁定事件。
window.onload事件在文件加載過程結(jié)束的時(shí)候觸發(fā)。此時(shí)，文檔中的所有對(duì)象都位于DOM中，并且所有圖像，腳本，鏈接和子框架都已完成加載。
注意：.onload()函數(shù)存在覆蓋現(xiàn)象。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
