首页 > 代码库 > 动态操作DOM节点js实现
动态操作DOM节点js实现
近日再次翻看《javascript面向对象编程指南》这本书,读到浏览器环境一章,渐渐明白了js作为脚本语言,需要依托宿主环境来实现功能,从浏览器角度考虑,就是对浏览器的BOM和DOM的操作。DOM操作又可分为:访问、修改、删除、新建。每种操作都有独特的方法和属性。下面取dom节点的访问、新建和删除的功能实例来讲解(参考文章)。
<INPUT LEFT: 392px; POSITION: absolute; TOP: 128px" type="button" value=http://www.mamicode.com/"add" onclick="add()" >>function add()//动态添加表格的例子 { var parNode = document.getElementById("Table1"); var tr=document.createElement("tr"); var td = document.createElement("td"); //新建一个td类型的Element节点 td.appendChild(document.createTextNode("这是第一列")); tr.appendChild(td); var td = document.createElement("td"); //新建一个td类型的Element节点 td.appendChild(document.createTextNode("这是第二列")); tr.appendChild(td); parNode.appendChild(tr); } function remove() { var parNode=document.getElementById("Table1"); var tr=document.getElementsByTagName("tr"); alert(tr);//从此处看出tr为nodelist即节点表,所以删除节点需要指定具体哪个需要删除 parNode.removeChild(tr[0]); }
首先在html中建立两个按钮元素,分别单击响应add和remove函数。两个函数内getElementById、getElementByTagName属于dom元素访问的快速方法,createElement和CreateTextNode分别为新建元素和文本内容的方法,removeChild为移除子元素的方法同时也回答了引用文章评论的答案。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。