JavaScript HTML DOM学习笔记

最新推荐文章于 2020-07-13 11:07:19 发布

育秦

最新推荐文章于 2020-07-13 11:07:19 发布

阅读量761

点赞数

分类专栏：前端文章标签：动态添加table表格的内容 JavaScript dom

本文链接：https://blog.csdn.net/xuepan1994/article/details/52033546

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

 
 学习JavaScript HTML DOM主要是为了改变html和css，先查找到想要改变的地方，然后改变其html的class、内容和css 

 
 另外，还包括学习html节点的事件和添加和删除节点 

 
 之前只是觉得学了就是学了，没认真琢磨里面的内容。接下来我会先复习基础知识，然后利用JavaScript HTML DOM练习给table动态添加新的节点和内容 

 
 首先，先查找html dom节点方法有三种： 

 
 通过 id 找到 HTML 元素 

  var x=document.getElementById("main"); 

 
 通过标签名找到 HTML 元素 

  var y=x.getElementsByTagName("p"); 

 
 通过类名找到 HTML 元素 

  getElementsByClassName（）； 

  /** 取得对应类和标签的HTML元素  

  * clsName:给定类名  

  * tagName：给定的HTML元素，如果为任意 tagName='*'   

*/

  function getElementsByClassName(clsName, tagName) {   

      var ClassElements = [];   

      selElements = document.getElementsByTagName(tagName);   

      for (var i = 0; i < selElements.length; i++) {   

          if (selElements[i].className == clsName) {   

              ClassElements[ClassElements.length] = selElements[i];   

}

}

      return ClassElements;   

}

 
 其次是改变html和css 

  改变html： 

  改变html输出流 document.write() 

  改变html内容 document.getElementById(id).innerHTML=new HTML 

  改变html属性 document.getElementById(id).attribute=new value 

  改变css： 

  改变html样式 document.getElementById(id).style.property=new style 

 
 html节点事件 
  

  常用节点事件 

  onclick 用户点击某个元素时执行代码 

  onload 和 onunload 事件会在用户进入或离开页面时被触发。 

  onchange 事件常结合对输入字段的验证来使用。 

  onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。 

  onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。 

  更多参考： 
 http://www.w3school.com.cn/jsref/dom_obj_event.asp 

 
 html添加/删除节点 

 
 创建新的 HTML 元素 （首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。） 

  <div id="div1"> 
 
 <p id="p1">这是一个段落</p> 
 
 <p id="p2">这是另一个段落</p> 
 
 </div> 
 
 <script> 
 
 var para=document.createElement("p"); 
 
 var node=document.createTextNode("这是新段落。"); 
 
 para.appendChild(node); 
 
 var element=document.getElementById("div1"); 
 
 element.appendChild(para); 
 
 </script>

 
 删除已有的 HTML 元素 （删除 HTML 元素，首先获得该元素的父元素 
 ） 

  <div id="div1"> 
 
 <p id="p1">这是一个段落。</p> 
 
 <p id="p2">这是另一个段落。</p> 
 
 </div> 
 
 <script> 
 
 var parent=document.getElementById("div1"); 
 
 var child=document.getElementById("p1"); 
 
 parent.removeChild(child); 
 
 </script>

 
 ok ,以上就是我对知识的巩固。接下来，开始我的练习 

  以下的例子是动态添加table表格的内容方法 

  <body> 

  <div class="tableClass" > 

  <table border="1"> 

  <caption>表格</caption> 

  <thead> 

  <tr> 

  <td>第一列标题</td> 

  <td colspan="2">第二三列标题</td> 

  </tr> 

  </thead> 

  <tbody id="tables"> 

  <!--在此处动态添加代码--> 

  </tbody> 

  </table> 

  </div> 

  </body> 

  <script> 

  var tableData = [{ 

  project: "项目1", 

  standard: "0.25mg/m3", 

  result: "0.1mg/m3", 

  situation: "否" 

  }, { 

  project: "项目2", 

  standard: "0.2mg/m3", 

  result: "0.3mg/m3", 

  situation: "是" 

}];

  addTablebody( tableData); 

  function addTablebody(data) { 

  var body=document.getElementById("tables"); 

  var html = new StringBuilder(); 

  for(var i = 0; i < data.length; i++) { 

  var d = data[i]; 

  var trs = '<tr>' + '<td rowspan="3">' + d.project + '</td>' + '<td>' + "标 准" + '</td>' + '<td>' + d.standard + '</td>' + '</tr>' + '<tr>' + '<td>' + "结果" + '</td>' + '<td>' + d.result + '</td>' + '</tr>' + '<tr>' + '<td>' + "是否超标" + '</td>' + '<td>' + d.situation + '</td>' + '</tr>'; 