2014年辛星解读Javascript之用DOM动态操纵HTML元�

最新推荐文章于 2024-07-28 20:27:10 发布

weixin_30764137

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量1k

点赞数

文章标签： javascript 数据结构与算法 ViewUI

原文链接：http://www.cnblogs.com/hrhguanli/p/4002649.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就能够了，其它的使用方法和前面一样的。

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

转载于:https://www.cnblogs.com/hrhguanli/p/4002649.html

weixin_30764137

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2014年辛星解读Javascript之用DOM动态操纵HTML元�

关于DOM，我们了解了能够用DOM操纵HTML的一些属性和样式，还能够为HTML元素绑定事件等等，那么接下来，我们将涉及到用DOM来动态的创建、删除HTML等一些操作，我的核心思路还是重实战，因此，代码演示样例是肯定少不了的。只是在使用DOM动态操纵HTML元素之前，我们还是先了解一下DOM树，以下是我从网上找的一个DOM树的图片，它的截图例如以下：...
复制链接

扫一扫