1.替换元素节点
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
语法：
node.replaceChild (newnode,oldnew )
参数：
newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。
注意:
1. 当 oldnode 被替换时，所有与之相关的属性内容都将被移除。
2. newnode 必须先被建立。
将oldnode中的字改为斜体：
function replaceMessage(){
var newnode=document_createElement("i");
}
创建元素节点createElement
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法：
document_createElement(tagName)
参数:
tagName：字符串值，这个字符串用来指明创建元素的类型。
注意：要与a() 或 insertBefore()方法联合使用，将元素显示在页面中。
实现在HTML文档中创建一个链接，并设置相应属性：
var main = document.body;//创建链接
function createa(url,text)
{
var a = document_createElement("a");
a.href="url";
a.innerHTML="慕课网";
main.a(a);
}
createa("http://www.imooc.com","慕课网");
创建文本节点createTextNode
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
语法：
document_createTextNode(data)
参数：
data : 字符串值，可规定此节点的文本。
创建一个P标签，设置className属性，使用createTextNode创建文本节点"I loveJavaScript!"：
var mydiv = document_createElement("p");
mydiv.className="message";
var textNode=document_createTextNode("I loveJavaScript!");
mydiv.a(textNode);
document.body.a(mydiv);
.message{
width:200px;
height:100px;
background-color:#CCC;}
浏览器窗口可视区域大小
获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:
一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：
•
•
二、对于 Internet Explorer 8、7、6、5：
•
•
或者
Document对象的body属性对应HTML文档的标签
•
•
在不同浏览器都实用的 JavaScript 方案：
var w= document.documentElement.clientWidth
var h= document.documentElement.clientHeight
网页尺寸scrollHeight
scrollHeight和scrollWidth，获取网页内容高度和宽度。
一、针对IE、Opera:
scrollHeight 是网页内容实际高度，可以小于 clientHeight。
二、针对NS、FF:
scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于clientHeight 时，scrollHeight 返回 clientHeight 。
三、浏览器兼容性
var w=document.documentElement.scrollWidth
var h=document.documentElement.scrollHeight
注意:区分大小写
scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。
网页尺寸offsetHeight
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
一、值
offsetHeight = clientHeight + 滚动条 + 边框。
二、浏览器兼容性
var w= document.documentElement.offsetWidth
var h= document.documentElement.offsetHeight
网页卷去的距离与偏移量
我们先来看看下面的图：
scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。
scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。
offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。
offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。
注意:
1. 区分大小写
2.offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。
编程练习：
<!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 Highlight(){
var trs = document.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";
}
}
}
function addOne(){
var tbody = document.getElementById('table').lastChild;
var tr = document.createElement('tr');
var td = document.createElement("td");
tr.appendChild(td);
td = document.createElement("td");
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML = "<a href='javascript:;' οnclick='deleteRow(this)'>删除</a>";
tr.appendChild(td);
tbody.appendChild(tr);
Highlight();
}
function deleteRow(obj){
var oG=obj.parentNode.parentNode.parentNode;
var oP=obj.parentNode.parentNode;
oG.removeChild(oP);
}
</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:;" οnclick="deleteRow(this)">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" οnclick="addOne()"/> <!--在添加按钮上添加点击事件 -->
</body>
</html>
选项卡转换代码：
<html>
<style>
* {
padding: 0px;
margin: 0px;
font-size: 12px;
font-family: "Microsoft YaHei UI";
}
#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 #aaaaaa;
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>
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; i < oLis.length; i++) {
oLis[i].index = i;
oLis[i].onclick = function () {
for (var n = 0; n < oLis.length; n++) {
oLis[n].className = "";
oDivs[n].className = "hide";
}
this.className = "on";
oDivs[this.index].className = "";
}
}
}
</script>
<body>
<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>
1461
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
