JavaScript的DOM操作(节点操作)
创建节点 2、创建文本节点 3、插入节点到最后 4、插入节点到目标节点的前面 node.parentNode.insertBefore(node, node.parentNode.firstChild); 5、复制节点 6、删除节点 7、替换节点 8、设置节点属性 9、获取节点属性 10、判断元素是否有子节点 最后是DOM的属性: nodeName - 节点的名字; |
JavaScript操作DOM 建立增加删除克隆访问节点示例:
1. getElementById(id)
这是通过id来访问某一元素,最常用的之一,例:
<html>
<body>
<div id="myid">
test
</div>
<script language="javascript">
alert(document.getElementById("myid").innerHTML);
</script>
</body>
</html>
注意点:如果元素的ID不是唯一,则会取得第一个该ID名称的元素
2. getElementsByName(name)
这是通过name来取得某一堆元素(作为数组),看 Element后面有个小s就知道了,ID是HTML文档中要求唯一的,name可以不是唯一,如checkbox、radio等地方会用到多个 input用同一个name来识别是否为同党。对了,getElementsByName(name)仅用于取得input、radio、 checkbox等元素,如<inputname="myradio" type="radio" />
3. getElementsByTagName(tagname) 看这方法就知道这也是取得某一堆元素(作为数组),是通过TagName也就是标签名来取得。你可以遍历这个数组获得每一个单独的元素。当一个DOM结构很大时,可以通过它来有效地缩小搜查范围。
<html>
<head>
<script>
function test()
{
testall=document.getElementsByTagName("body");
testbody=testall.item(0);
//获得所有tagName是body的元素(当然每个页面只有一个)
testall=testbody.getElementsByTagName("p");
// 获得body子元素种的所有P元素
testnode=testall.item(1);
// 获得第二个P元素
alert(testnode.firstChild.nodeValue);
//显示这个元素的文本
}
</script>
</head>
<body>
<p>hi</p>
<p>hello</p>
<script language="javascript">
test();
</script>
</body>
</html>
4. appendChild(node)
向当前的元素(应该叫对象比较恰当)追加节点。
<html>
<body>
<head>
</head>
<div id="test"></div>
<script type="text/javascript">
varnewdiv=document.createElement("div")
varnewtext=document.createTextNode("A newdiv")
newdiv.appendChild(newtext)
document.getElementById("test").appendChild(newdiv)
</script>
</body>
</html>
刚才我在第一个例子中为了显示出内容,用了innerHTML,刚才看到文章才得知innerHTMl不属于DOM。
5. removeChild(childreference)
删除当前节点的子节点,返回被删除的节点。
这个被删除的节点可以被插入到别的地方
<html>
<body>
<div id="parent"><div id="child">Achild</div></div>
<script language="javascript">
varchildnode=document.getElementById("child")
varremovednode=document.getElementById("parent").removeChild(childnode)
</script>
</body>
</html>
6. cloneNode(deepBoolean)
复制并返回当前节点的复制节点,复制节点是一个孤立节点,它复制了原节点的属性,在把这个新节点加入到document前,根据需要修改ID属性确保其ID的唯一。
这个方法支持一个布尔参数,当deepBoolean设置true时,复制当前节点的所有子节点,包括该节点内的文本。
<html>
<body>
<p id="mynode">test</p>
<script language="javascript">
p=document.getElementById("mynode")
pclone =p.cloneNode(true);
p.parentNode.appendChild(pclone);
</script>
</body>
</html>
7. replaceChild(newChild, oldChild)
把当前节点的一个子节点换成另一个节点
<html>
<body>
<div id="mynode2">
<span id="orispan">span</span>
</div>
<script language="javascript">
var orinode=document.getElementById("orispan");
var newnode=document.createElement("p");
var text=document.createTextNode("test ppp ");
newnode.appendChild(text);
document.getElementById("mynode2").replaceChild(newnode,orinode);
</script>
</body>
</html>
javaScript操作DOM 建立 增加 删除 克隆 访问节点示例:
1. getElementById(id) 这是通过id来访问某一元素,最常用的之一,例: <html> <body> <div id="myid"> test </div> <script language="javascript"> alert(document.getElementById("myid").innerHTML); </script> </body> </html> 注意点:如果元素的ID不是唯一,则会取得第一个该ID名称的元素 2. getElementsByName(name) 这是通过name来取得某一堆元素(作为数组),看 Element后面有个小s就知道了,ID是HTML文档中要求唯一的,name可以不是唯一,如checkbox、radio等地方会用到多个 input用同一个name来识别是否为同党。对了,getElementsByName(name)仅用于取得input、radio、 checkbox等元素,如<input name="myradio" type="radio" /> 3. getElementsByTagName(tagname) 看这方法就知道这也是取得某一堆元素(作为数组),是通过TagName也就是标签名来取得。你可以遍历这个数组获得每一个单独的元素。当一个DOM结构很大时,可以通过它来有效地缩小搜查范围。 <html> <head> <script> function test() { testall=document.getElementsByTagName("body"); testbody=testall.item(0); //获得所有tagName是body的元素(当然每个页面只有一个) testall=testbody.getElementsByTagName("p");// 获得body子元素种的所有P元素 testnode=testall.item(1); // 获得第二个P元素 alert(testnode.firstChild.nodeValue); //显示这个元素的文本 } </script> </head> <body> <p>hi</p> <p>hello</p> <script language="javascript"> test(); </script> </body> </html> 4. appendChild(node) <html> <body> <head> </head> <div id="test"></div> <script type="text/javascript"> var newdiv=document.createElement("div") var newtext=document.createTextNode("A new div") newdiv.appendChild(newtext) document.getElementById("test").appendChild(newdiv) </script> </body> </html> 刚才我在第一个例子中为了显示出内容,用了innerHTML,刚才看到文章才得知innerHTMl不属于DOM。 5. removeChild(childreference) 删除当前节点的子节点,返回被删除的节点。 <html> <body> <div id="parent"><div id="child">A child</div></div> <script language="javascript"> var childnode=document.getElementById("child") var removednode=document.getElementById("parent").removeChild(childnode) </script> </body> </html> 6. cloneNode(deepBoolean) 复制并返回当前节点的复制节点,复制节点是一个孤立节点,它复制了原节点的属性,在把这个新节点加入到document前,根据需要修改ID属性确保其ID的唯一。 这个方法支持一个布尔参数,当deepBoolean设置true时,复制当前节点的所有子节点,包括该节点内的文本。 <html> <body> <p id="mynode">test</p> <script language="javascript"> p=document.getElementById("mynode") pclone = p.cloneNode(true); p.parentNode.appendChild(pclone); </script> </body> </html> 7. replaceChild(newChild, oldChild) 把当前节点的一个子节点换成另一个节点 <html> <body> <div id="mynode2"> <span id="orispan">span</span> </div> <script language="javascript"> var orinode=document.getElementById("orispan"); var newnode=document.createElement("p"); var text=document.createTextNode("test ppp "); newnode.appendChild(text); document.getElementById("mynode2").replaceChild(newnode, orinode); </script> </body> </html> |
JavaScript的DOM操作(节点操作)的更多相关文章
- JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...
- JavaScript之DOM创建节点
上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...
- JavaScript HTML DOM元素节点常用操作接口
在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...
- JavaScript 关于DOM的事件操作
一.JavaScript的组成 JavaScript基础分为三个部分: ECMAscript:JavaScript的标准语法.包括变量,表达式,运算符,函数,if语句,for语句等. DOM:文档对象 ...
- DOM之节点操作
DOM提供了很多实用的API,这些API让我们可以轻松的访问HTML文档.所谓API(应用程序接口),简单来说,就是让我们可以直接使用它访问程序的一些属性或方法,而不用了解程序内部的运作过程和原理. ...
- dom的节点操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
- JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
- js 节点 document html css 表单节点操作
js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...
随机推荐
- Django模型中OneToOneField和ForeignKey的区别
网上看到一篇讲解"Django模型中OneToOneField和ForeignKey区别" 的文章,浅显易懂; 可以把ForeignKey形象的类比为: ForeignKey是on ...
- element-ui tree组件 return span 标签报错
原因: webpack无法解析vue-jsx的语法问题 解决方案 (1).安装依赖 [babel-plugin-transform-vue-jsx][1] npm install\ babel-plu ...
- server.xml; lineNumber: 44; columnNumber: 95; 对实体 "characterEncoding" 的引用必须以 ';' 分隔符结尾。
url="jdbc:mysql://192.169.1.201:3306/raker?useUnicode=true&characterEncoding=UTF-8&zero ...
- Eclipse运行错误:Failed to load the JNI shared library的解决办法
出现上述错误的原因是环境变量配置出问题,查看JAVA_HOME这一环境变量的值是否正确. 操作步骤如下, 1.右键“我的电脑”->属性 ↓ 2.打开“高级系统设置”,如下图: ↓ 3.选择“环境 ...
- Python编程-绑定方法、软件开发
一.绑定方法与非绑定方法 1.绑定方法 绑定给谁,谁来调用就自动将它本身当作第一个参数传入 (1)绑定到类的方法:用classmethod装饰器装饰的方法. 为类量身定制 类.boud_method( ...
- HDU 4783 Clumsy Algorithm
题意不提. 我们可以发现,可以将最终序列分为对于第i个位置i-pi>=0与i-pi<0种两个子序列.且如果f[n]==g[n],则有两个子序列都递增. 原因是f[n]表示1-n这个排列的逆 ...
- Android系统--Binder系统具体框架分析(一)
Binder系统具体框架分析(一) 一.Binder系统核心框架 1. IPC:Inter-Process Communication, 进程间通信 A进程将数据原原本本发送B进程,主要负责进程间数据 ...
- 《Inode与Block重要知识总结核心讲解》【转】
本文转载自:https://blog.csdn.net/BlackEnn/article/details/50787092 1.查看/dev/sda1下磁盘分区的block大小: 2.查看单个inod ...
- Golang html encoding解析
自动解析html页面的编码格式: 需要依赖 golang.org/x/text 和 golang.org/x/net 这两个外部库 package main import ( "net/ht ...
- RDLC 微软报表 导出Excel时产生多个工作表 (worksheet)
. I have added two obejcts data source to Report Viewer. 2. in RDLC i have created two tables and in ...