javascript的DOM操作可以改變網(wǎng)頁內(nèi)容、結(jié)構(gòu)和樣式，我們可以利用DOM操作元素來改變?cè)乩锩娴膬?nèi)容、屬性等入挣，以下都是屬性：
element.innerText從起始位置到終止位置的內(nèi)容，但它去除html標(biāo)簽硝拧，同時(shí)空格和換行也會(huì)去掉
element.innerHTML起始位置到終止位置的全部?jī)?nèi)容径筏，包括html標(biāo)簽，同時(shí)保留空格和換行
innerText 屬性表示一個(gè)節(jié)點(diǎn)及其后代的“渲染”文本內(nèi)容障陶。
<style>
div {
width: 300px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: pink;
}
</style>
</head>
<body>
<button>顯示當(dāng)前系統(tǒng)時(shí)間</button>
<div>某個(gè)時(shí)間</div>
<script>
//當(dāng)點(diǎn)擊按鈕滋恬，div里的文字發(fā)生變化
//1.獲取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
//注冊(cè)事件：
btn.onclick = function() {
//div.innerText = '2019-6-6';這樣就寫死了
div.innerText = getDate();
}
function getDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
return '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day];
}
</script>
getDate();根據(jù)本地時(shí)間，返回一個(gè)指定的日期對(duì)象為一個(gè)月中的哪一日（從1--31）抱究。
getDay();方法根據(jù)本地時(shí)間恢氯，返回一個(gè)具體日期中一周的第幾天，0 表示星期天鼓寺。對(duì)于某個(gè)月中的第幾天勋拟，參考`Date.prototype.getDate()
getFullYear() 方法根據(jù)本地時(shí)間返回指定日期的年份。
getHours() 方法根據(jù)本地時(shí)間妈候，返回一個(gè)指定的日期對(duì)象的小時(shí)敢靡。
getMonth()根據(jù)本地時(shí)間，返回一個(gè)指定的日期對(duì)象的月份苦银，為基于0的值（0表示一年中的第一月）醋安。
<style>
p,
div {
width: 300px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: pink;
}
</style>
</head>
<body>
<button>顯示當(dāng)前系統(tǒng)時(shí)間</button>
<div>某個(gè)時(shí)間</div>
<p>123</p>
<script>
//當(dāng)點(diǎn)擊按鈕墓毒，div里的文字發(fā)生變化
//1.獲取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
//注冊(cè)事件：
btn.onclick = function() {
//div.innerText = '2019-6-6';這樣就寫死了
div.innerText = getDate();
}
function getDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
return '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day];
}
//元素不添加點(diǎn)擊事件，直接觸發(fā)
var p = document.querySelector('p');
p.innerText = getDate();
</script>
<div></div>
<script>
//element.innerText和element.innerHTML區(qū)別
//1.element.innerText(不識(shí)別html標(biāo)簽团秽，直接打出來了)
var div = document.querySelector('div');
div.innerText = '<strong>今天是：</strong> 2020';
//element.innerHTML
var div = document.querySelector('div');
div.innerHTML = '<strong>今天是：</strong> 2020';
</script>
<div></div>
<p>
我是文字
<span>123</span>
</p>
<script>
//element.innerText和element.innerHTML區(qū)別
//1.element.innerText(不識(shí)別html標(biāo)簽主胧，直接打出來了)
var div = document.querySelector('div');
div.innerText = '<strong>今天是：</strong> 2020';
//element.innerHTML
var div = document.querySelector('div');
div.innerHTML = '<strong>今天是：</strong> 2020';
//這兩個(gè)屬性都是可讀寫的，既可以賦值习勤，也可以獲取元素里的內(nèi)容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
1.innerText踪栋、innerHTML改變?cè)貎?nèi)容
2.src、href
3.id图毕、alt夷都、title
默認(rèn)圖片是劉德華。點(diǎn)擊按鈕切換成對(duì)應(yīng)的圖片
<button id="ldh">劉德華</button>
<button id="zxy">張學(xué)友</button>
<br>
<img src="ldh.jpg" alt="" title="劉德華">
<script>
//修改元素屬性 src 其他屬性是一樣的方法
//1.獲取元素
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
//注冊(cè)事件：處理程序
zxy.onclick = function() {
img.src = 'zxy.jpg'; //點(diǎn)擊張學(xué)友按鈕后予颤，圖片換成張學(xué)友圖片囤官，完成賦值操作
img.title = '張學(xué)友'; //title是鼠標(biāo)放到圖片上時(shí)圖片顯示的文字
}
ldh.onclick = function() {
img.src = 'ldh.jpg'; //點(diǎn)擊劉德華按鈕后冬阳，圖片換成劉德華圖片(ldh.jpg不是代碼，是圖片路徑党饮，這里是把圖片的路徑賦值給img.src)
img.title = '劉德華';
}
</script>
根據(jù)不同時(shí)間肝陪，頁面顯示不同圖片，同時(shí)顯示不同的問候語
如果是上午打開頁面刑顺，顯示上午好氯窍，顯示上午圖片
如果是下午打開頁面，顯示下午好蹲堂，顯示下午圖片
如果是晚上打開頁面狼讨，顯示晚上好，顯示晚上圖片
分析：
1.根據(jù)系統(tǒng)不同時(shí)間來判斷贯城，所以需要用到日期內(nèi)置函數(shù)
2.用多分支語句來設(shè)置不同圖片
3.需要一個(gè)圖片熊楼，并且根據(jù)時(shí)間修改圖片，就需要用到操作元素src屬性
4.需要一個(gè)div元素能犯，顯示不同問候語鲫骗，修改元素內(nèi)容即可
<style>
img {
width: 300px;
}
</style>
</head>
<body>
<img src="images/s.gif" alt="">
<div>上午好</div>
<script>
//>根據(jù)不同時(shí)間，頁面顯示不同圖片踩晶，同時(shí)顯示不同的問候語
// 如果是上午打開頁面执泰，顯示上午好，顯示上午圖片
// 如果是下午打開頁面渡蜻，顯示下午好术吝，顯示下午圖片
// 如果是晚上打開頁面，顯示晚上好茸苇，顯示晚上圖片
//1.獲取元素
var img = document.querySelector('img');
var div = document.querySelector('div');
//獲取當(dāng)前小時(shí)數(shù)
var date = new Date();
var h = date.getHours();
//判斷小時(shí)數(shù)改變圖片和文字
if (h < 12) {
img.src = 'images/s.gif';
div.innerHTML = '親排苍，上午好';
} else if (h < 18) {
img.src = 'images/x.gif';
div.innerHTML = '親，下午好';
} else {
img.src = 'images/w.gif';
div.innerHTML = '親学密，晚上好';
}
</script>
