你的浏览器不支持canvas

做你害怕做的事情，然后你会发现，不过如此。

《智能社：JavaScript教程——从入门到精通》第11~14集笔记 DOM操作和表格

时间： 2017年12月11日 17:20:00 作者： 黄运鑫

本文章属原创文章，未经作者许可，禁止转载，复制，下载，以及用作商业用途。原作者保留所有解释权。

笔记目录

  1. 《智能社：JavaScript教程——从入门到精通》第1~5集笔记 事件
  2. 《智能社：JavaScript教程——从入门到精通》第6~10集笔记
  3. 《智能社：JavaScript教程——从入门到精通》第11~14集笔记 DOM操作和表格
  4. 《智能社：JavaScript教程——从入门到精通》第15~19集笔记 运动
  5. 《智能社：JavaScript教程——从入门到精通》第20~21集笔记 鼠标键盘事件
  6. 《智能社：JavaScript教程——从入门到精通》第22~23集笔记 事件高级应用
  7. 《智能社：JavaScript教程——从入门到精通》第24~25集笔记 Ajax
  8. 《智能社：JavaScript教程——从入门到精通》第26~29集笔记 面向对象
  9. 《智能社：JavaScript教程——从入门到精通》第30~31集笔记 坐标和cookie
  10. 《智能社：JavaScript教程——从入门到精通》第32集笔记 JS正则表达式
  • 本文为原创，转载请注明：https://blog.xinpapa.com/2017/12/11/zhinengshe11-14/

详细内容

1.DOM基础1

  • DOM节点1
    • childNodes和nodeType
      • childNodes：能获取子节点，只有IE6~8能正常使用，其他游览器会将文本也当作一个节点
      • nodeType：可以得到子节点类型
      • 解决兼容性代码如下（实现更改li标签的颜色）： 
          <body>
      <ul id="ul1">
          <li>111</li>
          <li>222</li>
      </ul>
  </body>

        window.onload = function () {
  var oUl = document.getElementById("ul1");
  for (var i = 0; i < oUl.childNodes.length; i++) {
  if (oUl.childNodes[i].nodeType == 1) {
  oUl.childNodes[i].style.background = "red";
  }
  }
};
    • children
      • children：也是获取子节点，和childNodes相似，但是children只包含元素，而不包含文本;
        代码如下（实现更改 li标签的颜色）： 
          <body>
      <ul id="ul1">
          <li>111</li>
          <li>222</li>
      </ul>
  </body>

        window.onload = function () {
  var oUl = document.getElementById("ul1");
  for (var i = 0; i < oUl.childred.length; i++) {
  oUl.childred[i].style.background = "red";
  }
};
    • parentNode
      • 获取节点的父节点，例子（点击链接，隐藏整个li）： 
          <body>
      <ul id="ul1">
          <li>1111111<a href="javascript:void(0);">隐藏</a></li>
          <li>2222222<a href="javascript:void(0);">隐藏</a></li>
          <li>3333333<a href="javascript:void(0);">隐藏</a></li>
          <li>4444444<a href="javascript:void(0);">隐藏</a></li>
          <li>5555555<a href="javascript:void(0);">隐藏</a></li>
      </ul>
  </body>

        window.onload = function () {
  var aA = document.getElementsByTagName("a");
  for (var i = 0; i < aA.length; i++) {
  aA[i].onclick = function () {
  this.parentNode.style.display = "none";
  };
  }
};
    • offsetParent
      • 获取某一个元素用来定位的父级，例子（获取元素在页面上的定位的父级）： 
        #div1{
  width: 200px;
  height: 200px;
  background: #CCC;
  margin-left: 50px;
  position: relative;
/*如果没有position，则得到的定位父级是body*/
}
#div2{
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
  left: 50px;
  top: 50px;
}

          <body>
      <div id="div1">
          <div id="div2"></div>
      </div>
  </body>

        window.onload = function () {
  var oDiv2 = document.getElementById("div2");
  alert(oDiv2.offsetParent);
};

