`
- 浏览:
1895529 次
- 性别:
- 来自:
北京
-
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<htmlxmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<title>复习Dom操作</title>
-
<styletype="text/css">
- #newTest
- {
- color:Red;
- }
-
</style>
-
<scriptsrc="Scripts/jquery-1.4.1-vsdoc.js"type="text/javascript"></script>
-
<scripttype="text/javascript">
- ////jQuery写法--页面加载完成
- //$(document).ready(function(){
- //});
- ////可以简写成
- //$(function(){
- //
- //});
- //标准js中的写法--页面加载完成
-
window.onload=function(){
-
varroot=document.documentElement;//DOM根节点--文档节点
-
varfarDIV=document.getElementById("farther");//根据ID获得DOM的“元素节点”
- //元素节点的一些常用的属性
- //document.getElementsByTagName("")//根据元素(标签)名称获得DOM的“元素节点”(可能是单个或一组)
- //document.getElementsByName("")//根据name属性获得DOM的“元素节点”(可能是单个或一组)
-
varidNode=farDIV.getAttributeNode("id");//获得属性为id的“属性节点”
- //注意:不要把getAttribute("id")和getAttributeNode("id")搞混了,前者获取的是属性的值,后者获取的属性节点
-
vartextNode=farDIV.firstChild;//farDIV的第一个子节点
- //DOM中常用的属性
- //属性(其实只在属性节点中定义才有效)
- //farDIV.attributes;//返回该节点的所有属性对象的数组
- //节点名称
- //alert(root.nodeName+":"+farDIV.nodeName+":"+idNode.nodeName+":"+textNode.nodeName);
- //nodeType(不支持IE)有五种,分别代表:标签(元素)节点,属性节点,文本节点,根节点,注释节点
- //alert(root.nodeType+":"+farDIV.nodeType+":"+idNode.nodeType+":"+textNode.nodeType);
- //节点值
- //alert(root.nodeValue+":"+root.nodeValue+":"+idNode.value+":"+textNode.nodeValue);
- //根节点的一些常用属性--创建新节点
-
varnewNode=document.createElement("div");//创建一个div节点
-
vartext=document.createTextNode("这是我手动创建的");//创建一个文本节点
- newNode.appendChild(text);//将文本节点插入div节点中
-
varattrNode=document.createAttribute("id");//创建属性节点,属性名为“id”
- newNode.setAttributeNode(attrNode);//将newNode节点的属性节点设置为attrNode
- newNode.setAttribute("id","newTest");//设置newNode节点的id属性设置为newTest
-
//varcomment=document.createComment("我是注释");//创建注释节点
- //获取页面中的body标签所在节点
-
varbody=root.lastChild;//获取root的最后一个子节点
- body.appendChild(newNode);//将新建的节点插入body中
- //如果添加成功,则CSS会生效(字体变红,ID选择器有效)
- //获取元素的属性alert(farDIV.id);alert(farDIV.getAttribute("id"));
- alert(newNode.getAttribute("id"));//HTML中获取节点的属性--在XHTML中的可以简写:alert(newNode.id);//
- //动态的创建表格
- //1.可以使用与上面类似的方式,创建节点、拼接、插入...但是这样操作似乎很麻烦
- //2.可以使用更加简单的操作方式
- };
-
</script>
-
</head>
-
<body>
-
<divid="farther">我是父div</div>
-
</body>
-
</html>
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
温习Javascript基础语法之词法结构_.docx
javascript是一门简单的语言,也是一门复杂的语言。这篇文章主要介绍了温习Javascript基础语法之词法结构的相关资料,需要的朋友可以参考下
为了温习javascript和熟悉jquery;特此话费一天时间谢了一个出色的经典的射击游戏;无bug,中文详细注释,欢迎阅读解析,学到手才是赚到呗! 内含本人联系方式,欢迎一起开发讨论;
HKSI PAPER1香港证券期货从业考试温习手册卷一.pdf
PAPER1卷一温习手册V3.4版下载 PAPER1卷一温习手册V3.4版下载 PAPER1卷一温习手册V3.4版下载 PAPER1卷一温习手册V3.4版下载 PAPER1卷一温习手册V3.4版下载 PAPER1卷一温习手册V3.4版下载 PAPER1卷一温习手册V3.4版...
HKSI Paper 1 60个温习重点.pdf
PAPER7卷七温习手册V3.3版下载 PAPER7卷七温习手册V3.3版下载 PAPER7卷七温习手册V3.3版下载 PAPER7卷七温习手册V3.3版下载 PAPER7卷七温习手册V3.3版下载 PAPER7卷七温习手册V3.3版下载 PAPER7卷七温习手册V3.3版...
PAPER6卷六温习手册V2.6版下载 PAPER6卷六温习手册V2.6版下载 PAPER6卷六温习手册V2.6版下载 PAPER6卷六温习手册V2.6版下载 PAPER6卷六温习手册V2.6版下载 PAPER6卷六温习手册V2.6版下载 PAPER6卷六温习手册V2.6版...
名师温习专题总温习宇宙航行提高.docx
使用批处理可以完成很多系统操作,在dos系统盛行时为使用鼎盛时期!
消费者行为学温习资料消费者行为学期末整体温习资料.pdf
【浙江选考】2018年高考化学二轮专题温习综合训练七化学计算含答案.pdf【浙江选考】2018年高考化学二轮专题温习综合训练七化学计算含答案.pdf【浙江选考】2018年高考化学二轮专题温习综合训练七化学计算含答案.pdf...
消费者行为学温习资料消费者行为学期末整体温习资料页.pdf
回首温习青春.docx
小小说中考温习.ppt
它能让你方便简洁的写出漂亮的动画效果、实现各种视觉效果,轻松的处理JavaScript的DOM数以及Ajax的交互行为。它的优点在于轻量级、简单易学、易扩展、跨浏览器和网上拥有大量的jQuery插件使用。由于它这一大堆的...
最优化温习材料.pdf
常微分温习资料.docx