在这说说 JS 的 DOM 对象，控制 HTML 元素
<!-- 带有指定名称的节点对象的集合 --> document.getElementsByName(name); <!-- 返回带有指定标签名的节点对象的集合 --> <!-- 返回元素的顺序是它们在文档中的顺序 --> document.getElementsByTagName(tagname); <!-- 区别getElementByID, getElementsByName, getElementsByTagName --> <!-- ID是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人 --> <!-- Name是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合 --> <!-- TagName可看似某类，getElementsByTagName获取相同类的人集合, eg: getElementsByTagName("小孩") --> <!-- 通过元素节点的属性名称获取属性的值 --> elementNode.getAttribute(name); <!-- 增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值 --> elementNode.setAttribute(name,value); <!-- 节点属性 --> <!-- nodeName属性: 节点的名称，是只读的 --> <!-- 1. 元素节点的 nodeName 与标签名相同 --> <!-- 2. 属性节点的 nodeName 是属性的名称 --> <!-- 3. 文本节点的 nodeName 永远是 #text --> <!-- 4. 文档节点的 nodeName 永远是 #document --> <!-- nodeValue 属性：节点的值 --> <!-- 1. 元素节点的 nodeValue 是 undefined 或 null --> <!-- 2. 文本节点的 nodeValue 是文本自身 --> <!-- 3. 属性节点的 nodeValue 是属性的值 --> <!-- nodeType 属性: 节点的类型，是只读的 --> <!-- 元素类型 节点类型 --> <!-- 元素 1 --> <!-- 属性 2 --> <!-- 文本 3 --> <!-- 注释 8 --> <!-- 文档 9 --> <!-- 选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组 --> <!-- 节点间的空白符有些浏览器也会算 --> elementNode.childNodes <!-- 访问子节点的第一项 --> node.firstChild; 与 elementNode.childNodes[0]; 效果相同 <!-- 访问子节点的最后一项 --> node.lastChild； 与 elementNode.childNodes[elementNode.childNodes.length-1]; 效果相同 <!-- 获取指定节点的父节点 --> elementNode.parentNode; <!-- 返回某个节点之后紧跟的节点（处于同一树层级中） --> nodeObject.nextSibling; <!-- 返回某个节点之前紧跟的节点（处于同一树层级中） --> nodeObject.previousSibling; <!-- 指定节点的最后一个子节点列表之后添加一个新的子节点 --> nodeObject.appendChind(newnode); <!-- 已有的子节点前插入一个新的子节点 --> nodeObject.insertBefore(newnode,node); <!-- 从子节点列表中删除某个节点 --> <!-- 删除成功，此方法可返回被删除的节点，如失败，则返回 NULL --> <!-- 把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作 --> nodeObject.removeChild(node); <!-- 实现子节点(对象)的替换。返回被替换对象的引用 --> <!-- newnode必须先被建立 --> node.replaceChild (newnode,oldnew ); <!-- 创建元素节点。此方法可返回一个 Element 对象 --> document.createElement(tagName); <!-- 通过setAttribute 来设置属性或者.name设置 --> eg： input.type = "button"; btn.setAttribute("name", "q"); <!-- 创建新的文本节点，返回新创建的 Text 节点 --> document.createTextNode(data); <!-- 获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条） --> <!-- 在不同浏览器都实用的 JavaScript 方案 --> var w= document.documentElement.clientWidth || document.body.clientWidth; var h= document.documentElement.clientHeight || document.body.clientHeight; <!-- 获取网页内容高度和宽度 --> <!-- 在不同浏览器都实用的 JavaScript 方案 --> var w=document.documentElement.scrollWidth || document.body.scrollWidth; var h=document.documentElement.scrollHeight || document.body.scrollHeight; <!-- 获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变) --> <!-- 在不同浏览器都实用的 JavaScript 方案 --> var w= document.documentElement.offsetWidth || document.body.offsetWidth; var h= document.documentElement.offsetHeight || document.body.offsetHeight; <!-- 网页卷去的距离与偏移量 --> <!-- scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。--> <!-- scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。--> <!-- offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。--> <!-- offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。--> <!-- offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。--> <!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> function req(){ var div = document.getElementById("div1"); document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距离屏幕顶部的距离 document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距离屏幕左部的距离 document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1纵向滚动条滚动的距离 document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1横向滚动条滚动的距离 } </script> </head> <body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px"> <div style="60%;border-right:1px dashed red;float:left;"> <div style="float:left;"> <div id="div1" style="border:5px red solid;height:300px;200px;overflow:auto"> <div style="height:500px;400px">请调整横竖滚动条后，点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。 </div> </div> <input type="button" value="点击我!" onclick="req()" style="border: 1px solid purple;height: 25px;"/> </div> </div> <div style="30%;float:left;"> <ul style="list-style-type: none; line-height:30px;">结果： <li>offsetTop : <span id="li1"></span></li> <li>offsetLeft : <span id="li2"></span></li> <li> scrollTop : <span id="li3"></span></li> <li>scrollLeft : <span id="li4"></span></li> </ul> </div> <div style="clear:both;"></div> </body> </html> <!-- 编程练习 --> <!DOCTYPE html> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> <script type="text/javascript"> window.onload = function(){ // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。 Highlight(); } // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点； function addOne(obj){ var tbody = document.getElementById('table').lastChild; var tr = document.createElement('tr'); var td = document.createElement("td"); td.innerHTML = "<input type='text'/>"; tr.appendChild(td); td = document.createElement("td"); td.innerHTML = "<input type='text'/>"; tr.appendChild(td); td = document.createElement("td"); td.innerHTML = "<a href='javascript:;' onclick='deleteRow(this)'>删除</a>"; tr.appendChild(td); tbody.appendChild(tr); Highlight(); } // 创建删除函数 function deleteRow(obj){ var tbody = document.getElementById('table').lastChild; var tr = obj.parentNode.parentNode; tbody.removeChild(tr); } function Highlight(){ var tbody = document.getElementById('table').lastChild; trs = tbody.getElementsByTagName('tr'); for(var i =1;i<trs.length;i++){ trs[i].onmouseover = function(){ this.style.backgroundColor ="#f2f2f2"; } trs[i].onmouseout = function(){ this.style.backgroundColor ="#fff"; } } } </script> </head> <body> <table border="1" width="50%" id="table"> <tr> <th>学号</th> <th>姓名</th> <th>操作</th> </tr> <tr> <td>xh001</td> <td>王小明</td> <td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td> </tr> <tr> <td>xh002</td> <td>刘小芳</td> <td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td> </tr> </table> <input type="button" value="添加一行" onclick="addOne()" /> </body> </html> <!-- 编程挑战 --> <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> /* CSS样式制作 */ *{ padding:0px; margin:0px; font:12px normal "microsoft yahei"; } #tabs{ width:290px; padding:5px; height:150px; margin:20px; } #tabs ul{ list-style:none; display:block; height:30px; line-height:30px; border-bottom:2px saddlebrown solid; } #tabs ul li{ background:#fff; cursor:pointer; float:left; list-style:none; height:28px; line-height:28px; margin:0px 3px; border:1px solid #aaa; border-bottom:none; display:inline-block; width:60px; text-align:center; } #tabs ul li.on{ border-top:2px solid saddlebrown; border-bottom:2px solid #fff; } #tabs div{ height:120px; line-height:25px; border:1px solid:#336699; border-top:none; padding:5px; } .hide{ display:none; } </style> <script type="text/javascript"> // JS实现选项卡切换 window.onload=function(){ var oTab=document.getElementById("tabs"); var oUl=oTab.getElementsByTagName("ul")[0]; var oLis=oUl.getElementsByTagName("li"); var oDivs=oTab.getElementsByTagName("div"); for(var i=0,len=oLis.length;i<len;i++){ oLis[i].index=i; oLis[i].onclick=function(){ for(var n=0;n<len;n++){ oLis[n].className=""; oDivs[n].className="hide"; } this.className="on"; oDivs[this.index].className=""; } } } </script> </head> <body> <!-- HTML页面布局 --> <div id="tabs"> <ul> <li class="on">房产</li> <li>家居</li> <li>二手房</li> </ul> <div> 275万购昌平邻铁三居 总价20万买一居<br> 200万内购五环三居 140万安家东三环<br> 北京首现零首付楼盘 53万购东5环50平<br> 京楼盘直降5000 中信府 公园楼王现房<br> </div> <div class="hide"> 40平出租屋大改造 美少女的混搭小窝<br> 经典清新简欧爱家 90平老房焕发新生<br> 新中式的酷色温情 66平撞色活泼家居<br> 瓷砖就像选好老婆 卫生间烟道的设计<br> </div> <div class="hide"> 通州豪华3居260万 二环稀缺2居250w甩<br> 西3环通透2居290万 130万2居限量抢购<br> 黄城根小学学区仅260万 121平70万抛!<br> 独家别墅280万 苏州桥2居优惠价248万<br> </div> </div> </body> </html>