原生 JS DOM 常用操作大全

2021-12-25 本文已影响0人辣辣不乖

DOM

DOM文档对象模型又称为DOM树
DOM树由文档、元素、节点组成
- 文档：一个页面就是一个文档，
- 元素：文档中的所有标签都称为元素。DOM中使用Element表示
- 节点：文档中的所有内容，在文档中都是节点（标签、属性、文本注释等）DOM中使用node表示

获取元素

都以 document . 开头例如：document.getElementById
使用 console.dir 可以打印出返回的元素对象，从而更好的查看属性和方法

getElementById （元素ID)

获取标签为Id的元素 (文档中的id值是唯一的，没有重复的id)
参数：id值，区分大小写的字符串
返回id属性值的元素节点相对应的对象

<body>
    <div id="time">2019-9-9</div>
    <script>
        // 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>

getElementsByTagName (标签名)

注意：得到的是一个对象数组，如需操作元素则需要遍历伪数组并且伪数组不能使用数组的方法

以标签名来获取元素
参数：标签名
返回的是一个对象数组（伪数组）

<body>
    <ul id="nav">
         <li>生僻字</li>
         <li>生僻字</li>
         <li>生僻字</li>
         <li>生僻字</li>
         <li>生僻字</li>
     </ul>
     <script>
            // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
            var lis = document.getElementsByTagName('li');
            console.log(lis);
            console.log(lis[0]);
            // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
            for (var i = 0; i < lis.length; i++) {
                console.log(lis[i]);
            }
            // 3. element.getElementsByTagName()  可以得到这个元素里面的某些标签
            var nav = document.getElementById('nav'); // 这个获得nav 元素
            var navLis = nav.getElementsByTagName('li');
            console.log(navLis);
    </script>
<body>

注意：getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。

getElementsByCalssName (class类名)

以class类名获取元素
参数 calss类名
返回对应类名的元素对象集合

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
     //getElementsByClassName根据类名获得某些元素集合
    var boxs=document.getElementsByClassName("box")
    console.log(boxs)
    <script>
 <body>

querySelector （选择器）

可以是任意的选择器例如：id、标签名、类名
参数: 可以是 id 、类名、标签选择器
返回：该模式匹配的第一个元素

注意 : 需要在选择器前加符号例如 .box 、 #nav。让querySelector 知道是什么选择器所以要加符号。与前面介绍的不同

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
    // 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
        var firstBox = document.querySelector('.box'); //class类名
        console.log(firstBox);
        var nav = document.querySelector('#nav'); //id
        console.log(nav);
        var li = document.querySelector('li');//标签
        console.log(li);
    <script>
 <body>

querySelectorAll （选择器）

可以是任意的选择器例如：id、标签名、类名
参数: 可以是 id 、类名、标签选择器
返回：该模式匹配的所有元素对象集合（伪数组）

 <body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
   // 3. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    <script>
 <body>

获取特殊元素（body、html)

获取body ：document.body
获取html : document.documentElement

获取元素之节点获取

页面中所有的内容都为节点，节点使用 node 来表示

DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

父级节点

node.parentNode //node表示节点
parentNode //可以返回某个节点的父节点，注意是最近一级的父节点
如果指定的节点没有父节点则返回null

    <div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>
    <script>
        // 1. 父节点 parentNode
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box');
        // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
        console.log(erweima.parentNode);
    </script>

子元素节点

parentNode.children (各个浏览器都支持) （不包含元素节点，文本节点等）
parentNode.firstElementChild (获取第一个元素节点) 具有兼容问题 ie9才支持
parentNode.lastElementChild (获取最后一个子元素节点) 具有兼容问题 ie9才支持
parentNode.children[0] (没有兼容性问题，并且返回第一个子元素)

    <ul> 
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <script>
    // 2. children 获取所有的子元素节点(不包括文本节点等）也是我们实际开发常用的
        console.log(ul.children);
   //2.firstElementChild 获取第一个子元素节点 ie9以上才支持
       console.log(ul.firstElementChild)
   //3.lastElementChild 获取最后一个子元素节点 ie9以上才支持
       console.log(ul.lastElementChild)
   //4.children[0] 开发中经常使用 没有兼容问题并且返回第一个子元素
       console.log(ul.children[0])
       console.log(ul.children[children.length-1])
    </script>

兄弟节点

