DOM常用操作

叁歲伎倆 2021-09-18 05:06 406阅读 0赞

## 1. 修改 ##

## 2. 添加删除元素 ##

## 3. HTML DOM常用对象 ##

### 一. 修改: ###

#### 1. 样式: ####

*  内联样式: 元素.style.css属性=“值”  
    a. css属性名要去-，变驼峰  
    b. 不要用元素.style来获取样式。因为style只表示内联样式。而将来，我们样式多数写在样式表中。
 *  (2). 获取完整样式: 用计算后的样式
    
     *  a. 什么是计算后的样式: 最终应用到一个元素上的所有样式的集合。
     *  b. 如何获得计算后的完整样式:2步:
        
         *  1). 获得包含完整样式的对象：  
            var style=getComputedStyle(元素对象)  
            //获取 计算后的样式
         *  2). 从style对象中，提取想要的css属性  
            var 属性值=style.css属性
     *  c. 计算后的样式都是只读，不可修改，怕牵一发而动全身。  
        总结: 将来只要修改样式，都用元素.style.css属性。只要获取样式都用getComputedStyle();
 *  (3). 问题: 元素.style.css属性，一句话只能修改一个css属性。而网页中很多效果是一次性批量应用多个css属性。如果使用元素.style.css属性方式批量修改多个css属性，代码会很繁琐  
    解决: 用class代替.style批量修改元素的样式
 *  (4). 优化: 尽量减少修改样式的次数。能用一句话或用class一次性修改的样式，就不要用.style多句话修改。
    
     *  a. 只要修改一次样式，都可能导致重排重绘
     *  b. 原理: 重排重绘:
        
         *  1). 浏览器加载网页的过程: (抛开请求响应网络部分不提)
            
             *  i. 扫描HTML代码，在内存中构建DOM树保存网页结构和内容，同时扫描CSS代码，在内存中创建CSS对象模型
             *  ii. 将CSS对象模型中的css样式对象，挂载到DOM树上的对应元素上。形成加载树。
             *  iii. 浏览器中排版引擎开始按照css中定义的元素布局和大小，对网页内容区域进行排版:
             *  iv. 浏览器将排好版的网页，再按照css中样式的规定，绘制出来，显示给用户。
         *  2). 重排重绘：
            
             *  i. 当在程序中修改元素的显示隐藏，大小，位置，影响到布局时，浏览器就被迫将整个网页重新排版，重新绘制——简称重排重绘。
             *  ii. 如果程序中只修改颜色等不影响布局的属性时，浏览器就不需要重新排版，只需要重新绘制即可——简称重绘
             *  iii. 频繁的重排重绘会导致浏览器渲染不及时，导致闪屏。
     *  c. 如何优化:
        
         *  1). 尽量用class来批量修改css样式
         *  2). 如果必须用style修改，也可放在一句话中修改多个css属性: 元素.style.cssText=“属性:值;属性:值;…”  
            比如: div.style.width=“200px”;  
            div.style.height=“100px”  
            可简写为:  
            div.style.cssText=“width:200px; height:100px”

### 二. 添加/删除元素 ###

#### 1. 添加元素: 3步: ####

*  (1). 先创建一个空元素  
    var 元素=document.createElement(“标签名”)  
    比如: var a=document.createElement(“a”)  
    结果: `<a></a>`
 *  (2). 为新元素添加新属性:  
    a.href=“http://tmooc.cn”  
    a.innerHTML=“go to tmooc”  
    `<a href="http://tmooc.cn"> go to tmooc </a>`  
    问题: 此时a没有在DOM树上，浏览器就不知道有这个a元素，自然也就不会将a绘制到页面上。
 *  (3). 将新元素挂到DOM树上指定父元素下: 3种
    
     *  a. 在当前父对象下直接子对象末尾追加新元素:  
        父元素.appendChild(新元素)  
        //追加 孩子
     *  b. 将新元素插入到当前父元素下指定的一个现有子元素前  
        父元素.insertBefore(新元素, 现有元素)
     *  c. 用新元素替换当前父元素下指定的一个现有子元素

#### 2. 优化: ####

尽量减少操作DOM树的次数——减少重排重绘

*  (1). 如果同时添加父元素和子元素，应该先在内存中将子元素都添加到父元素中，最后再一次性将父元素添加到DOM树
 *  (2). 如果父元素已经在页面上了，需要添加多个平级子元素。应该借助文档片段对象。
    
     *  a. 什么是文档片段对象: 内存中，临时保存多个平级子元素的虚拟父元素
     *  b. 何时: 父元素已经在页面上了，需要添加多个平级子元素
     *  c. 为什么: 减少操作DOM树的次数——减少重排重绘
     *  d. 如何: 3步:
        
         *  1). 先创建一个文档片段对象  
            var frag=document.createDocumentFragment();  
            // 创建 文档 片段
         *  2). 将多个平级子元素先添加到文档片段对象中  
            frag.appendChild(子元素)
         *  3). 将文档片段对象，一次性添加到DOM树。  
            父元素.appendChild(frag)
     *  e. 虽然子元素是先放入文档片段中，再加入父元素下的，但是文档片段不会成为页面上实际的元素。将子元素添加到页面后，文档片段就释放了！子元素依然直接隶属于原父元素。