2.DOM基础2

  • DOM节点2
    • 首尾子节点
      • firstChild和firstElementChild
        • 获取第一个子节点
        • firstChild：低版本浏览器可用，高版本浏览器不兼容；
        • firstElementChild：高版本浏览器可用，低版本浏览器不兼容；
          都兼容的代码编写如下： 
            <body>
      <ul id="ul1">
          <li>1</li>
          <li>2</li>
          <li>3</li>
      </ul>
  </body>

          window.onload = function () {
  var oUl = document.getElementById("ul1");
  if (oUl.firstElementChild) {
  oUl.firstElementChild.style.background = "red";
  } else {
  oUl.firstChild.style.background = "red";
  }
};
      • lastChild和lastElementChild
        • 获取最后一个子节点
        • 兼容性问题同上
    • 兄弟节点
      • nextSibling和nextElementSibling
        • 获取下一个兄弟节点
        • 兼容性问题同上
      • previousSibling和previousElementSibling
        • 获取上一个兄弟节点
        • 兼容性问题同上

3.操纵元素属性

  • 元素属性操作
    • 第一种：oDiv.style.display = "block";
    • 第二种：oDiv.style["变量"] = "block";
    • 第三种：DOM方式
  • DOM方式操作元素属性
    • 获取：getAttribute(属性名称);
    • 设置：setAttribute(属性名称,值);
    • 删除：removeAttribute(属性名称);

4.创建、插入和删除元素

  • 创建DOM元素
    • createElement(标签名)：创建一个节点
    • appendChild(节点)：追加一个子节点
    • 例子（给ul插入li）： 
      var oUl = document.getElementById("ul1");
var oLi = document.createElement("li");//创建li标签
oLi.innerHTML = "adfas";//设置的li标签内的文本
oUl.appendChild(oLi);//在oUl的子元素末尾追加创建的li标签
  • 插入元素
    • insertBefore(节点,原有节点)：在已有元素前插入
  • 删除DOM元素
    • removeChild(子节点)：删除一个子节点

5.文档碎片（用处很小）

  • 文档碎片可以提高DOM操作性能（理论上）
    • 只有在低版本浏览器中效果明显，高版本浏览器在某些情况下反而会降低性能
  • 文档碎片原理
    • 执行操作后页面不会立即渲染，而是将操作保存在碎片中，最后多个操作只需要渲染一次。
  • document.createDocumentFragment()方法，例子（一次插入10000个li标签）： 
      <body>
      <ul id="ul1"></ul>
  </body>

    window.onload = function () {
  var oUl = document.getElementById("ul1");
  var oFrag = document.createDocumentFragment();//创建一个文档碎片
  for (var i = 0; i < 10000; i++) {
      var oLi = document.createElement("li");
      oLi.innerHTML = "adfas";
      oFrag.appendChild(oLi);//将操作放进碎片中
  }
  oUl.appendChild(oFrag);//最后一次插入所有li标签
};

6.表格应用1

  • 获取
    • tBodies、tHead、tFoot、rows、cells
      • tBodies：是一个数组，用于找出所有tbody，一个表格可以有多个tbody；
      • rows：是一个数组，用于找出所有行；
      • cells：是一个数组，用于找出所有td，也就是单元格
      • tHead：是一个元素，用于找出表头
      • tFoot：是一个元素，用于找出表尾
        例子： 
        var oTab = document.getElementById("tab1");