node.nexElementSibling //返回当前元素下一个兄弟元素节点，找不到则返回null
node.previousElementSibling // 返回当前元素上一个兄弟节点，找不到则返回null
两种方法都有兼容性的问题，IE9以上支持

    <div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');
        var span=documnet.querySelector("span")
     // 1. nextElementSibling 得到下一个兄弟元素节点
        console.log(div.nextElementSibling);
     // 2.nextElementSibling 得到上一个兄弟元素节点
        console.log(span.previousElementSibling);
    </script>

问：解决兼容性问题
答：自己封装一个兼容性的函数

   function getNextElementSibling(element) {
      var el = element;
      while (el = el.nextSibling) {
        if (el.nodeType === 1) {
            return el;
        }
      }
      return null;
    }

事件处理

javaScript 程序中采用的是异步处理事件模型，事件处理分三部分。

事件源（具体作用在哪个元素或标签上）
事件类型（指的是例如：鼠标的点击，双击，经过，键盘的按下的键）
处理程序（指的是事件触发后浏览器调用对应的处理程序(以函数的形式），也称为事件处理函数）

<body>
 <div> 事件处理 <div>
 <script>
 //1.获取事件源
 var div=document.querySelector("div") 
// 2.绑定事件 注册事件
  div.onclick
 //3.添加事件处理程序
  div.onclick=function(){
     console.log("我")
  }
  <script>
<body>

注册事件

注册事件有三种方法

使用HTML标签属性注册（例如 Vue的事件注册）
使用传统的DOM对象注册 (onclick) 具有唯一性

注意:使用这种方式注册一个事件源只能注册一个,如注册多个,后面的覆盖前面的注册事件

使用 addEventListener（type,listener,useCapture）的方法监听注册方式 (即可添加多个,也可以取消事件)
- type :事件类型 , 例如：click、mouseover 注意这是里不需要带on
- listener:事件处理函数，事件发生时，会调用该监听函数
- useCapture：可选参数，是一个布尔值，默认是false 。(false为捕获阶段，true为冒泡阶段)

注意:addEventListener() 方法不支持低版本的IE

<body>
  <div onClick=show()> 注册事件的三种方法 <div>
 <script>
 //1.使用HTML属性注册 
  function show(){
  alert("div被点击了")
  }
 //2.使用javaScipt的DOM注册事件
     var div=document.querySelector("div")
     //注意 事件类型以 on开头 后面对应的事件名为小写
     div.onclick＝function(){
     alert("DOM注册点击div")
  }
//3.使用addEventListener()方法注册事件
    var div=document.querySelector("div")
   //向div添加事件
    div.addEventListener('click',()=>{
     alert("Div 注册点击事件")
  })
  //移除div事件
   div.removeEventListener("click",()=>{
       alert("移除div事件")
 })
  <script>
<body>

删除事件（解绑事件）

移除传统的注册方式（DOM 对象的方法）

div.onclick=null;

移除监听事件的方式（使用匿名函数，无法移除）

div.removeEventListener (type,listener,useCapture);

<body>   
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
            alert(11);
    // 1. 传统方式删除事件
            divs[0].onclick = null;
        }
    // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
       
    </script>
<body>

鼠标事件

鼠标事件的执行顺序

mousedown->mouseup->click->mousedown->mouseup->click->dbclick
- click 鼠标点击左键并释放时触发
- dbclick 双击鼠标左键时触发
- mousedown 按下鼠标按键时触发
- mouseup 释放鼠标按键时触发
- mouseover 当鼠标经过时触发 具有事件冒泡
- mouseout 当鼠标离开时触发 具有事件冒泡
- mouseenter 当鼠标经过时触发 不具有事件冒泡
- mouseleave 当鼠标经过时触发 不具有事件冒泡
- mousemove 当移动鼠标时触发
- contextmenu 禁止鼠标右键菜单
- selectstart 禁止鼠标选中文字

只有在同一个元素上相继触发 mouseover 和 mouseup事件才会触发 click 事件
只有触发再两次 click 事件,才会触发一次 dbclick 事件

mouseenter与mouseove的区别
- mouseenter经常与mouseleave搭配使用

//1.mouseenter 鼠标经过  不具有事件冒泡，不会传递给son点击事件
   <div class="father">
        <div class="son"></div>
    </div>
<script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        father.addEventListener('mouseenter', function() {
            console.log(11);

        })
 </script>

禁止鼠标右键菜单

//1.contextmenu 禁止鼠标右键菜单
documnet.addEventListener("contextmenu",function(e){
 e.preventDefault(); // 阻止事件的默认跳转行为
})

禁止鼠标选中文字

//2.selectstart 禁止鼠标选中文字
documnet.addEventListener("selectstart",function(e){
   e.preventDefault(); //阻止事件的默认跳转行为
})

