dom编程

dom： document object model 文档对象模型,本质上是一个接口，专门用来操作网页内容的 API标准。其基本的功能包含有：
① 查询某个元素
② 查询某个元素的祖先、兄弟以及后代元素
③ 获取、修改元素的属性
④ 获取、修改元素的内容
⑤ 创建、插入和删除元素

1.dom树介绍

文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中的所有标签都是元素，DOM中使用element表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

2.事件
事件：（在网页上）简单的来说就是，鼠标点击，移动等操作后放生了什么事
事件的三要素：
事件的类型（具体什么行为）
事件源（谁身上发生这个行为）
事件处理（行为发生后，导致了什么结果）

2.1 事件的分类
表单事件：
submit提交事件，点击submit时触发
reset 重置事件，点击reset时触发
change:改变事件， 内容改变失去焦点后触发
input：键盘上的键懂了就会触发
UI事件：
其它事件源：
select文本选中后触发
window事件源：
load:dom树渲染后触发
unload: 页面选然后触发
be’foreunload：页面卸载前触发
scroll: 滚动条滚动时触发
鼠标事件：
mouseover:鼠标引入事件
mouseout : 鼠标移出事件
mousedown: 鼠标按下事件‘
mouseup： 鼠标放下事件
click: 鼠标点击事件
焦点事件：
focus： 聚焦事件
b’lu’r ： 失去焦点
其他事件 不做详细了解

常用的一些事件

//点击事件
 <input type="button" value="点我" id="btn" />
    <script>
        //点我---弹窗 hello sir
        let button = document.getElementById("btn");
        button.onclick  = function(){
        	//时间发生后执行
            alert("hello sir");
        }
    </script>

//页面加载事件  window.onload， 在windows系统上面 window.可以省略不写
 	onload = function () {
            let button = document.getElementById("btn");
                button.onclick  = function(){
                    alert("hello sir");
            }
        }

//鼠标移动事件
  		var item = document.getElementById('item');
        var submenu = document.getElementById('submenu');
        // 绑定鼠标移入事件
        item.onmouseover = function() {
            item.style.backgroundColor = 'blue';
            submenu.style.display = 'block';
        }
        // 绑定鼠标移出事件
        item.onmouseout = function() {
            submenu.style.display = 'none';
        }

//隔行变色效果
<ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
    </ul>
    <script>
        let lis = document.getElementsByTagName('li');
        for (let index = 0; index < lis.length; index++) {
            if(index % 2 == 0){
                lis[index].style.backgroundColor = 'red';
            }
            if(index % 2 != 0){
                lis[index].style.backgroundColor = 'blue';
            }
        }
    </script>


//自己写的 敝教教高级的   不喜勿喷
//鼠标移入时隔行变色
  let lis = document.getElementsByTagName("li");
        for(let i = 0; i<lis.length; i++){
           lis[i].onmouseover = function(){
                 
                this.style.backgroundColor="green";
           } 
           if(i %2 ==0){
                    
                    lis[i].style.backgroundColor="blue";
                }else{
                    lis[i].style.backgroundColor="red";
                }   
           lis[i].onmouseout = function(){
           if(i %2 ==0){
                   lis[i].style.backgroundColor="blue";
                }
                else{
                    lis[i].style.backgroundColor="red";
                }   
           }
            
        }

//全选和反选的问题‘