JavaScript基础之第八天获取元素与事件

1. 使用id获取元素

   1. 返回文档中一个指定ID的元素，用于精确获取
   2. 出现多个id名的情况，CSS样式对所有该id名的元素都生效，但js脚本仅对第一个出现该id名的元素生效。
   3. getElementById()该方法接收一个参数：要取得元素的id，若找到则返回该元素，若不存在则返回null.
      1. 

2. 获取与设置元素内容

   1. 获取或设置元素内容
      1. innerText 返回的是标签内的文本值,不包含html
         1. 
      2. innerHTML 返回的是标签内的 html内容，包含html标签
         1. 

3. 获取与设置元素属性

   1. 

4. 通用方法获取和设置属性

   1. 获取任意属性:元素.getAttribute("属性名");
      1. 
   2. 设置任意属性:元素.setAttribute("属性名","属性值");
      1. 

5. 获取设置行内样式中的属性

   1. 获取元素的行内样式的某个样式      语法:  元素.style.某个样式
      1. 
   2. 设置元素的行内样式的某个样式
      1. .
      2. 添加和删除类名
         1. var zxw = document.getElementById("wyzxw");
                        添加类名,已有相同类名，不会添加
                        zxw.classList.add("zxw2");
                        zxw.classList.add("zxw2","zxw3");
         2. 删除类名,如果要删除的类名没有，也不会出错
            1. zxw.classList.remove("zxw3");
                zxw.classList.remove("zxw3","zxw2");
            2. css样式
               1. .zxw1{color: black;font-size: 16px;}
                  .zxw2{color: red;font-size: 24px;}
                  .zxw3{width: 200px;height: 100px;border: 2px solid black;}

6. 元素类名的切换

   1. toggle在有相同类名时执行删除，没有相同类名时执行添加
   2. 强制执行添加或删除
      1. 语法：toggle("类名",布尔值) 第2个参数为:true  执行添加 第2个参数为:false  执行删除

      2. classList 属性返回元素的类名

      3. zxw.classList.toggle("zxw2");//添加类名为zxw2的类

      4. zxw.classList.toggle("zxw2",true);//添加zxw2类名

      5.  zxw.classList.toggle("zxw2",false);//删除zxw2类名

7. 使用类名获取元素

   1. ID选择器
      1.             var zxw1= document.getElementById("zxw1");
                     console.log(zxw1);
   2. 类名选择器
      1.             返回文档中所有指定类名的一组元素，而不是一个元素。
                     可以把它当作数组进行处理
      2. 给第1个元素设置行内样式
                     zxw[0].style.color="red";
      3. 给所有类名为zxw的元素设置行内样式
                     for (var i=0;i<zxw.length;i++) {
                         zxw[i].style.color="red";
                     }
   3.  

8. 使用标签以及name属性获取元素

   1. 返回文档中所有指定标签名的一组元素，而不是一个元素。
                  可以把它当作数组进行处理
   2. var zxw= document.getElementsByName("wyzxw");
                  console.log(zxw);

9. 组合方式获取元素

10. 1. var zxw=document.getElementById("zxw1").getElementsByTagName("p");//表示盒子zxw1中p标签集合
    2. var zxw=document.getElementById("zxw1").getElementsByClassName("zxw");//表示类名zxw集合

11. css选择器方法获取元素

    1. 返回文档中匹配指定css选择器的所有元素
    2. 
    3. 返回文档中匹配指定css选择器的第一个元素
    4.