焦点事件
- blur 元素失去焦点时触发 不会冒泡
- focus 元素获得焦点时触发 不会冒泡

键盘事件

一般键盘事件使用在输入框的标签中
- 当按下字符键的执行顺序 (按下字符键触发三次事件)
  keydown > keypress > keyup 其中 keydown 和 keypress 在文件框发生变化之前触发,然后是keyup事件则是在文件框发生变化之后触发
- 当按下非字符键的执行顺序 (按下非字符, 触发二次事件)
  keydown > keyup 其中首先触发 keydown , 最后触发 keyup.

注意：keydown 和 keypress 在文本框里面特点：先执行事件的处理程序在将文字落入到文本框中, keyup 在文本框里面的特点：先将文字落入到文本框中在执行事件的处理程序

keydown 按下键盘上的任意键触发;按住不放,重复触发
keypress按下键盘上的字符键触发;按住不放,重复触发,不识别功能键，如箭头,ctrl,shift 等
keyup释放键盘上的键时触发
e.keyCode当用户按下按键时获取按键 ASCII 编码e.key获取当用户按下按键时的名称

<script>
        // 常用的键盘事件
        //1. keyup 按键弹起的时候触发 
        document.addEventListener('keyup', function() {
            console.log('我弹起了');
        })

        //3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keypress', function() {
                console.log('我按下了press');
        })
        //2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keydown', function() {
                console.log('我按下了down');
        })
        // 4. 三个事件的执行顺序  keydown -- keypress -- keyup

       //  5.利用Keycode返回的ASCII码值来判断用户按下的是哪个键
        document.addEventListener("keyup",function(e){
             if(e.keyCode===65){
               alert("你按下的是a键")
             }else{
               alert("你没有按下a键")
             }
         })
</script>

滚动条事件

当出现滚动条时，向下滚动页面时，上面被隐藏掉的高度，被称为页面被卷去的部分，此时滚动条在滚动时会触发 scroll事件

element.addEventListener("scroll",()=>{
    console.log(element.scrollTop)
})

表单事件

change事件当表单的值发生改变时触发

事件对象

在触发DOM上的某个事件时会产生一个事件对象event ，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
事件触发时系统会产生一个事件对象，并且系统会以实参的形式传给事件处理函数
在事件处理程序中声明一个形参用来接收事件参数。

//1. 方法一
eventTarget.onclick=function(event){
//这个event就是事件对象，我们还喜欢的写成 e 或者 evt
}

// 2. 方法二

eventTarget.addEventListener("click",function(event){
 //这个event就是事件对象，我们还喜欢的写成 e 或者 evt/这个
})

//3.方法三 
eventTarget.addEventListener("click",fn)
  function(event){
  //这个event就是事件对象，我们喜欢写成e或者evt
}

事件对象的属性和方法

e.target返回触发事件的对象标准
e.srcElement 返回触发事件的对象非标准 ie6-8
e.type返回事件的类型比如 click mouseover 不带 one.canceIBubble该属性阻止冒泡非标准 ie6-8使用
e.returnValue 该属性阻止默认事件（默认行为）非标准 ie6-8使用比如不让链接跳转
e.preventDefault() 该方法阻止默认事件（默认行为）标准比如不让链接跳转
e.stopPropagation() 标准的阻止事件冒泡

事件对象的 this 与 e.target 的区别

this 指向的是事件绑定的元素
e.target 指向的是事件触发元素别忘了e.
通常情况下e.target 和 this 的指向是一致的

注意：有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）这时候 this 指向的是元素，因为 this 使终指向的是事件绑定的元素 target 指向的是子元素，因为target使终指向的是事件触发的元素

    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
     <script>
   // 1. target和this指向的一致
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            // e.target 和 this指向的都是div
            console.log(e.target);
            console.log(this);
        });
   // 2. 在冒泡的情况下 target和this指向不同
       var ul=document.querySelector("ul")
       ul.addEventListener("click"，function(){
         // 我们给ul 绑定了事件  那么this 就指向ul  
              console.log(this);  // ul
              // e.target 触发了事件的对象 我们点击的是li e.target 指向的就是li
              console.log(e.target);  // li
       })
    </script>

鼠标的事件对象

e.clientX 返回鼠标相对于浏览器窗口可视区的 X 坐标
e.clientY 返回鼠标相对于浏览器窗口可视区的 Y 坐标
e.pageX 返回鼠标相对于文档页面的 X 坐标 IE9+ 支持
e.pageY 返回鼠标相对于文档页面的 Y 坐标 IE9+ 支持
e.screenX 返回鼠标相对于电脑屏幕的 X 坐标
e.screenY 返回鼠标相对于电脑屏幕的Y 坐标

    <script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);

        })
    </script>

