很多时候我们经常会同时操作多个DOM对象,此时,可以使用循环来遍历DOM数组。
假如我们有这样的需求:
把所有的p标签的字体变为蓝色,字体大小为25px
把列表的奇数行的颜色变为红色
样例代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>这是第一个p标签</p> <p>这是第二个p标签</p> <p>这是第三个p标签</p> <p>这是第四个p标签</p> <p>这是第五个p标签</p> <p>这是第六个p标签</p> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <script> let arrp = document.getElementsByTagName('p'); let arrl = document.getElementsByTagName('li'); for(let i=0;i<arrp.length;i++){ arrp[i].style.color = 'blue'; arrp[i].style.fontSize = '25px'; } for(let i=0;i<arrl.length;i++){ if(i%2==0){ // 下标是从0开始的,所以arrl[0]是第一行 arrl[i].style.color='red'; } } </script> </body> </html>
效果截图: