交互步骤:找对应的标签,添加事件,事件反馈

获取标签

通过id名获取

document.getElementById("id名");
适合:适合单个标签获取
<body>
    <!-- 标签就是元素 -->
    <div class="box" id="wrap">这是div标签</div>
    <script>
         1.通过id名获取 document.getElementById("id名");
        var oDiv = document.getElementById("wrap");
        console.log(oDiv); 
    </script>
</body>
 

通过类名获取

document.getElementsByClassName("class名字") 获取整个文档下的对应标签
父元素.getElementsByClassNAme("class名字") 获取父元素下对应的标签

注意:通过类名获取的是元素集合 获取元素集合中具体某一个元素需要加下标  元素集合[下标]

注意:元素集合只有一个元素,也要通过下标的形式获取
    <script>
        2.通过类名获取
        1 document.getElementsByClassName("class名字") 获取整个文档下的对应标签
        var oDiv = document.getElementsByClassName("box");
        console.log(oDiv);//HTMLCollection(3)  元素集合
        获取元素集合中的具体某一个标签  语法  元素集合[下标]
        console.log(oDiv[0]);
        console.log(oDiv[2]);
         2.2 父元素.getElementsByClassNAme("class名字") 获取父元素下对应的标签
        //先获取父元素  通过class类名
        var oUl = document.getElementsByClassName("list");
        console.log(oUl[0]);//元素集合中哪怕只有一个 也有通过下标的形式获取
         获取ul下的box
        var list = oUl[0].getElementsByClassName("box");
        console.log(list);
    </script>

通过标签名获取

document.getElementsByTagName("标签名")  获取整个文档下的对应标签
父元素.getElementsByTagName("标签名")  获取父元素下对应的标签

注意:通过标签名获取的是元素集合 获取元素集合中具体某一个元素需要加下标  元素集合[下标]

注意:元素集合只有一个元素,也要通过下标的形式获取

    <script>
        3.通过标签名获取
        3.1 document.getElementsByTagName("标签名")  获取整个文档下的对应标签
        var oDiv = document.getElementsByTagName("div");
        console.log(oDiv);HTMLCollection(4)  元素集合  获取元素集合中具体的标签  元素集合[下标]
        console.log(oDiv[1]);
        3.2 父元素.getElementsByTagName("标签名")  获取父元素下对应的标签
        var oUl = document.getElementsByTagName("ul")[0];
        console.log(oUl);
        var xDiv = oUl.getElementsByTagName("div");
        console.log(xDiv);//HTMLCollection [div]
    </script>

鼠标事件

添加事件
元素.事件类型 = function(){   要做什么事   }

鼠标事件类型
 onclick  鼠标左键单击
 ondblclick 鼠标双击
 onmouseover/onmouseenter  鼠标移入
 onmouseout/onmouseleave   鼠标移出
 onmousemove  鼠标移动
 onmousedown  鼠标按下
 onmouseup    鼠标抬起
 oncontextmenu 鼠标右键显示菜单
        1.获取元素
        var oDiv = document.getElementsByTagName("div")[0];
        console.log(oDiv);
        2.鼠标单击 onclick
        oDiv.onclick = function () {
            console.log("单击");
        }
        3.鼠标双击 ondblclick
        oDiv.ondblclick = function () {
            console.log("双击");
        }
       4.鼠标移入 onmouseover
        oDiv.onmouseover = function () {
            console.log("移入");
        }
        5.鼠标移动  onmousemove
        oDiv.onmousemove = function () {
            console.log("移动");
        }
         6.鼠标移出 onmouseout
        oDiv.onmouseout = function () {
            console.log("移出");
        }
       7.鼠标按下  onmousedown
        oDiv.onmousedown = function () {
            console.log("按下");
        }
      8.鼠标抬起  onmouseup
        oDiv.onmouseup = function () {
            console.log("抬起");
        }
      9.鼠标右键显示菜单
        oDiv.oncontextmenu = function () {
            console.log("右击显示菜单项");
        }
        10.onmouseenter  onmouseleavae  移入移出
        oDiv.onmouseenter = function () {
            console.log("移入1");
        }
        oDiv.onmouseleave = function () {
            console.log("移出1");
        }
```

## 3.操作内容

- 标签分为:闭合标签和表单元素两种

### 3.1闭合标签

- 获取:元素.innerHTML   元素.innerText
- 设置:元素.innerHTML = 值    元素.innerText = 值

```js
 <script>
        var oDiv = document.getElementsByTagName("div")[0];
        // 1.闭合标签的内容  获取及设置   
        // 1-1获取 元素.innerHTML  元素.innerText
        console.log(oDiv.innerHTML);//这是一个div标签
        console.log(oDiv.innerText);//这是一个div标签
        // 1-2设置  元素.innerHTML = 值   元素.innerText = 值  重写之前的内容
        oDiv.innerHTML = "这是一个新的文本内容";
        oDiv.innerText = 123;
        /*
            innerHTML和innerText的区别?
            相同点:都是重写覆盖闭合标签上的原有内容
            不同点:innerHTML可以识别标签  innerText不识别标签
        */
        // 1-3 区别
        oDiv.innerHTML = "<b>456</b>";//innerHTML可以识别标签
        oDiv.innerText = "<i>098765</i>";//innerText不识别标签

        // 1-4  在原有的文本内容上追加内容   字符串数据类型遇到+ 是拼接
        // 原有的内容 + 新的值
        oDiv.innerHTML = oDiv.innerText + "123";
    </script>
```

==面试题: innerHTML和innerText的区别?==

```js
相同点:都是重写覆盖闭合标签上的原有内容
不同点:innerHTML可以识别标签  innerText不识别标签
```