javascript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等，以下都是属性：
element.innerText从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
element.innerHTML起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
innerText 属性表示一个节点及其后代的“渲染”文本内容。
<style>
div {
width: 300px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: pink;
}
</style>
</head>
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<script>
//当点击按钮，div里的文字发生变化
//1.获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
//注册事件：
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>
image.png
image.png
getDate();根据本地时间，返回一个指定的日期对象为一个月中的哪一日（从1--31）。
getDay();方法根据本地时间，返回一个具体日期中一周的第几天，0 表示星期天。对于某个月中的第几天，参考`Date.prototype.getDate()
getFullYear() 方法根据本地时间返回指定日期的年份。
getHours() 方法根据本地时间，返回一个指定的日期对象的小时。
getMonth()根据本地时间，返回一个指定的日期对象的月份，为基于0的值（0表示一年中的第一月）。
<style>
p,
div {
width: 300px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: pink;
}
</style>
</head>
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>123</p>
<script>
//当点击按钮，div里的文字发生变化
//1.获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
//注册事件：
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];
}
//元素不添加点击事件，直接触发
var p = document.querySelector('p');
p.innerText = getDate();
</script>
image.png
<div></div>
<script>
//element.innerText和element.innerHTML区别
//1.element.innerText(不识别html标签，直接打出来了)
var div = document.querySelector('div');
div.innerText = '<strong>今天是：</strong> 2020';
//element.innerHTML
var div = document.querySelector('div');
div.innerHTML = '<strong>今天是：</strong> 2020';
</script>
image.png
image.png
<div></div>
<p>
我是文字
<span>123</span>
</p>
<script>
//element.innerText和element.innerHTML区别
//1.element.innerText(不识别html标签，直接打出来了)
var div = document.querySelector('div');
div.innerText = '<strong>今天是：</strong> 2020';
//element.innerHTML
var div = document.querySelector('div');
div.innerHTML = '<strong>今天是：</strong> 2020';
//这两个属性都是可读写的，既可以赋值，也可以获取元素里的内容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
image.png
1.innerText、innerHTML改变元素内容
2.src、href
3.id、alt、title
默认图片是刘德华。点击按钮切换成对应的图片
<button id="ldh">刘德华</button>
<button id="zxy">张学友</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');
//注册事件：处理程序
zxy.onclick = function() {
img.src = 'zxy.jpg'; //点击张学友按钮后，图片换成张学友图片，完成赋值操作
img.title = '张学友'; //title是鼠标放到图片上时图片显示的文字
}
ldh.onclick = function() {
img.src = 'ldh.jpg'; //点击刘德华按钮后，图片换成刘德华图片(ldh.jpg不是代码，是图片路径，这里是把图片的路径赋值给img.src)
img.title = '刘德华';
}
</script>
image.png
根据不同时间，页面显示不同图片，同时显示不同的问候语
如果是上午打开页面，显示上午好，显示上午图片
如果是下午打开页面，显示下午好，显示下午图片
如果是晚上打开页面，显示晚上好，显示晚上图片
分析：
1.根据系统不同时间来判断，所以需要用到日期内置函数
2.用多分支语句来设置不同图片
3.需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
4.需要一个div元素，显示不同问候语，修改元素内容即可
<style>
img {
width: 300px;
}
</style>
</head>
<body>
<img src="images/s.gif" alt="">
<div>上午好</div>
<script>
//>根据不同时间，页面显示不同图片，同时显示不同的问候语
// 如果是上午打开页面，显示上午好，显示上午图片
// 如果是下午打开页面，显示下午好，显示下午图片
// 如果是晚上打开页面，显示晚上好，显示晚上图片
//1.获取元素
var img = document.querySelector('img');
var div = document.querySelector('div');
//获取当前小时数
var date = new Date();
var h = date.getHours();
//判断小时数改变图片和文字
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>
image.png
网友评论