Js操作DOM
获取页面元素
id名获取元素
1 2 3 4 5 6 7 8 9 10
| <body> <div id="time">2022-06-01</div> <script> var timer = document.getElementById('time') console.dir(timer) </script> </body>
|
标签名获取元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| <body> <ul> <li>测测,测试1</li> <li>测测,测试2</li> <li>测测,测试3</li> <li>测测,测试4</li> </ul>
<ol id="olId"> <li>生僻字1</li> <li>生僻字2</li> <li>生僻字3</li> </ol>
<script> var lis = document.getElementsByTagName('li') console.log(lis); console.log(lis[0]); for (var i=0;i<lis.length;i++){ console.log(lis[i]); }
console.log('间隔'); var oll = document.getElementById('olId') console.log(oll.getElementsByTagName('li')); </script> </body>
|
新方法获取元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
| <body> <div class="box">盒子1</div> <div class="box">盒子2</div> <div id="nav"> <ul> <li>首页</li> <li>产品</li> </ul> </div>
<script> var boxs = document.getElementsByClassName('box') console.log(boxs);
var firstBox = document.querySelector('.box') console.log(firstBox); var nav = document.querySelector('#nav') console.log(nav); var lli = document.querySelector('li') console.log(lli);
var allBox = document.querySelectorAll('.box') console.log(allBox); </script> </body>
|
获取特殊的标签
1 2 3 4 5 6 7 8 9
| <script> var bodys = document.body console.log(bodys);
var htmlEle = document.documentElement console.log(htmlEle); </script>
|
事件
JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为。
简单理解:触发—响应机制
网页中的每个元素都可以产生某些可以触发JavaScript的事件,例如,我们可以在用户点击某个按钮时产生一个事件,然后去执行某些操作。
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <body> <button id="btn">唐伯虎</button> <script> var btn = document.getElementById('btn') btn.onclick=function(){ alert('点秋香'); } </script> </body>
|
执行事件的步骤示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <body> <div>123</div> <script> var btn = document.querySelector('div') btn.onclick = function () { console.log('我被点击了'); } </script> </body>
|
修改元素内容
innerText修改
innerText非标准,从起始到终止位置的内容,不能识别html的标签,同时空格和换行也会去掉
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| <body> <button>点我显示时间</button> <div id="time1">点击显示时间</div> <div id="time2">自动显示时间</div> <script> var btn = document.querySelector('button') var t1 = document.getElementById('time1') btn.onclick = function () { t1.innerText = '2022-06-01 11:03:45' }
function getTime() { var date = new Date(); var year = date.getFullYear(); var month = date.getMonth(); var dates = date.getDate(); var zhou = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] var day = date.getDay();
return '今天是' + year + '年' + month + '月' + dates + '日 ' + zhou[day]; } var t2 = document.getElementById('time2') t2.innerText = getTime(); </script> </body>
|
innerHTML修改
innerHTML是w3c标准,从起始到终止位置所有内容,可以识别html的标签,同时保留空格和换行。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| <body> <div id="time2">自动显示时间</div> <script> function getTime() { var date = new Date(); var year = date.getFullYear(); var month = date.getMonth(); var dates = date.getDate(); var zhou = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] var day = date.getDay();
return '<strong>今天是:</strong>' + year + '年' + month + '月' + dates + '日 ' + zhou[day]; } var t2 = document.getElementById('time2') t2.innerHTML = getTime(); </script> </body>
|
修改元素属性
设定俩个按钮,通过js实现点击不同按钮时,修改图片的src和title属性。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| <body> <button id="img1">图片1</button> <button id="img2">图片2</button><br> <img src="https://oss.putianhui.cn/admin/bg10.jpeg" alt="" title=""> <script> var im1 = document.getElementById('img1') var im2 = document.getElementById('img2') var imgs = document.querySelector('img') im1.onclick = function () { imgs.src = 'https://oss.putianhui.cn/admin/bg01.jpeg' imgs.title = '图片1' } im2.onclick = function () { imgs.src = 'https://oss.putianhui.cn/admin/bg02.jpeg' imgs.title = '图片2' } </script> </body>
|