//获取第一个tbody中第二行的第二个单元格中的文本内容
alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);
  • 隔行变色和鼠标移入高亮，代码如下： 
      <body>
      <table id="tab1" border="1" width="500px">
          <thead>
              <td>ID</td>
              <td>姓名</td>
              <td>年龄</td>
          </thead>
          <tbody>
              <tr>
                  <td>1</td>
                  <td>张三</td>
                  <td>25</td>
              </tr>
              <tr>
                  <td>2</td>
                  <td>李四</td>
                  <td>26</td>
              </tr>
              <tr>
                  <td>3</td>
                  <td>王五</td>
                  <td>27</td>
              </tr>
              <tr>
                  <td>4</td>
                  <td>张三2</td>
                  <td>28</td>
              </tr>
              <tr>
                  <td>5</td>
                  <td>张三3</td>
                  <td>29</td>
              </tr>
          </tbody>
      </table>
  </body>

    window.onload = function () {
  var oTab = document.getElementById("tab1");
  //oldColor记录鼠标进入前的颜色，用于鼠标移出时还原颜色
  var oldColor = "";
  for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
      //给tbody中的每一行设置鼠标移入和移出的事件
      oTab.tBodies[0].rows[i].onmouseover = function () {
          //先记录移入前的颜色,再改变颜色
          oldColor = this.style.background;
          this.style.background = "green";
      };
      oTab.tBodies[0].rows[i].onmouseout = function () {
      //还原到鼠标移入前的颜色
          this.style.background = oldColor;
      };
      //用于隔行变色
      if (i % 2 == 0) {
          oTab.tBodies[0].rows[i].style.background = "#CCC";
      }
  }
};
  • 添加、删除一行
    • DOM方法的应用，代码如下： 
        <body>
      姓名：<input id="name" type="text" />
      年龄：<input id="age" type="text" />
      <input id="btn1" type="button" value="添加" />
      <table id="tab1" border="1" width="500px">
          <thead>
              <td>ID</td>
              <td>姓名</td>
              <td>年龄</td>
              <td>操作</td>
          </thead>
          <tbody>
              <tr>
                  <td>1</td>
                  <td>张三</td>
                  <td>25</td>
                  <td><a href='javascript:void(0);'>删除</a></td>
              </tr>
              <tr>
                  <td>2</td>
                  <td>李四</td>
                  <td>26</td>
                  <td><a href='javascript:void(0);'>删除</a></td>
              </tr>
              <tr>
                  <td>3</td>
                  <td>王五</td>
                  <td>27</td>
                  <td><a href='javascript:void(0);'>删除</a></td>
              </tr>
          </tbody>
      </table> 
  </body>

      window.onload = function () {
  var oTab = document.getElementById("tab1");
  var oBtn = document.getElementById("btn1");
  var oName = document.getElementById("name");
  var oAge = document.getElementById("age");
  //id是保存当前添加的表格id，再添加时不重复递增
  var id = oTab.tBodies[0].rows.length + 1;
  oBtn.onclick = function () {
  var oTr = document.createElement("tr");//创建tr
  //依次创建td并添加到tr中
  var oTd = document.createElement("td");
  oTd.innerHTML = id++;
  oTr.appendChild(oTd);
  var oTd = document.createElement("td");
  oTd.innerHTML = oName.value;
  oTr.appendChild(oTd);
  var oTd = document.createElement("td");
  oTd.innerHTML = oAge.value;
  oTr.appendChild(oTd);
  var oTd = document.createElement("td");
  oTd.innerHTML = "<a href='javascript:void(0);'>删除</a>";
  oTr.appendChild(oTd);
  //给添加的a标签添加点击事件
  oTd.getElementsByTagName("a")[0].onclick = function () {
      oTab.tBodies[0].removeChild(this.parentNode.parentNode);
  };
  oTab.tBodies[0].appendChild(oTr);//添加一行表格
  };
};

