• 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就能够了,其它的使用方法和前面一样的。

    详细的函数大家查下手冊把,我就不说了,只是感觉这个并非非常有用。。。。

  • 相关阅读:
    软件测试homework2
    软件测试homework1
    ubuntu14 安装QUME+xv6
    判断两线段是否相交 模板
    并查集 HDU1558
    并查集 HDU1272
    并查集 HDU1232
    数据结构之单向链表 UVa11988
    Java大数 字符串处理 HDU2100
    Java大数中的小数 HDU1753
  • 原文地址:https://www.cnblogs.com/hrhguanli/p/4002649.html
Copyright © 2020-2023  润新知