### 三. HTML DOM常用对象: ###

HTML DOM对部分常用的元素对象，提供了专门的简化版函数

*  1.  Image对象  
        (1). 代表页面上一个`<img>`元素  
        (2). 唯一的简化: var img=new Image();  
        (3). 绝不是所有元素都能用new 创建，常用的只要new Image()和new Option()两个。
 *  1.  Select和Option对象
    
     *  (1). select对象代表页面上一个select元素
        
         *  a. .selectedIndex属性 获得当前选中项的下标
         *  b. .options属性 获得当前select元素下所有option对象的集合
         *  c. .length属性 获得当前select元素下所有option对象的个数。等效于.options.length
     *  (2). Option对象: 代表页面上一个`<option>`元素
        
         *  a. 创建: var opt=new Option(内容, value)
         *  顶普通DOM三句话：  
            var opt=document.createElement(“option”)  
            opt.innerHTML=内容;  
            opt.value=value;
 *  1.  Table/…: 采用逐级管理
    
     *  (1). table管着行分组
        
         *  a. table可以添加行分组  
            var 行分组=table.createTHead()  
            .createTBody()  
            .createTFoot()
            
             *  一句话干两件事:
                
                 *  (1). 都创建一个新的行分组对象 —— createElement
                 *  (2). 同时已经把行分组添加到table中 —— appendChild
         *  b. table可以删除行分组  
            table.deleteTHead()  
            table.deleteTFoot()
         *  c. table可以获取行分组  
            table.tHead  
            table.tFoot  
            table.tBodies\[i\]  
            其实table中可以包含多个tbody，所以tbody时放在一个tBodies集合中保存的。并不直接隶属于table。
     *  (2). 行分组管着行
        
         *  a. 行分组可以添加一行
            
             *  1). var tr=行分组.insertRow(i)
             *  2). 在行分组中i位置插入一个新空行
             *  3). 一句话干两件事:
                
                 *  i. 先创建一个空tr
                 *  ii. 再将tr插入到行分组中指定i位置
             *  4). 如果i位置已经有行了，则行会把当前位置的行以及之后的行向后顺移一位。
             *  5). 固定套路:
                
                 *  i. 在末尾追加新行: var tr=行分组.insertRow()
                 *  ii. 在开头插入新行: var tr=行分组.insertRow(0)
         *  b. 行分组可以删除一行
            
             *  1). 行分组.deleteRow(i)
             *  2). 如果.前的主语是行分组，i要求必须用行分组内的相对下标位置
             *  3). 问题: 将来要删除的行下标不能写死在程序中，只能动态获得。其实每个tr对象都有一个tr.rowIndex属性，记录自己在整个表格中的下标位置。但是这个位置不能给行分组.deleteRow()用！因为行在行分组内的下标和行在整个表内的下标很可能不一样。因为有表头行的存在。
             *  4). 解决: 今后要删除一行，不要用行分组删除。应该用table删除: table.deleteRow(tr.rowIndex);
         *  c. 行分组可以获取一行  
            行分组.rows\[i\]
     *  (3). 行管着格
        
         *  a. 行可以添加格: var td=tr.insertCell()
         *  b. 行可以删除格: tr.deleteCell(i)
         *  c. 行可以获取格: tr.cells\[i\]
 *  补: 确认框: 浏览器除了带有警告框alert，输入框prompt，还带着一个确认框confirm
    
     *  (1). var bool=confirm(“提示信息”)
     *  (2). vs alert
        
         *  a. alert，只有一个确定按钮，不能选择
         *  b. confirm，有两个按钮，一个确认，一个取消
     *  (3). 当程序执行到confirm()时，会弹出确认框，阻止程序继续向后执行。直到用户点确认按钮或点取消按钮后，才继续执行。
     *  (4). 如何知道用户点的是确认还是取消?
        
         *  a. 如果用户点的是确认，则confirm()函数返回true
         *  b. 如果用户点的是取消，则confirm()函数返回false
 *  1.  Form和表单元素对象
    
     *  (1). Form对象代表页面上一个`<form>`元素
        
         *  a. 查找: var from=document.forms\[i\]  
            document已经将当前网页中所有`<form>`元素，集中保存在forms集合中，只需要通过\[下标\]，就可取出网页中的一个`<form>`元素对象。
     *  b. 属性:
        
         *  1). .elements 获得当前form元素内的所有表单元素的集合。（只包含表单元素: input textarea button select）
         *  2). .length 获得当前form元素内所有表单元素的个数  
            等效于: .elements.length
     *  (2). 表单元素对象: 代表`<form>`元素内的某一个表单元素  
        a. 获取:  
        1). 标准: var 表单元素=form.elements\[i/id/name\]  
        2). 简写: 只有当表单元素上有name属性时:  
        form.name  
        b. 方法: 表单元素.focus() 让当前表单元素自动获得焦点。
 *  DOM4步:
    
     *  1.  查找触发事件的元素
     *  1.  绑定事件处理函数
     *  1.  查找要修改的元素
     *  1.  修改元素

