1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
7. <title>获取页面标签</title>
8. <style>
9. body{
10. width: 100%;
11. height: 100%;
12. background-color: beige;
13. }
14. </style>
15. </head>
16. <body>
17. <script>
18. // 获取body标签样式
19. // document.body.style.margin = '0px'
20. // document.body.style.height = '100%'
21. // document.body.style.border = '5px solid black'
22.
23. // 获取html标签并设置样式
24. // var html =document.getElementsByTagName('html')[0]
25. // html.style.height = '100%'
26.
27. // var a =document.documentElement
28. // documentElement 返回文档的根节点
29. // a.style.backgroundColor = 'red'
30.
31. document.title = '存款收益计算器'
32. // title 返回当前文档的标题
33.
34. var header =document.createElement('header')
35. header.innerText = '存款收益计算器'
36. header.style.height = '50px'
37. header.style.backgroundColor = '#f93'
38. header.style.color = 'white'
39. header.style.fontSize = '18px'
40. header.style.lineHeight = '50px'
41. header.style.textAlign = 'center'
42. document.body.appendChild(header)
43.
44. // console.log(document.all)
45. // 获取页面上所以元素标签
46. // 能把标签元素的树形结构变成线性结构
47. // 在循环处理时很方便 尽可能把 document.all 放在所以创建元素的代码之后
48. // 否则有些标签可能还没创建出来
49.
50. // 实现类似样式中的 *{box-sizing: border-box}
51. // for(var i = 0;i < document.all.length;i++){
52. // var ele = document.all[i]
53. // if(ele.tagName == 'SCRIPT')continue
54. // if(ele.tagName == 'HTML')continue
55. // if(ele.style){
56. // ele.style.boxSizing = 'border-box'
57. // }
58. // }
59.
60. // document.links
61. // 获取页面上所有link 即<link>
62. // document.images
63. // 获取页面上所有图片 即<img>
64. // document.forms
65. // 获取页面上所有表单 即<form>
66. // document.anchors
67. // 获取页面上的所有超链接 即<a>
68. // document.applets
69. // 获取嵌入到页面上的Java小程序 从来没有在互联网上广泛使用早已绝迹江湖
70. // document.embeds
71. // 嵌入到页面上的flash
72. // document.styleSheets
73. // 获取页面上的所有样式表
74. // document.scripts
75. // 获取页面上的所有脚本 即<script>
76. </script>
77. </body>
78. </html>