document对象 动态的创建元素(节点)/添加元素(节点)/删除元素(节点)
来源:互联网 发布:网络词笔芯是谁发明 编辑:程序博客网 时间:2024/05/16 09:18
主要是通过创建节点的方式来完成动态创建和动态删除的,其具体的方法就2个document.createElement("a");document.getElementById("id1").parentNode.removeChild(document.getElementById("id1"))
在此之前先对dom结点的知识进行加强介绍
1,
常用的dom的每个Node节点属性和方法(加强篇)
特别提示:
html dom和xml dom都遵循相同dom规范的,所以他们有很多相同的方法和属性,因此我们也可以去查看xml dom的node节点提供的方法和属性。
在dom编程中,一个html文档会被当作dom树对待,dom会把所有的html元素映射成Node结点,于是你就可以使用node节点(对象)的属性和方法
下面是node节点的属性和方法,注意createElement是document的方法,不是node节点的方法
属性名称
类型
说明
nodeName
String
节点名称
nodeValue
String
节点值
nodeType
Number
节点类型
parentNode
Node
父节点
firstChild
Node
第一个子节点
lastChild
Node
最后一个子节点
childNodes
NodeList
所有子节点
previousSibling
Node
前一个节点
nextSibling
Node
后一个节点
ownerDocument
Document
获得该节点所属的文档对象
attributes
Map
代表一个节点的属性对象
方法名称
返回值
说明
hasChildNodes()
Boolean
当前节点是否有子节点
appendChild(node)
Node
往当前节点上添加子节点
removeChild(node)
Node
删除子节点
replaceChild(oldNode,newNode)
Node
替换子节点
insertBefore(newNode,refNode)
Node
在指定节点的前面插入新节点
node属性方法的使用 [前、后节点功能在IE8以上浏览器未通过测试]
[dom5-document.html]node属性和方法的使用示例
<html><head><title>document示例Node节点--乌龟抓鸡</title><script language="javascript" type="text/javascript"><!--function test(){var wuguiDiv=$('wugui');alert(wuguiDiv.nodeName+" "+wuguiDiv.nodeType+" "+wuguiDiv.nodeValue);alert(wuguiDiv.childNodes.length+" "+wuguiDiv.nextSibling.nodeValue+" "+wuguiDiv.previousSibling.nodeValue+" "+wuguiDiv.parentNode);}function $(id){return document.getElementById(id);}//--></script></head><body onkeydown="return move(event)"><input type="button" value="Node测试" onclick="test()" /><br><table border="1px"><tr><td></td><td><input type="button" value="向上走" onclick="move(this)" /></td><td></td></tr><tr><td><input type="button" value="向左走" onclick="move(this)" /></td><td></td><td><input type="button" value="向右走" onclick="move(this)" /></td></tr><tr><td></td><td><input type="button" value="向下走" onclick="move(this)" /></td><td></td></tr></table><!--把乌龟放在div中--><div id="wugui" style="position:absolute;left:100px;top:120px;"><img src="1.jpg" border="1px" alt="" /></div><!--鸡放在div中--><div id="cock" style="position:absolute;left:200px;top:200px;"><img src="2.jpg" border="1px" alt="" /></div></body></html>
2,动态创建dom对象createElement()、parentNode.removeChild()
<html><head><title>document示例</title><script language="javascript" type="text/javascript"><!--function test1(){//创建元素var myElement=document.createElement("a");//createElement(??)??写希望创建的html元素的标签名//给新元素添加必要的信息myElement.id="id1";myElement.href="http://www.sina.com.cn";myElement.innerText="连接到sina";//给新元素指定位置myElement.style.left="400px";myElement.style.top="300px";myElement.style.position="absolute";//添加到document.body上document.body.appendChild(myElement);}function test2(){var myButton=document.createElement("input");myButton.type="button";myButton.value="这是动态建立的按钮";document.getElementById("div1").appendChild(myButton);}function test3(){//删除一个元素(删除一个元素前提:必需获得父元素)//这是第一种删除方法(不灵活)document.body.removeChild(document.getElementById("id1"));//第二种方法(推荐此方法)//document.getElementById("id1").parentNode.removeChild(document.getElementById("id1"));}//--></script></head><body><input type="button" onclick="test1()" value="动态创建超链接" /><input type="button" onclick="test2()" value="动态创建按钮" /><input type="button" onclick="test3()" value="删除超链接" /><div id="div1" style="width:200px;height:400px;border:1px solid red;">div1</div></body></html>
- document对象 动态的创建元素(节点)/添加元素(节点)/删除元素(节点)
- jQuery动态创建节点元素
- jquery 节点操作(动态创建元素/添加元素/清空元素/复制元素)
- 删除元素的孩子节点
- js删除元素节点
- 创建元素节点的使用方法
- jQuery添加元素节点
- 给元素添加节点
- 创建元素(节点)
- 创建节点元素
- 创建元素节点creataElement
- Jquery动态添加及删除页面节点元素
- 获取iframe节点元素里的document对象
- 利用节点添加和删除元素
- 元素节点、属性节点
- jQuery动态创建元素以及追加节点
- document 获得元素节点,属性节点,文本节点。
- document 获得元素节点,属性节点,文本节点
- Practical Memory Management/官方关于内存管理的浅显介绍
- 关于ListView数据错乱跟item上图片错位
- 保存网页为图片——滚动截取IE(WebBrowse)
- hdu 5057(树状数组+离线处理)
- NYOJ 题目36 最长公共子序列(动态规划)
- document对象 动态的创建元素(节点)/添加元素(节点)/删除元素(节点)
- 【转】关于计算机图形学的学习的书籍推荐
- leetcode - Path Sum II
- UVa 10105 - Polynomial Coefficients (排列组合)
- hdu1254 推箱子 搜索水题(bfs+bfs)
- java基础之IO流中的SequenceInputStream
- python抓取网页内容
- Java--语言基础--Java中的enum的使用与分析
- \tcnative-1.dll: Can't load IA 32-bit .dll on a AMD 64-bit platform