操作元素

修改元素内容
- Element.innerText
  只显示纯文本,去除html标签,同时去除了空格和换行
- Element.innerHTML
  显示指定的元素的全部内容,包括HTML标签,同时保留空格和换行
- innerText 与 innerHTML的区别
  - 使用 innerText 获取内容不识别 HTML 标签, 空格与换行
  - 使用 innerText 设置内容不识别 HTML 标签
  - 使用 innerHTML 获取内容识别全部内容包括 HTML 标签 ,会保留空格和换行
  - 使用 innerHTML 设置内容识别可设置 HTML 标签

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>1123</p>
    <script>
        // 当我们点击了按钮，  div里面的文字会发生变化
        // 1. 获取元素 
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 2.注册事件
        btn.onclick = function() {
            // div.innerText = '2021-6-18';
            div.innerHTML = getDate();
        }
        function getDate() {
            var date = new Date();
            // 我们写一个 2019年 5月 1日 星期三
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
        }
    </script>
</body>

属性的操作

this 指向的是事件函数的调用者

普通元素的属性操作
- innerText 、innerHTML
- src 、href
- id 、alt 、title
表单元素的属性操作
- type 、value 、checked 、selected 、disabled
获取属性的值
- 元素对象.属性名
设置属性的值
- 元素对象.属性名=值

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. 注册事件 处理程序
        btn.onclick = function() {
            // 表单里面的值 文字内容是通过 value 来修改的
            input.value = '被点击了';
            // 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用
            // btn.disabled = true;
            this.disabled = true;
            // this 指向的是事件函数的调用者 btn
        }
    </script>
</body>

样式属性操作

通过 js 修改元素大小,颜色,位置等模式

Element.style.样式 = 值 //行内样式操作修改行内样式权重较高
Element.className = "类名" //类名样式操作覆盖原先的类名
- Element.className=" " //值为空或null 可使元素的类名置空
Element.classList.add ("类名") // 添加类名操作可添加多个不会覆盖原有的类名
- Element.classList.remove("移除类名") // 移除类名操作可移除多个类名
- Element.classList.toggle("切换类名") //切换类名无则添加，有则移除
- Element.calssList.contains("类名") //是否包含此类名，返回布尔值判断是否为存在

calssName 是保留字,因此使用 calssName 来操作元素类名属性

<body>
    <div></div>
    <script>
        // 1. 获取元素
        var div = document.querySelector('div');
        // 2. 注册事件 处理程序
        div.onclick = function() {
            // div.style里面的属性 采取驼峰命名法 js中对大小写敏感
            this.style.backgroundColor = 'purple';
            //别忘了加 单位 px
            this.style.width = '250px';
 // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
   // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
   // this.className = 'change';
            this.className = 'first change';
        }
    </script>
</body>

取消 a 标签的默认跳转

方法一: 在处理程序内的最后添加 return false ;
方法二: 在 a标签中加 javascript:;

//方法一: 事件处理程序中最后设置 return false;

<body>
<a id="link" href="https://www.baidu.com">点击</a>
//方式2：设置a标签的href属性值为：javascript:
 <a href="javascript:;">点击2</a>

<script>
    var link = document.getElementById('link');
    link.onclick = function(){
    alert('你好');
    // 方式1：取消a点击后的默认跳转行为 return false;
    return false;
    };
</script>
<body>

//方式2：设置a标签的href属性值为：javascript:;
 <a href="javascript:;">点击2</a>
//备注：
//  给a标签的herf值设置javascript: ,表示将来点击a时，会阻止默认跳转行为，并且仅仅会执行js代码

全选框操作：4个单选框 + 1个选框

    <script>
        // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
        // 获取元素
        
        var j_cbAll = document.getElementById('j_cbAll'); 
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); 
        // 全选按钮注册事件
        j_cbAll.onclick = function() {
                // this.checked 当前复选框的选中状态
                console.log(this.checked);
                for (var i = 0; i < j_tbs.length; i++) {
                    j_tbs[i].checked = this.checked;
                }
         }
         // 给所有的子复选框注册单击事件
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function() {
                // flag 控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        break; 
                    }
                }
                // 设置全选按钮的状态
                j_cbAll.checked = flag;
            }
        }
    </script>

自定义属性操作

为什么需要自定义属性：用于在页面中存储数据而不用在数据库中存储

