DOM 3

Posted 2020-09-28 Hale.Proh

1. 添加/删除元素

2. ***html DOM常用对象

   select/option    table/行分组/tr/td    form

 

1. 添加/删除元素:

  添加: 3步:

     1. 创建新的空元素:

         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>

     3. 将元素添加到DOM树上:

         3种:

         1. 末尾追加: parent.appendChild(a)

         2. 插入在一个现有元素之前:

               parent.insertBefore(a,oldElem)

         3. 替换现有元素: parent.replaceChild(a,oldElem)

 

***页面加载过程:

    html->DOM Tree

                    ↓

                Render Tree->***layout->paint

                    ↑

    css->CSSRules

    结论: 只要修改DOM树的内容，都会导致重新layout

    解决: 优化: 尽量少的操作DOM树

        1. 如果同时添加父元素和子元素

                先再内存中将子元素添加到父元素，再将父元素一次性添加到DOM树

 

 

 

 

 

 

 

1. 添加/删除元素

2. ***HTML DOM对象

    select/option table/行分组/tr/td  form

 

1. 添加/删除元素

   优: 尽量少的操作DOM树

   如何:

     1. 如果同时添加父元素和子元素时，都要先将子元素添加到父元素，再将父元素整体添加到DOM树一次即可

     2. 如果同时添加多个平级元素时，都要用文档片段

      文档片段: DocumentFragment

         内存中临时存放多个平级元素的虚拟的临时父元素

         何时: 如果同时添加多个平级元素时，都要先将平级元素添加到文档片段中。再将文档片段一次性添加到DOM树

         如何:

           1. 创建文档片段:

              var frag=document.createDocumentFragment();

           2. 将子元素添加到frag中: frag.appendChild(child)

           3. 将frag添加到DOM树: parent.appendChild(frag)

               frag将子元素添加到DOM树后，自动释放。

 

    删除元素: 1. 先找到要删除的元素对象elem

                   2. parent.removeChild(elem)

        elem.parentNode.removeChild(elem);

 

2. ***HTML DOM常用对象:

    Image   Select/Option    Table/...     Form

  1. Image: 代表一个<img元素

      唯一的简化: var img=new Image();

  2. Select: 代表一个<select元素

      属性:

          .selectedIndex: 获得select中当前选中项的下标

          .options: 获得select中所有的option元素对象

          .options.length: option元素的个数

                                       =0可清除所有option

          其实select.length等效于select.options.length

              最简单的清除所有option的办法: select.length=0;

          .value: 当前select元素选中项的值

               2种情况:

                  1. 如果选中项有value属性，则使用选中项的value属性

                  2. 如果选中项没有value属性，则使用text作为value             

      方法:

         .add(option) => .appendChild

         .remove(i) => select.removeChild(select.options[i])

      事件:

         .onchange: 当选中项发生改变时  

 

      Option: 代表一个<option元素

        创建:

            var opt=new Option(text,value)

        属性:

            .index: 当前option在select中的下标

            .value:

            .text => .innerHTML

            selected:  

   

    其实向select中添加一个option的最简单写法:

       sel.add(new Option(text,value));

 

  3. Table: 代表<table元素

      table

          .createTHead()=>thead

          .deleteTHead()

          .tHead

              .insertRow(i) => tr //在i位置插入一个新行

                                省略i, 默认表示末尾追加

              .deleteRow(i);//删除i位置的行

              .rows //获得thead中的所有行对象

              .rows[i]=>tr

                属性: .rowIndex 获得当前tr相对于整个table的行下标

                                  .insertCell(i) => td //i位置添加一个新td

                                                   省略i, 默认表示末尾追加

                                  .deleteCell(i)

                                  .cells //获得行中的所有格

                                  .cells[i] => td

             

          .createTBody() tbody

          .tBodies/tBody

         

          .createTFoot() tfoot

          .deleteTFoot()

          .tFoot

 

    删除行:

      2种: 1. 用行分组.deleteRow(i)

                     i : 指的是行在当前分组内的下标位置

             2. 用table.deleteRow(i)

                    i: 指的是行在整个table中的下标位置

                           ——tr.rowIndex

       只要用rowIndex删除行，必须用table.deleteRow(...)

 

补: 三类对话框: 都不用

   alert("警告"); 

   var bool=confirm("确认提示");

       点确定->true

       点取消->false

   var input=prompt("输入提示")