当前位置:首页 > js dom操作选择器,dom操作复习

js dom操作选择器,dom操作复习

发布于 2018-06-07 阅读 326 次 Javascript
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. div{padding:20px;}
  8. @-webkit-keyframes start1 {
  9. 0%,30% {opacity: 0;-webkit-transform: translate(0,8px);}
  10. 60% {opacity: 1;-webkit-transform: translate(0,0);}
  11. 100% {opacity: 0;-webkit-transform: translate(0,-10px);}
  12. }
  13. </style>
  14. </head>
  15. <body style="overflow:hidden;">
  16. <div>
  17. <p>11111</p>
  18. <p id='n'>2222222</p>
  19. <p>3333333</p>
  20. </div>
  21. <form id="f">
  22. <input name="aaa" type="radio" value="111">111
  23. <input name="aaa" type="radio" value="222">222
  24. <input name="aaa" type="radio" value="333">333
  25. <div>
  26. 不是直接子元素
  27. <p>不是直接子元素</p>
  28. </div>
  29. </form>
  30. <div id="father">
  31. <p>第一个元素是我吗???</p>
  32. <p>第一个元素是我吗???</p>
  33. <p>最后一个元素是我吗???</p>
  34. </div>
  35. <script>
  36. /* 值得注意的是nodelist并不是一个真正意义上的数组,他是一个类数组对象
  37. 类数组对象和数组类似,但实际上他依然是一个对象,可以通过(typeof nodelist !="object" && nodelist.constructor == Array)来判断。
  38. 只是把平时我们习惯用的键改成数组命名,并添加一个length属性,如下所示:
  39. {
  40. "1":123,
  41. "2":234,
  42. length:2
  43. }
  44. */
  45. // 根据id获取node,这个在ie7下会获取到name等于n的元素可以通过getAttributeNode('id').value进行判断
  46. var oid = document.getElementById('n');
  47. console.log("id获取",oid)
  48. // 根据tagname获取nodes得到的是一个nodelist
  49. var nodes = document.getElementsByTagName('p');
  50. console.log("根据tagname获取",nodes)
  51. // getElementByName 根据name属性选择,返回nodelist
  52. var nodes1 = document.getElementsByName('aaa');
  53. console.log("根据name属性选择,返回nodelist:",nodes1);
  54. // 根据css选择器获取nodes得到的是一个node ie8+
  55. var dom = document.querySelector("body [name='aaa']");
  56. console.log("querySelector选择:",dom)
  57. // 根据css选择器获取nodes得到的是一个nodelist ie8+
  58. var doms = document.querySelectorAll("input");
  59. console.log("querySelectorAll选择:",doms)
  60. // 获取子节点得到的子节点包含空文本节点,需要通过判断nodeType进行过滤 或者用elements
  61. var childNodes = document.getElementsByTagName('body')[0].childNodes;
  62. console.log("获取的子节点:",childNodes);
  63. // 获取所有子元素 不包含文本节点
  64. var childNodes2 = document.getElementById("f").elements;
  65. console.log("elements获取的子节点:",childNodes2);
  66. // 返回首个非文本节点子节点(注意换行回作为一个空白textNode)
  67. function getFirstChild(node){
  68. var first = node.firstChild;
  69. console.log(first)
  70. while(first.nodeType!=1){
  71. first = first.nextSibling;
  72. }
  73. return first;
  74. }
  75. var ofirst = getFirstChild(document.getElementById('father'));
  76. console.log("获取第一个子元素:",ofirst);
  77. // 返回末尾非文本节点子节点(注意换行回作为一个空白textNode)
  78. function getLastChild(node){
  79. var last = node.lastChild;
  80. console.log(last)
  81. while(last.nodeType!=1){
  82. last = last.previousSibling;
  83. }
  84. return last;
  85. }
  86. var olast = getLastChild(document.getElementById('father'));
  87. console.log("获取最后一个子元素:",olast);
  88. // 获取前一个元素
  89. function getPreviousNode(node){
  90. while(node.previousSibling.nodeType != 1){
  91. node = node.previousSibling;
  92. }
  93. return node.previousSibling;
  94. }
  95. var oN = document.getElementById('n');
  96. console.log(getPreviousNode(oN))
  97. console.log(document.getElementById("f").elements[0].value)
  98. console.log(document.getElementById("f").elements[2].value)
  99. // 获取后一个元素
  100. function getNextNode(node){
  101. while(node.nextSibling.nodeType != 1){
  102. node = node.nextSibling;
  103. }
  104. return node.nextSibling;
  105. }
  106. // 创建元素追加到父元素里
  107. var newList = document.createElement('ul');
  108. for(var i=0;i<5;i++){
  109. var txt = document.createTextNode(i+'创建元素追加到父元素里');
  110. var list = document.createElement('li');
  111. list.appendChild(txt);
  112. newList.appendChild(list);
  113. }
  114. document.getElementById("father").appendChild(newList);
  115. </script>
  116. </body>
  117. </html>
  118. 未完待续。。。