Day40 js dom操作

1. 获取元素的方式
    1.2 根据id获取元素
         var div1 = document.getElementById("box1");
    1.2 通过类名获取元素
        var p1Arr = document.getElementsByClassName("p1");
        console.log(p1Arr instanceof Array);//false
          console.log(Array.isArray(p1Arr));//false
          console.log(p1Arr.length);
          console.log(p1Arr[0]);
          console.log(p1Arr[1]);
        伪数组定义：
            1、拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)
            2、不具有数组所具有的方法
    1.3 通过标签名获取元素
        var tag1 = document.getElementsByTagName("div");
           console.log(tag1);
           console.log(tag1[0]);
    1.4 通过name名获取元素
        var userList = document.getElementsByName("user");
          console.log(userList);
          for (var i = 0; i < userList.length; i++) {
            console.log(userList[i]);
          }
    1.5 通过选择器的querySelector获取元素
        querySlector():获取指定选择器的第一个元素，参数就是选择器的名称
        var div1 = document.querySelector(".box1");
          console.log(div1);
          var li1 = document.querySelector("ul>li");
          console.log(li1);
          var user_1 = document.querySelector("#user_1");
          console.log(user_1)
    1.6 通过选择器的querySelectorAll获取元素
        querySelectorAll():获取指定选择器的所有的元素，参数就是选择器的名称
         var boxList = document.querySelectorAll(".box1");
          console.log(boxList);
          var listLi = document.querySelectorAll("ul li");
          console.log(listLi);
2. 事件
    2.1 事件的三要素
        事件源:触发(被)事件的元素
        事件类型:事件的触发方式(例如鼠标点击或键盘点击)
        事件处理程序:事件触发后要执行的代码(函数形式)
    2.2 事件的基本使用
        <script>
            var box = document.getElementById('box');
            box.onclick = function () {
            console.log('代码会在box被点击后执行');
            };
        </script>
        鼠标单击事件：onclick    浏览器加载完成事件：onload
    2.3 非表单元素的属性操作
        href、title、id、src、className width height等等
        1、添加src属性值显示图片
            imgBox.src = "images/jie.jpg";
        2、改变图片大小
            imgBox.width = 750;
            imgBox.height = 500;
        3、通过style改变宽高
            imgBox.style.width = 750 + "px";
            imgBox.style.height = 500 + "px";
        4、通过类名改变宽度
             imgBox.className = "imgCl"
        5、隐藏元素
            1、src=""
            2、display=none; 不占位置的
            3、visibility="hidden
        6、this的指向问题
            ①     普通函数中，this指向window
            ②      构造函数中，this指向实例化对象
            ③      对象函数中，this指向当前的对象
            ④     事件函数中，this指向事件源
    2.4 表单元素属性操作
        value 用于大部分表单元素的内容获取(option除外)
        type 可以获取input标签的类型(输入框或复选框等)
        disabled 禁用属性checked 复选框选中属性
        selected 下拉菜单选中属性
        checked
        7. InnerText
            返回被选元素的文本内容
         var p1 = document.getElementById("p1");
          console.log(p1.innerText);
            设置被选元素的文本内容
            btn1.onclick = function () {
                // 设置文本
                p1.innerText = "文本改变了哈";
                console.log(p1.innerText);
              }
3. 事件
    3.1 鼠标事件
        onmouseover鼠标移入事件：在鼠标指针移动到元素上时触发。
            onmouseout 鼠标移出事件：在鼠标指针移出元素后触发
        onmouseenter鼠标进入事件：在鼠标指针进入到元素上时触发。
            onmouseleave 鼠标离开事件：在鼠标指针离开元素后触发
        onfocus获取焦点事件：在鼠标光标获取输入框焦点时触发
            onblur失去焦点事件：在鼠标光标失去焦点时触发。
        onclick单击事件：在鼠标指针单击时触发
            ondblclick双击事件：在鼠标光标双击时触发
    3.2 键盘事件
        onkeydown：键盘按下
        onkeyup:键盘抬起  
    3.3 浏览器事件
        onload:浏览器加载完成执行
        onscroll:滚动浏览器滚动条时触发
4. 文本内容属性
        (1)、innerText和textContent
            设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持
            设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持
        (2)、innerText和innerHTML的区别
            使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
            innerHTML是可以设置文本内容
            innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
5. 元素的属性操作
        自定义属性
        元素除了本身的属性之外可以设置自定义属性
        <div id="box1" class="box_1" name1="divObj">我是盒子</div>
        获取属性
        getAttribute("属性的名字")
        getAttribute("属性"):不仅可以获取元素本身的属性的属性值，还可以获取元素自定义的属性的属性值
        设置属性
        setAttribute("属性的名字","属性的值");
        元素的属性的设置:不仅可以设置元素本身的属性，还可以设置元素自定义的属性
         setObj1.onclick = function () {
            in1.setAttribute("name", "password");
            // in1.setAttribute("class", "");
            in1.className = "";
            // in1.setAttribute("style", "border:5px dotted pink");
            in1.style.border = "5px dotted pink";
            console.log(in1.getAttribute("name"));//password
        移除属性
         removeAttribute("属性"):不仅可以移除元素本身的属性，还可以移除元素自定义的属性
          var removeObj = document.getElementById("remove");
          removeObj.onclick = function () {
            in1.removeAttribute("class");
            div1.removeAttribute("name1");
          }
6. 元素样式设置的几种方式
    采用if，如果是等值判断使用switch
        1、对象.style
        2、 对象.className
        3、对象.setAttribute("style")
        4、对象.setAttribute("class")
        5、对象.style.setProperty("CSS属性","CSS属性值")
        6、对象.style.cssText