Javascript & DHTML DOM基础和基本API第5/5页

更新时间：2008年07月03日 20:58:05 作者：

DOM是文档对象模型(Document Object Model，是基于浏览器编程（在本教程中，可以说就是DHTML编程）的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器最与标准接近。

二、动态创建与插入结点

1)、创建结点对象。document.createElement(tagname)，tagname指的是一个标签，比如一个DIV，就是document.createElement("DIV")，它返回的是这个结点的引用。

2)、在body的尾部插入结点用document.body.appendChild(object)，为了容易理解，下面这个示例，我用了IE专有的属性object.outerHTML，得到一个该元素的HTML标签内容（包括自身），这样会更容易看到效果。

<html>   <head>     <title>never-online's website</title>     <script>     function insertNode (strText) {       alert("插入元素前的body HTML：\n" +document.body.outerHTML);       var node = document.createElement("DIV");       node.innerHTML = strText;       document.body.appendChild(node);       alert("插入元素后的body HTML：\n" +document.body.outerHTML);     }     </script>   </head>   <body>     <div>tutorial of DHTML and javascript programming</div>     <input onclick="insertNode('change?')" type="button" value="change"/>   </body> </html> [/htm] 3)、在元素处插入结点。object.insertBefore(oNewNode [, oChildNode])，oNewNode为一个我们创建的结点，oChildNode是可选的，为object下的一个子节点。同样的，为了看到效果，我也用了outerHTML。示例 [html] <html>   <head>     <title>never-online's website</title>     <script>     function insertNode (strText) {       alert("插入元素前的body HTML：\n" +document.body.outerHTML);       var node = document.createElement("DIV");       var myNode = document.getElementById("textNode");       node.innerHTML = strText;       document.body.insertBefore(node,myNode);       alert("插入元素后的body HTML：\n" +document.body.outerHTML);     }     </script>   </head>   <body>     <div id="textNode">tutorial of DHTML and javascript programming</div>     <input onclick="insertNode('change?')" type="button" value="change"/>   </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

三、移除结点。
1) object.parentNode.removeChild(oChildNode)，这个就是语法，下面看示例。

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

这一节就先写到这里，下一节我们就可以用这几个简单的API做许多事情了，几个API就可以写出很多效果

上一页 1 2 3 45阅读全文

您可能感兴趣的文章:

JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
对于js初学着必须理解this和srcElement的应用，这也是面试中经常考到的。下面我们就通过几个示例来详细了解下
2015-05-05
redux-saga 初识和使用
这篇文章主要介绍了redux-saga 初识和使，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
原生JS实现pc端轮播图效果
这篇文章主要为大家详细介绍了原生JS实现pc端轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
阻止表单提交按钮多次提交的完美解决方法
下面小编就为大家带来一篇阻止表单提交按钮多次提交的完美解决方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧，祝大家游戏愉快哦
2016-05-05
详解javascript传统方法实现异步校验
这篇文章主要为大家介绍了javascript实现异步校验的方法，感兴趣的小伙伴们可以参考一下
2016-01-01
JS正则表达式之非捕获分组用法实例分析
这篇文章主要介绍了JS正则表达式之非捕获分组用法,结合实例形式详细分析了正则表达式中非捕获分组的概念、功能、使用方法与相关注意事项,需要的朋友可以参考下
2016-12-12
js提示框替代系统alert,自动关闭alert对话框的实现方法
下面小编就为大家带来一篇js提示框替代系统alert,自动关闭alert对话框的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
JavaScript原生开发视频播放器的实现代码
这篇文章我们将一起探索一份自定义的视频播放器实现代码，甚至还可以实现有弹幕功能，文中的示例代码讲解详细，感兴趣的可以了解一下
2023-06-06
mqtt.js 无法连接/错误提示 WebSocket connection to ‘ws://xxxxx‘
这篇文章主要介绍了mqtt.js 无法连接/错误提示 WebSocket connection to ‘ws://xxxxx‘ failed:,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-01-01
一步一步教你写淡入淡出带注释的图片轮播插件（一）
抽空写了个类似的效果，做了一定程度的封装，虽然也只能勉强算个轻量级原生小插件吧，但还是分享出来，并做一步一步的教程，希望能给有需要的朋友一些帮助吧。
2010-10-10