看完就能学会DOM（一）

• DOM
• 事件
• 标签的获取
• 通过关系获取节点
• 标签的属性相关操作
• 标签类名的相关操作
• 标签内容的获取与修改
• 标签的创建
• 标签的删除、复制和替换
• 表格的全选、反选和不选

文档对象模型
  DOM 是document object model 它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口
  把文档中的代码翻译成一个对象模型
  在这个模型中 所有相关的标签属性注释文本等等12种数据 都翻译为一种类型的对象 统称节点对象
这些对象之间在文档模型数据结构中存在某种关系: 根节点 父子节点 同胞节点等等

	1.只有一个根节点document 
	2.除了根节点外所有节点都有唯一的一个父节点
	3.document是window对象的属性 
	4.全局对象模型属于BOM操作 Browser Object Model  把浏览器对外提供的接口翻译为一个对象BOM操作会在接下来的知识点讲到  它不属于标准的接口  但是浏览器厂商都提供了几乎一样的功能
	5.元素的属性也是独立节点  叫属性节点  但是不是元素节点的子节点

    事件三要素：事件源  事件  事件处理函数
    事件源：
    事件：click  dblclick  mousemove...
    事件处理函数: 干什么
    事件源.on事件 = 事件处理函数

   如何获取事件源

		//鼠标点击事件
        document.querySelector(".box1").onclick = function(){
            console.log("点击了box1");
        }

		//鼠标移动事件
        document.querySelector(".box1").onmousemove = function(){
            console.log("鼠标在box1里面移动");
        }

		
			
box1
		

  1.通过类名获取：document.getElementsByClassName(“类名”)
    得到的是一个标签类数组
  2.通过id获取：document.getElementById（“id名”）
    得到的是一个标签对象
  3.通过标签名获取：document.getElementsByTagName(“标签名”)
    得到的是一个标签类数组
  4.通过属性名获取：document.getElementsByName(“name属性值”)
    得到的是一个节点类数组
  5.通过css选择器获取：document.querySelector（“css选择器”）
    得到的是一个标签对象
           document.querySelectorAll（“css选择器”）
    得到的是一个节点类数组

  元素：页面中的标签
  节点：标签、文本、注释
 
  获取孩子节点

	标签对象 . childNodes 		获取子节点（标签对象的子标签、子文本、子注释）
	标签对象 . children			获取子元素（标签对象的子标签）

	标签对象 . firstChild		获取第一个子节点
	标签对象 . firstElementChild		获取第一个子元素
	标签对象 . lastChild			获取最后一个子节点
	标签对象 . lastElementChild		获取最后一个子元素

  获取父节点

	标签对象 . parentNode 			获取父节点
	标签对象 . parentElement 		获取父元素

  根据兄弟关系获取节点

	标签对象 . previousSibling			获取上一个兄弟节点
	标签对象 . previousElementSibling	获取上一个兄弟元素

	标签对象 . nextSibling				获取下一个兄弟节点
	标签对象 . nextElementSibling		获取下一个兄弟元素

    对标签属性直接进行操作: 标签.属性 = 属性值;
      例：box1.id = “xxxxxx”
    注意：类名不能直接操作(class属性不能直接操作)

  类名的添加

	标签对象 . classList.add("类名")

  判断标签是否包含某个类名

	标签对象 . classList.contains("类名"))

  类名的移除

	标签对象 . classList.remove("类名")

  判断某个标签是否拥有某个类名，有就删除，没有就添加

	标签对象 . classList.toggle("类名")

  标签类名的替换

	标签对象 . classList.replace("替换前类名","替换后类名")

  获取

	标签对象 . innerHTML     获取标签内部的内容
	标签对象 . innerText		获取标签内部的内容
	标签对象 . outerHTML		获取标签内部的内容和标签本身

  修改

	标签对象 . innerHTML = ` 
标签的创建 
  方法一
 
	第一步
		获取标签对象
	第二步
		标签对象 . innerHTML += `<标签>`
 
  方法二
 
	第一步
		使用document.createElement("标签元素")创建一个标签对象
	第二步 使用下列API
		标签对象 . appendChild()    		只能传入标签对象,且只能传入一个参数（不常用）
		标签对象 . append( )   			可以传入标签对象，也可以传入其他数据类型，可以传入多个参数
		标签对象 . insertBefore(参数1，参数2)   	在参数2之前插入参数1
 
标签的删除、复制和替换 
  标签的删除
 
	标签对象 . remove();
 
  标签的克隆
 
	标签对象 . cloneNode()		可传参true，则子标签也一起克隆
 
  标签的替换
 
	标签对象 . replaceChild(newNode,oldNode);
 
表格的全选、反选和不选 
  示例
 
    

        
            
            
            
        
        

            

                

                    全选
                
                
昵称
                
加入时间
                
签名
                
操作
            
        
        

            

                

                    
                
                
贤心
                
2016-11-29
                
人生就像是一场修行
                

                    删除
                    修改
                
            
            

                

                    
                
                
许闲心
                
2016-11-28
                
于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
                

                    删除
                    修改
                
            
            

                

                    
                
                
许闲心2
                
2016-11-28
                
于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
                

                    删除
                    修改
                
            
            

                

                    
                
                
许闲心3
                
2016-11-28
                
于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
                

                    删除
                    修改
                
            
        
    
    全选
    反选
    不选
 
  第一种
 
        let tInput = document.querySelectorAll("tbody input");
        // 点击全选，实现表格全选
        document.querySelector(".allSelectBtn").onclick = function(){
            tInput.forEach(item=>{
                item.checked = true;
            });
        }
        // 不选
        document.querySelector(".notSelectBtn").onclick = function(){
            tInput.forEach(item=>{
                item.checked = false;
            });
        }
        // 反选
        document.querySelector(".inverseSelectBtn").onclick = function(){
            tInput.forEach(item=>{
                item.checked = !item.checked;
            });
        } 
 
  第二种：封装一个函数
 
        let tInput = document.querySelectorAll("tbody input");
        // 全选
        document.querySelector(".allSelectBtn").onclick = fn;
        // 不选
        document.querySelector(".notSelectBtn").onclick = fn;
        // 反选
        document.querySelector(".inverseSelectBtn").onclick = fn;

        // 怎么判断点击的是那个按钮？
        function fn(){
            console.log(this);
            let checked = true;//默认全选
            if(this.classList.contains("notSelectBtn")){//不选
                checked = false;
            }
            
            let flag = 0;
            if(this.classList.contains("inverseSelectBtn")){//反选
                flag = 1;
            }
            tInput.forEach(item=>{
                // item.checked = checked;
                item.checked = flag == 1? !item.checked: checked;
            });
        }