Element.属性（内置属性通点的方式获取元素属性）
Element.getAttribute("属性") （一般用于自定义属性）兼容性获取

    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
  // 1. 获取元素的属性值
        // (1) element.属性
       console.log(div.id);
  //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
    </script>

设置属性值

Element.属性= "值" （内置属性）
Element.setAttribute( "属性"，"值" )； //一般用于自定义属性

   // 2. 设置元素属性值
        // (1) element.属性= '值'
        div.id = 'test';
        div.className = 'navs';
   // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是

移除属性值

Element.removeAttribute("属性")

// class 不是className
// 3 移除属性 removeAttribute(属性)    
div.removeAttribute('index');

获取H5自定义属性

只能获取以 data开头的自定义属性

Element.dataset.index 或者 Element.dataset["index"] ie11才支持
使用 Element.dataset.属性获得的是一个以 data- 开头的自定义属性集合

设置H5 自定义属性

H5中规定自定义属性要以 data-开头做为属性名并且赋值。

在标签中设置<div data-index="1"> </div>
使用 js设置 Element.setAttribute("data-index",2)

 <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        // console.log(div.getTime);
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
// h5新增的获取自定义属性的方法 它只能获取data-开头的
// dataset 是一个集合里面存放了所有以data开头的自定义属性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
// 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>

标签栏切换案例：tab栏

    <script>
        // 获取元素
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        // for循环，给选项卡绑定点击事件
        for (var i = 0; i < lis.length; i++) {
            // 开始给5个小li 设置索引号 
            lis[i].setAttribute('index', i);
            lis[i].onclick = function() {
                // 1. 上的模块选项卡，当前这一个底色会是红色，其余不变（排他思想）
                // 干掉所有人 其余的li清除 class 这个类
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                // 留下我自己 
                this.className = 'current';
                // 2. 下面的显示内容模块
                var index = this.getAttribute('index');
                console.log(index);
                // 干掉所有人 让其余的item 这些div 隐藏
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                // 留下我自己 让对应的item 显示出来
                items[index].style.display = 'block';
            }
        }
    </script>

节点操作

node 表示父级 child 表示子级

创建节点

document.createElement("标签")
动态创建元素创建之后需要添加

添加节点

node.appendchild(child ) //node表示父级 child表示子级
将节点添加到node表示的父节点的子节点列表的末尾，类似数组的方法push
node.insertBefore( child,指定节点的位置 )
将节点添加到node表示的父节点的指定子节点的前面，类似于css里面的before伪元素

<body>   
    <ul>
        <li>123</li>
    </ul>
    <script>
     // 1. 创建节点元素节点
        var li = document.createElement('li');
     // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素
        var ul = document.querySelector('ul');
        ul.appendChild(li);
     // 3. 添加节点 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
    </script>
</body>

删除节点

node.removeChild( child ) 方法在父级节点删除一个子节点，返回删除的节点

<body>  
   <button>删除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    <script>
        // 1.获取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        // 2. 删除元素  node.removeChild(child)
        // ul.removeChild(ul.children[0]);
        // 3. 点击按钮依次删除里面的孩子
        btn.onclick = function() {
            if (ul.children.length == 0) {
                this.disabled = true;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
    </script>
</body>

复制（克隆）节点

node.cloneNode() //返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点
如果括号参数为空或者为 false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点

<body>  
    <ul> 
        <li>1111</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
     // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
    // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>
</body>

DOM的核心总结

DOM操作，我们主要针对于元素的操作。主要有创建，添加，删除，改，查。

创建元素的三种方式

document.write()
Element.innerHTML= 值
document.createElement()
innerHTML数组方式（效率高）

<script>
    function fn() {
        var d1 = +new Date();
        var array = [];
        for (var i = 0; i < 1000; i++) {
        //使用数组的方法push 在末尾添加标签
array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
        }
        document.body.innerHTML = array.join('');
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

添加

appendChild //在父节点的末尾添加节点
insertBefore //可以指定子节点的添加位置

删除

removeChild

改

主要修改DOM元素的属性，DOM元素的内容，属性，表单的值等。
修改元素属性: src、href、title等
修改元素的普通内容: innerHMTL、innerText
修改表单元素：value、type、disabled等
修改元素的模式，style、className

查

DOM提供的API：getElementById，getElementByTagName 古老用法不太推荐使用
H5提供的新方法：querySelector,querySelectorAll 提倡
利用节点操作获取元素：父（parentNode)、子(children)、兄弟（previousElementSibling、nextElementSibling) 提倡

操作自定义属性

setAttribute: 设置自定义属性
getAttribute：获取自定义属性
removeAttribute：移除属性