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>