我们可以利用DOM操作元素来改变元素里面的内容、属性等。
1、操作元素内容：element.innerText和element.innerHTML
<body><button>按钮</button><div>这是一个盒子</div><p>abc</p><script>var btn = document.querySelector('button');var div = document.querySelector('div');btn.onclick = function () {// div.innerText = "里面什么都没有";div.innerText = getTime();}function getTime() {var time = new Date();var h = time.getHours();h = h < 10 ? '0' + h : h;var m = time.getMinutes();m = m < 10 ? '0' + m : m;var s = time.getSeconds();s = s < 10 ? '0' + s : s;return h + ':' + m + ':' + s;}// 元素可不添加事件var p = document.querySelector('p');p.innerHTML = getTime();</script></body>
innerHTML和innerText的区别。
①innerText不识别html标签是非标准，可读写元素里面的内容，读写时去除空格与换行
②innerHTML识别html标签是W3C标准，可读写元素里面的内容，读写时保留空格与换行。
2、操作常见元素属性：
img可修改元素有title、src、alt。
input可修改元素type、value、checked、selected、disabled。
<body><img src="img/1641115576293.jpeg"><button>按钮</button><input type="text" value="这是个input"><script>var img = document.querySelector('img');var button = document.querySelector('button');var input = document.querySelector('input');img.src = 'img/qq.jpeg';button.onclick = function () {input.value = '改变一下文字';// this指向的是时间函数的调用者 button，等同于button.disabled=truethis.disabled=true;}</script></body>
3、操作元素样式属性：
修改元素的大小、颜色、位置等样式。
element.style 行内样式操作
<head><style>.div {width: 100px;height: 100px;background-color: pink;}.box{display: block;position: relative;}.close{cursor: pointer;position: absolute;top: 0px;left: 0px;}</style></head><body><div class="box"><div class="div"></div><i class="close">×</i></div><script>var box = document.querySelector('.box');var btn = document.querySelector('.close')btn.onclick = function () {// 驼峰命名法box.style.display = 'none';}</script></body>
精灵图遍历。
<head><style>.bx{width: 500px;margin: 0 auto;}ul{list-style: none;}ul>li{width: 100px;height: 100px;margin: 10px;float: left;background: url(img\contact_icons.png) no-repeat;}</style></head><body><div class="bx"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><script>var imgs=document.querySelectorAll('li');for(var i=0;i<imgs.length;i++){var index=i*50;imgs[i].style.backgroundPosition='0 -'+index+'px';}</script></body>
显示隐藏文本框内容。
<head><style>input {color: #999;}</style></head><body><input type="text" value="搜索"><script>var text = document.querySelector('input')// 得到焦点text.onfocus = function () {if (this.value === '搜索') {this.value = '';}this.style.color = '#333';}// 失去焦点text.onblur = function () {if (this.value === '') {this.value = '搜索'}this.style.color = '#999';}</script></body>
element.className 类名样式操作。
通过修改元素的className更改元素样式，适用于样式较多或者功能复杂的情况，使用className后会覆盖掉原来的类名。
如果要保留原来的类名可使用多类名选择器。
<head><style>div {background-color: pink;}.box {width: 200px;height: 200px;}.change {margin-top: 50px;background-color: antiquewhite;}</style></head><body><div class="box">这是一个div</div><script>var test = document.querySelector('div')test.onclick = function () {this.className = 'box change'}</script></body>
