使用HTML5的JavaScript选择器操作页面中的元素

2023-07-16 16:17:09

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用HTML5的JavaScript选择器操作页面中的元素</title>
</head>
<body>
   <div>
       
       <h2>兴趣和爱好:<label></label></h2>
       
       <input type="checkbox" id="c1"><label for="c1">篮球</label>
       <input type="checkbox" id="c2"><label for="c2">唱歌</label>
       <input type="checkbox" id="c3"><label for="c3">游泳</label>
       <input type="checkbox" id="c4"><label for="c4">桌球</label>
       <br><br>
       <button>获取兴趣爱好</button>
   </div>
   <script type="text/javascript">
        //监听获取按钮的点击事件(元素选择器)
       document.querySelector('button').addEventListener('click',function(e){
          //按钮默认事件
          e.preventDefault();
          //获取所有选中的复选框(伪类选择器)
          var checked=document.querySelectorAll('input:checked'),
          results=[];//结果数组
          //将元素列表转化为数组
          checked=Array.prototype.slice.call(checked);
          //循环数组,获取选中的值
          checked.forEach(function(item){
              var id=item.getAttribute('id'),//获取复选框id
              //(属性选择器)
              label=document.querySelector('label[for="'+id+'"]');//根据id获取对应label元素
              results.push(label.innerHTML);//将数值推入数组
          });
               //(子元素选择器)
               document.querySelector('h2>label').innerHTML=results.join(',');//设置显示标签内容
       });
   </script>
</body>
</html>

码农公寓

相关文章