首页 > 代码库 > 2014年辛星解读Javascript之用DOM动态操纵HTML元素
2014年辛星解读Javascript之用DOM动态操纵HTML元素
关于DOM,我们了解了可以用DOM操纵HTML的一些属性和样式,还可以为HTML元素绑定事件等等,那么接下来,我们将涉及到用DOM来动态的创建、删除HTML等一些操作,我的核心思路还是重实战,因此,代码示例是肯定少不了的。
不过在使用DOM动态操纵HTML元素之前,我们还是先了解一下DOM树,下面是我从网上找的一个DOM树的图片,它的截图如下:
如果大家学习过“树”这种数据结构,就会很好理解,一个父节点可以包含N个子节点,这些子节点可能是div、p等标签,也可以是属性,还可以是中间的文本信息,比如上面的em的子节点take your time就是一个典型的文本节点。
如果我们需要向HTML的DOM中添加新元素,那么我们必须首先创建该元素,然后向一个已有的元素中添加,听上去好像非常拗口。其实很好理解,就是我们可以用添加的方式来给DOM树引入新内容,Javascript给我们方法来创建该元素,直接看如下代码:
<html> <body> <div id = "demo"><p id = "tag">辛星</p></demo> <script type="text/javascript"> //先创建一个元素 var p1 = document.createElement("p"); //然后创建一个文本节点 var msg = document.createTextNode("小倩"); //把该文本节点放入该元素中 p1.appendChild(msg); //得到demo这个div var demo = document.getElementById("demo"); //把p1这个标签插入到demo这个div里去 demo.appendChild(p1); </script> </body> </html>
然后我们发现效果如下:
添加文本节点我们使用addChild,那么删除子节点,我们就用removeChild就可以了,其他的用法和前面一样的。
具体的函数大家查下手册把,我就不说了,不过感觉这个并不是很实用。。。。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。