### DOM：增删改查: ###

*  1.  查找: 4种:
    
     *  (1). 不需要查找就可直接获得的元素:  
        document.documentElement - `<html>`  
        document.head  
        document.body
     *  (2). 按节点间关系查找：  
        元素.parentNode  
        元素.children  
        元素.firstElementChild  
        元素.lastElementChild  
        元素.previousElementSibling  
        元素.nextElementSibling
     *  (3). 按HTML特征查找:  
        var 元素=document.getElementById(“id”)  
        var 类数组对象=父元素.getElementsByTagName(“标签名”)  
        var 类数组对象=父元素.getElementsByClassName(“class名”)  
        var 类数组对象=document.getElementsByName(“name名”)
     *  (4). 按选择器查找:  
        var 元素=父元素.querySelector(“选择器”)  
        var 类数组对象=父元素.querySelectorAll(“选择器”)
 *  1.  修改:
    
     *  (1)内容: 元素.innerHTML 元素.textContent 元素.value
     *  (2)属性:
        
         *  a. 字符串格式的HTML标准属性:  
            元素getAttribute(“属性名”)或元素.setAttribute(“属性名”,“新值”)  
            元素.属性名  
            特例: class->className  
            HTML5: 元素.classList.add()  
            元素.classList.remove()
         *  b. bool类型的HTML标准属性:  
            元素.属性名
     *  c. 自定义扩展属性:  
        元素getAttribute(“属性名”)或元素.setAttribute(“属性名”,“新值”)  
        HTML5: <元素 data-自定义属性名=“值”>  
        元素.dataset.自定义属性名
     *  (3)样式:
        
         *  a. 修改样式，都用内联样式: 元素.style.css属性=“值”
         *  b. 获取样式，都用计算后的样式:  
            var style=getComputedStyle(元素)  
            var 属性值=style.css属性
         *  c. 同时修改多个css属性:  
            元素.style.cssText=“属性:值; 属性:值”
 *  1.  添加元素:  
        (1). 普通: 3步:  
        var a=document.createElement(“a”)  
        a.href=“http://tmooc.cn”;  
        a.innerHTML=“go to tmooc”  
        父元素.appendChild(a)  
        或  
        父元素.insertBefore(a, 现有子元素)  
        或  
        父元素.replaceChild(a, 现有子元素)  
        (2). 用文档片段添加:  
        var frag=document.createDocumentFragment();  
        frag.appendChild(子元素)  
        父元素.appendChild(frag);
 *  1.  删除元素: 父元素.removeChild(子元素)

// 表单数据的动态添加和删除
    <script>
        'use strict';
        var json = [
          {  "ename": "Tom", "salary": 11000, "age": 25 },
          {  "ename": "John", "salary": 13000, "age": 28 },
          {  "ename": "Mary", "salary": 12000, "age": 25 }
        ];
        //添加tbody
        let tbody = document.createElement('tbody');
        let table = document.querySelector('#data>table');
        // thead添加tr删除
        // let thead = document.querySelector('#data>table>thead>tr');
        // let th = document.createElement('th');
        // th.innerHTML = '删除';
        // thead.appendChild(th);
        // 优化
        // let tr = table.tHead.querySelector('tr');
        let td = table.tHead.rows[0].insertCell();
        td.innerHTML = '删除';
    
          // 添加tr
          for(let emp of json){ 
            // 优化
            let tr = tbody.insertRow(0);
            // let tr = document.createElement('tr');
            // tbody.appendChild(tr);
            for(let key in emp){ 
               // 添加td
              // let td = document.createElement('td');
              // td.innerHTML = emp[key];
              // tr.appendChild(td);
              // 优化
              tr.insertCell().innerHTML = emp[key];
            };
            // 行末尾添加新的td
            // let td = document.createElement('td');
            // let btn = document.createElement('button');
            // btn.innerHTML = 'x';
            // td.appendChild(btn);
            // tr.appendChild(td);
            // 优化
            let td = tr.insertCell();  // 末尾添加td
            let btn = document.createElement('button');
            btn.innerHTML = 'x';
            td.appendChild(btn);
            btn.onclick = function(){ 
              let tr = this.parentNode.parentNode;
              let ename = tr.cells[0].innerHTML;
              if(confirm(`是否删除${ ename}`)){ 
                table.deleteRow(tr.rowIndex);
              }
            };
          };     
          table.appendChild(tbody);
      </script>