7.表格应用2

  • 搜索
    • 版本1：基础版本——字符串比较
    • 版本2：忽略大小写——大小写转换
    • 版本3：模糊搜索——search的使用
    • 版本4：多关键词搜索——split
    • 高亮显示、筛选
      代码如下（代码是筛选效果，更改display属变成高亮效果）： 
        <body>
      姓名：<input id="name" type="text" />
      <input id="btn1" type="button" value="搜索" />
      <table id="tab1" border="1" width="500px">
          <thead>
              <td>ID</td>
              <td>姓名</td>
              <td>年龄</td>
              <td>操作</td>
          </thead>
          <tbody>
              <tr>
                  <td>1</td>
                  <td>张三</td>
                  <td>25</td>
                  <td><a href='javascript:void(0);'>删除</a></td>
              </tr>
              <tr>
                  <td>2</td>
                  <td>李四</td>
                  <td>26</td>
                  <td><a href='javascript:void(0);'>删除</a></td>
              </tr>
              <tr>
                  <td>3</td>
                  <td>王三</td>
                  <td>27</td>
                  <td><a href='javascript:void(0);'>删除</a></td>
              </tr>
          </tbody>
      </table>
  </body>

      window.onload = function () {
  var oTab = document.getElementById("tab1");
  var oBtn = document.getElementById("btn1");
  var oTxt = document.getElementById("name");
  oBtn.onclick = function () {
  //循环每一行
  for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
      var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase().trim();
      var sTxt = oTxt.value.toLowerCase().trim();
      var arr = sTxt.split(" ");//用空格拆分输入的内容，实现多关键字查询
      //每次点击查询就隐藏所有行
      oTab.tBodies[0].rows[i].style.display = "none";
      //循环每个关键字和每一行的内容进行比较
      for (var j = 0; j < arr.length; j++) {
          //用每一行姓名单元格中的内容和关键字进行对比
          if (sTab.search(arr[j]) != -1) {
              //显示查到的行
              oTab.tBodies[0].rows[i].style.display = "block";
          }
      }
  }
  };
};
  • 排序
    • 移动li标签
    • 元素排序：转换——排序——插入
      排序代码如下： 
        <body>
      <input id="btn1" type="button" value="排序" />
      <table id="tab1" border="1" width="500px">
          <thead>
              <td>ID</td>
              <td>姓名</td>
              <td>年龄</td>
              <td>操作</td>
          </thead>
          <tbody>
              <tr>
                  <td>3</td>
                  <td>张三</td>
                  <td>25</td>
                  <td><a href='javascript:void(0);'>删除</a></td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>李四</td>
                  <td>26</td>
                  <td><a href='javascript:void(0);'>删除</a></td>
              </tr>
              <tr>
                  <td>2</td>
                  <td>王三</td>
                  <td>27</td>
                  <td><a href='javascript:void(0);'>删除</a></td>
              </tr>
          </tbody>
      </table>
  </body>

      window.onload = function () {
  var oTab = document.getElementById("tab1");
  var oBtn = document.getElementById("btn1");
  oBtn.onclick = function () {
  var arr = [];
  //得到所有行，并添加到数组
  for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
      arr[i] = oTab.tBodies[0].rows[i];
  }
  //将数组按照id进行排序
  arr.sort(function (tr1, tr2) {
      var n1 = parseInt(tr1.cells[0].innerHTML);
      var n2 = parseInt(tr2.cells[0].innerHTML);
      return n1 - n2;
  });
  //将排序后的数组内容依次插入到表格中
  for (var i = 0; i < arr.length; i++) {
      oTab.tBodies[0].appendChild(arr[i]);
  }
  };
};

8.表单应用1

  • 什么是表单
    • 向服务器提交数据，比如：用户注册
  • action：提交到哪里
  • onsubmit：提交时发生
  • onreset：重置时发生

9.表单应用2（表单内容验证）

  • 阻止用户输入非法字符——阻止事件
  • 输入时、失去焦点的验证：onkeyup、onblur
  • 提交时检查：onsubmit
  • 后台数据检查
    • 不管页面怎么验证，数据到了后台还是要重新验证，因为一些来自用户的数据都是不可信的。

对于本文内容有问题或建议的小伙伴，欢迎在文章底部留言交流讨论。