1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <style type="text/css">
6
7 .news {
8 width: 400px;
9 height: 300px;
10 margin: 10px auto;
11 padding: 20px;
12 border: 1px solid #444;
13 overflow: auto;
14 }
15
16 </style>
17 <script type="text/javascript">
18
19 /*
20 HTML DOM 提供了通过id直接找节点的方法
21 每一个HTML标记都是一个元素对象
22 元素对象的属性和标记的属性一一对应
23 */
24
25 window.onload = function () {
26
27 // ------------------------ 方法 -----------------------
28 /*
29 1. getElementById(id) 通过id查找元素对象
30 */
31 // 获取img元素对象
32 var imgObj = document.getElementById("img01");
33
34 // img标记的属性
35 imgObj.width = 100;
36 imgObj.border = 2;
37 imgObj.style = "cursor:pointer;"
38 imgObj.title = "I love you!";
39
40 // 核心DOM的属性
41 // imgObj.parentNode.bgColor = "#ff0000";
42
43 /*
44 2. getElementsByTagNmae(tagName) 通过标记名查找元素对象
45 */
46
47 // 获取ul元素对象
48 var ulObj = document.getElementById("ul01");
49
50 // 获取li元素对象的数组
51 var arrObj = ulObj.getElementsByTagName("li")
52
53 // 设置li的CSS样式
54 for (var i = 0; i < arrObj.length; i++) {
55 arrObj[i].style = "color:blue; font-size:24px;";
56 }
57 }
58
59 // ------------------------ 属性 -----------------------
60 /*
61 每个标记有三大类属性: 核心DOM的属性和方法, 标记的属性, 元素对象的属性
62
63 元素对象的属性
64 tagName: 标签名称, 与核心DOM中的nodeName一样
65 className: CSS的样式
66 id: 同标记的id属性一样
67 title: 同标记的title属性一样
68 style: 同标记的style属性一样
69 innerHTML: HTML标记中的所有内容, 包括HTML标记
70 */
71 function add2() {
72
73 // 获取div元素
74 var divObj = document.getElementById("news");
75
76 // 添加类样式
77 divObj.className = "news";
78 }
79
80 function copy2() {
81
82 // 获取news的div元素
83 var newsDiv = document.getElementById("news");
84
85 // 获取article的div元素
86 var articleDiv = document.getElementById("article");
87
88 // 添加类样式
89 article.className = newsDiv.className;
90
91 // 复制
92 articleDiv.innerHTML = newsDiv.innerHTML;
93 }
94
95 /*
96 元素对象的属性:
97 offsetWidth: 元素对象的可见宽度
98 offsetHeight: 元素对象的可见高度
99 scrollWidth: 元素对象的总宽度
100 scrollHeight: 元素对象的总高度
101 scrollTop: 内容向上滚动的距离
102 scrollLeft: 内容向左滚动的距离
103 */
104 function show() {
105
106 // id为news的div标记
107 var newsDiv = document.getElementById("news");
108
109 // id为result的div标记
110 var resultDiv = document.getElementById("result");
111
112 // result的div标记的内容
113 var str = "可见宽度: " + newsDiv.offsetWidth + ", 可见高度: " + newsDiv.offsetHeight;
114 str += "<br>总宽度: " + newsDiv.scrollWidth + ", 总高度: " + newsDiv.scrollHeight;
115 str += "<br>滚动的距离: " + newsDiv.scrollTop;
116 resultDiv.innerHTML = str;
117
118 }
119
120 </script>
121 </head>
122 <body>
123 <!-- getElementById() -->
124 <img id="img01" src="images/001.jpg" />
125
126 <!-- getElementsByTagName() -->
127 <ul id = "ul01">
128 <li>HTML超文本标记语言</li>
129 <li>CSS层叠样式表</li>
130 <li>JavaScript客户端脚本</li>
131 </ul>
132
133 <!-- 元素对象的属性 -->
134 <div id="news" onscroll="show()">
135 <h2>点名叫板Faker Pawn：紧张起来吧</h2>
136 <p>
137 PawN：（腰伤）训练没有障碍，也没有减少练习量，rank时排队等的时候主要是站着的（经常被拿来与Faker比较），两年期间我的成绩并不好也是没有办法 如果我这次成绩好了应该会被重新评价吧。
To Faker：两年不见我又回来了 紧张起来吧
138 对于此事，网友纷纷留言,Faker瑟瑟发抖了！：
139 Pawn的实力，大家是有目共睹的，但是就木木看来，Pawn目前确实是仍有资格碰撞Faker，但经历过两届世界赛的洗礼，Faker应该更为强大一点。
140 所以综合能力来说的话，应该有46开（Faker6），你认同吗？
141 PawN：（腰伤）训练没有障碍，也没有减少练习量，rank时排队等的时候主要是站着的（经常被拿来与Faker比较），两年期间我的成绩并不好也是没有办法 如果我这次成绩好了应该会被重新评价吧。
To Faker：两年不见我又回来了 紧张起来吧
142 对于此事，网友纷纷留言,Faker瑟瑟发抖了！：
143 Pawn的实力，大家是有目共睹的，但是就木木看来，Pawn目前确实是仍有资格碰撞Faker，但经历过两届世界赛的洗礼，Faker应该更为强大一点。
144 所以综合能力来说的话，应该有46开（Faker6），你认同吗？
145 </p>
146 </div>
147
148 <div id="article"></div>
149 <div id="result"></div>
150
151 <input type="button" value="添加类样式" onclick="add2()">
152 <input type="button" value="复制内容" onclick="copy2()">
153
154 </body>
155 </html>