//二级下拉菜单联动
    <script>
        'use strict';
        /*实现“省”和“市”的级联下拉列表*/
        var cities = [
          [{  "name": '东城区', "value": 101 },
          {  "name": '西城区', "value": 102 },
          {  "name": '海淀区', "value": 103 },
          {  "name": '朝阳区', "value": 104 }],
          [{  "name": '河东区', "value": 201 },
          {  "name": '河西区', "value": 202 },
          {  "name": '南开区', "value": 303 }],
          [{  "name": '石家庄市', "value": 301 },
          {  "name": '廊坊市', "value": 302 },
          {  "name": '保定市', "value": 303 },
          {  "name": '唐山市', "value": 304 },
          {  "name": '秦皇岛市', "value": 304 }]
        ];
    
        // 查找事件元素
        let selProvs = document.getElementsByName('provs')[0];
        //因为要修改的第二个select不会动态添加或删除，只是改变其内容。所以，不需要在事件处理函数中反复查找。应该提前找到，保存在变量中反复使用
        //本例中: 查找name为cities的第二个select
        var selCts = document.getElementsByName("cities")[0];
        // 绑定函数
        selProvs.onchange = function () { 
          // 查找要修改的元素
          let i = this.selectedIndex;
          if (i == 0) { 
            selCts.className = 'hide';
            return
          } else { 
            let arr = cities[i - 1];
            console.log(arr);
            // 创建一个文档片段
            let frag = document.createDocumentFragment();
            // let opt = document.createElement('option');
            // opt.innerHTML = '-选择-';
            // frag.appendChild(opt);
            // 优化
            frag.appendChild(new Option('-请选择-'))
            for (let obj of arr) { 
              // let opt = document.createElement('option');
              // opt.innerHTML = obj.name;
              // frag.appendChild(opt);
              // 优化
              frag.appendChild(new Option(obj.name));
            };
            // 每次重选对象时，清空旧的
            selCts.innerHTML = '';
            selCts.appendChild(frag);
            selCts.className = '';
          }
        };
      </script>

// 表单验证
    <script>
        'use strict';
        var form = document.forms[0];
        var txtName = form.username;
        var txtPwd = form.pwd;
    
        txtName.onfocus =
          txtPwd.onfocus = function () { 
            var div = this.parentNode //当前td
              .nextElementSibling //下一个td
              .children[0]; //下一个td下的div
            div.className = "";
          }
    
        // 验证
        txtName.onblur = function () { 
          vali.call(this, /^\w{1,10}$/);
        }
    
        txtPwd.onblur = function () { 
          vali.call(this, /^\d{6}$/);
        }
    
        function vali(reg) { 
          console.log('ok');
          var div = this.parentNode //当前td
            .nextElementSibling //下一个td
            .children[0];
          // if(reg.test(this.value)){ 
          // div.className = 'vali_success';
          // }else{ 
          // div.className = 'vali_fail';
          // }
          // 优化
          reg.test(this.value) == true ? div.className = 'vali_success' : div.className = 'vali_fail';
          return reg.test(this.value)
        }
    
        // 点击保存按钮再次验证
        // 获取事件元素，绑定事件
        let from = document.forms[0];
        from.elements[from.length - 2].onclick = function () { 
          if (vali.call(txtName, /^\w{1,10}$/)==false){ 
            txtName.focus()
          }else if(vali.call(txtPwd, /^\d{6}$/)==false){ 
            txtPwd.focus();
          }else{ 
            alert('登陆成功！');
          }
        }
      </script>

#### DOM4种优化: ####

*  1.  查找:  
        如果查找条件简单，首选按HTML特征查找。  
        因为返回动态集合，首次查找速度快  
        如果查找条件复杂，就用按选择器查找
 *  1.  修改样式: 尽量减少修改样式的次数，避免反复重排重绘  
        首先用class批量修改css属性  
        如果必须用style修改，也可简写为：  
        元素.style.cssText=“属性:值;属性:值;…”
 *  1.  添加元素: 尽量减少操作DOM树的次数  
        如果同时添加父元素和子元素，可先将子元素加入父元素，最后再一次性将父元素添加到DOM树  
        如果父元素已经在页面上，要添加多个平级子元素，应该先将子元素添加到文档片段。再将文档片段一次性添加到DOM树