<JavaScript><DOM> 十二. HTML DOM的属性和方法-CSDN博客

  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>