`
javababy1
  • 浏览: 1219964 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

温习javascript DOM编程

 
阅读更多
Code:
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>复习Dom操作</title>
  5. <styletype="text/css">
  6. #newTest
  7. {
  8. color:Red;
  9. }
  10. </style>
  11. <scriptsrc="Scripts/jquery-1.4.1-vsdoc.js"type="text/javascript"></script>
  12. <scripttype="text/javascript">
  13. ////jQuery写法--页面加载完成
  14. //$(document).ready(function(){
  16. //});
  17. ////可以简写成
  18. //$(function(){
  19. //
  20. //});
  21. //标准js中的写法--页面加载完成
  22. window.onload=function(){
  24. varroot=document.documentElement;//DOM根节点--文档节点
  25. varfarDIV=document.getElementById("farther");//根据ID获得DOM的“元素节点”
  26. //元素节点的一些常用的属性
  27. //document.getElementsByTagName("")//根据元素(标签)名称获得DOM的“元素节点”(可能是单个或一组)
  28. //document.getElementsByName("")//根据name属性获得DOM的“元素节点”(可能是单个或一组)
  29. varidNode=farDIV.getAttributeNode("id");//获得属性为id的“属性节点”
  30. //注意：不要把getAttribute("id")和getAttributeNode("id")搞混了，前者获取的是属性的值，后者获取的属性节点
  31. vartextNode=farDIV.firstChild;//farDIV的第一个子节点
  33. //DOM中常用的属性
  34. //属性（其实只在属性节点中定义才有效）
  35. //farDIV.attributes;//返回该节点的所有属性对象的数组
  36. //节点名称
  37. //alert(root.nodeName+":"+farDIV.nodeName+":"+idNode.nodeName+":"+textNode.nodeName);
  38. //nodeType(不支持IE)有五种，分别代表：标签(元素)节点，属性节点，文本节点，根节点，注释节点
  39. //alert(root.nodeType+":"+farDIV.nodeType+":"+idNode.nodeType+":"+textNode.nodeType);
  40. //节点值
  41. //alert(root.nodeValue+":"+root.nodeValue+":"+idNode.value+":"+textNode.nodeValue);
  43. //根节点的一些常用属性--创建新节点
  44. varnewNode=document.createElement("div");//创建一个div节点
  45. vartext=document.createTextNode("这是我手动创建的");//创建一个文本节点
  46. newNode.appendChild(text);//将文本节点插入div节点中
  47. varattrNode=document.createAttribute("id");//创建属性节点，属性名为“id”
  48. newNode.setAttributeNode(attrNode);//将newNode节点的属性节点设置为attrNode
  49. newNode.setAttribute("id","newTest");//设置newNode节点的id属性设置为newTest
  50. //varcomment=document.createComment("我是注释");//创建注释节点
  52. //获取页面中的body标签所在节点
  53. varbody=root.lastChild;//获取root的最后一个子节点
  54. body.appendChild(newNode);//将新建的节点插入body中
  55. //如果添加成功，则CSS会生效（字体变红，ID选择器有效）
  57. //获取元素的属性alert(farDIV.id);alert(farDIV.getAttribute("id"));
  58. alert(newNode.getAttribute("id"));//HTML中获取节点的属性--在XHTML中的可以简写：alert(newNode.id);//
  60. //动态的创建表格
  61. //1.可以使用与上面类似的方式，创建节点、拼接、插入...但是这样操作似乎很麻烦
  62. //2.可以使用更加简单的操作方式
  65. };
  66. </script>
  67. </head>
  68. <body>
  69. <divid="farther">我是父div</div>
  70. </body>
  71. </html>

分享到：
| 温习javascript面向对象
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics