演示window中的其他对象
out.js（Code）代码：
//打印不换行
function print(param){
document.write(param);
}
//打印并换行
function println(param){
document.write(param+"</br>");
}
（Code）代码：
<script type="text/javascript" src="out.js"></script>
<!--为了演示方便，定义一个事件源。通过对事件源的触发，获取想要的结果。比如让用户通过点击按钮就可以知道浏览器的一些信息。
-->
<!--定义按钮 onclick事件的处理方式。-->
<script type="text/javascript">
//演示window对象中的navigator对象
function windowObjDemo(){
var name = navigator.appName;//浏览器名称
var version = navigator.appVersion;//浏览器版本
println(name+":"+version);
}
//演示window对象中的location对象
function windowObjDemo2(){
var pro = location.protocol;//浏览器协议消息头
var text = location.href;//浏览器超链接栏
//alert(text);
/*
给location的href属性设置一个值。
改变了地址栏的值，并对其值进行了解析如果是http，还进行连接访问。
*/
location.href = "http://edu.csdn.net/";
}
</script>
<!--定义事件源,注册事件关联的动作-->
<input type="button" value="演示window中的对象" οnclick="windowObjDemo2()" />
<!--演示window中的常见方法。-->
Code（代码）：
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
var timeid;
//准备抖动
function windowMethodDemo(){
//对话框，返回一个操作的boolean值。
var b = confirm("需要抖动请点击确定？");
if(b){
alert("3秒后开始抖动，请别吓到哦！亲");
timeid = setTimeout("windowMove()",3000);
}else{
alert("你没有点击抖动哦，请重新点一下。");
}
}
//暂停抖动
function stopTime(){
clearTimeout(timeid);
}
//抖动方法
function windowMove(){
//moveBy(10,10);
//moveTo(40,40);
for (var x = 0; x < 700; x++){
moveBy(20, 0);
moveBy(0, 20);
moveBy(-20,0);
moveBy(0,-20);
}
}
//打开新窗口
function windowOpen(){
open("http://edu.csdn.net/","_blank","status=no,toolbar=no,menubar=no,location=no");
timeid = setTimeout("close()",2000);
//clearTimeout(timeid);//如果清除TimeOut指令就用这个方法。
}
</script>
<input type="button" value="对话框" οnclick="windowMethodDemo()"/>
<input type="button" value="我不想抖了，停下来吧！" οnclick="stopTime()"/>
<input type="button" value="黑马程序员官网" οnclick="windowOpen()"/>
Window对象事件
Code（代码）：
<script type="text/javascript">
window.onload = function(){
alert("加载完");
}
window.onunload = function(){
alert("关闭后");
}
onbeforeunload = function(){
alert("关闭前");
}
</script>
<!--document对象的演示。
该对象将标记型文档进行封装。
该对象的作用，是对可以标记型文档进行操作。
最常见的操作就是，想要实现动态效果，需要对节点操作，那么要先获取到这个节点。
要想获取节点，必须要先获取到节点所属的文档对象document。
所以document对象最常见的操作就是获取页面中的节点。
获取节点的方法体现：
1，getElementById():通过标签的id属性值获取该标签节点。返回该标签节点。
2，getElementsByName(): 通过标签的name属性获取节点，因为name有相同，所以返回的一个数组。
3，getElementsByTagName(): 通过标签名获取节点。因为标签名会重复，所以返回的是一个数组。
凡是带s返回的都是数组。
-->
<script type="text/javascript">
function getNodeDemo(){
/*需求：获取页面中的div节点。
思路：通过docment对象完成。因为div节点有id属性。 所以可以通过id属性来完成获取。 */
var divNode = document.getElementById("divid");
//节点都有三个必备的属性。节点名称，节点类型，节点值。
alert(divNode.nodeName+"..."+divNode.nodeType+"..."+divNode.nodeValue);
/*常见节点有三种：
1，标签节点：类型 1
2，属性节点：类型 2
3，文本节点：类型 3
4，注释节点：类型 8
5，文档节点：类型 9
标签型节点是没有值的，属性和文本节点是可以有值的。*/
//获取div节点中的文本。
var text = divNode.innerHTML;
alert(text);
//改变div中的文本。
divNode.innerHTML = "黑马程序员".fontcolor("Green");
}
//获取文本框节点演示getElementsByName方法
function getNodeDemo2(){
//格式一：
var nodes = document.getElementsByName("user");
alert(nodes[0].value);
//格式二：
var userNode = document.getElementsByName("user")[0];
alert("---"+userNode.value+"---");
//俩种方式选择一种即可.
}
//获取超链接节点对象。演示getElementsByTagName方法。
function getNodeDemo3(){
//直接用标签名称获取。
var nodes = document.getElementsByTagName("a");
//alert(nodes.length);
//alert(nodes[0].innerHTML);
/*改变属有超链接的target属性*/
for(var x=0; x<nodes.length; x++){
alert("改变了target属性的链接..."+nodes[x].innerHTML);
nodes[x].target = "_blank";
}
}
/*对于页面中的超链接，通过新窗口打开。
当然是要获取其中被操作的超链接对象啊。
可是通过document获取超链接，拿到的是页面中所有的超链接节点。
只想一部分链接在新窗口打开，该如何办呢？
只要获取到被操作的超链接所属的节点即可。
在通过这个节点获取到它里面所有的超链接节点。
*/
function getNodeDemo4(){
//获取超链接所属的div节点
var divNode = document.getElementById("newslink");
//通过对div对象方法的查找发现它也具备getElementsByTagName方法。
//记住：所有的容器型标签都具备这个方法。在该标签范围内获取指定名称的标签。
var aNodes = divNode.getElementsByTagName("a");
for(var x=0;x<aNodes.length; x++){
//alert(aNodes[x].innerHTML);
aNodes[x].target = "_blank";
}
}
</script>
<input type="button" value="通过标签的ID属性获取节点" οnclick="getNodeDemo()" />
<input type="button" value="通过标签的name属性获取节点" οnclick="getNodeDemo2()" />
<input type="button" value="通过标签名称获取节点" οnclick="getNodeDemo3()" />
<input type="button" value="改变Div范围内的超链接target属性" οnclick="getNodeDemo4()"/>
<div id="divid">Div</div>
<input type="text" name="user" value="黑马程序员——新长城" />< /br >
<a href="http://edu.csdn.net">黑马程序员</a>
<a href="http://www.web.itcast.cn">黑马程序员</a>
<div id="newslink">
通过节点的层次关系获取节点对象。<a href="http://www.so.com">360搜索</a>
<a href="http://www.sina.com.cn">新浪网</a>
</div>
<!--
关系：
1，父节点: parentNode:对应一个节点对象。
2，子节点：childNodes:对应一个节点集合。
3，兄弟节点：
上一个兄弟节点：previousSibling
下一个兄弟节点：nextSibling
-->
<script type="text/javascript">
function getNodeByLevel(){
//获取页面中的表格节点。
var tabNode = document.getElementById("tabid");
//获取父节点。parentNode
var parentnode = tabNode.parentNode;
//alert(parentnode.nodeName);//body
//获取子节点。childNodes
var nodes = tabNode.childNodes;
//alert(nodes[0].childNodes[0].nodeName);
//获取兄弟节点。previousSibling
//上一个兄弟节点。
var previousSiblingNode = tabNode.previousSibling;
//alert(previousSiblingNode.nodeName);//换行符
//下一个兄弟节点。
var nextSiblingNode = tabNode.nextSibling.nextSibling;
//alert(nextSiblingNode.nodeName);
/*尽量少用兄弟节点，因为在解析的时候会出现浏览器不同解析不一致，
会解析出标签间的空白文本节点。*/
}
</script>
<input type="button" value="通过节点层次关系获取节点" οnclick="getNodeByLevel()" />
<div>div</div>
<span>span</span>
<table id="tabid">
<tr>
<td>黑马程序员</td>
<td>CSDN社区</td>
</tr>
</table>
<span>Span</span>
<dl>
<dt>黑马</dt>
<dd>黑马论坛</dd>
<dd>黑马程序员</dd>
</dl>
<a href=''>一个超链接</a>
对节点的增删改查
<style type="text/css">
div{
}border:#00ccff 1px solid;
width:200px;
padding:30px;
margin:10px;
#div_1{
background-color:#F33;
}
#div_2{
background-color:#FFccff;
}
#div_3{
background-color:#cc00ff;
}
#div_4{
background-color:#00FF00;
}
</style>
<script type="text/javascript">
//创建并添加节点。
//需求：在div_1节点中添加一个文本节点。
function crtAndAdd(){
/*
* 1，创建一个文本节点。
* 2，获取div_1节点。
* 3，将文本节点添加到div_1节点中。
*/
//1, 创建节点。使用document中的createTextNode方法。
var oTextNode = document.createTextNode("这是一个新的文本 ");
//2，获取div_1节点。
var oDivNode = document.getElementById("div_1");
//3，将文本节点添加到div_1节点中。
oDivNode.appendChild(oTextNode);
}
//需求：在div_1中创建并添加一个按钮节点。
function crtAndAdd2(){
//1,创建一个按钮节点。
var oButNode = document.createElement("input");
oButNode.type = "button";
oButNode.value = "一个新按钮";
//2，获取div_1节点。
var oDivNode = document.getElementById("div_1");
//3，将按钮节点添加到div_1节点中。
oDivNode.appendChild(oButNode);
}
//通过另一种方式完成添加节点。
function crtAndAdd3(){
/*
* 其实是使用了容器型标签中的一个属性。innerHTML.
* 这个属性可以设置html文本。
*/
//1，获取div_1节点。
var oDivNode = document.getElementById("div_1");
//oDivNode.innerHTML = "<input type='button' value='有个按钮'/>";
oDivNode.innerHTML = "<a href='http://edu.csdn.net'>黑马程序员，欢迎您！</a>";
}
//需求将div_2节点删除。
function delNode(){
//1,获取div_2节点。
var oDivNode = document.getElementById("div_2");
//2,使用div节点的remvoeNode方法删除。
//oDivNode.removeNode(true);较少用。
//一般使用removeChild方法。 删除子节点。
//获取div_2的父节点，然后在用父节点的removeChild，将div_2删除。
oDivNode.parentNode.removeChild(oDivNode);
}
//需求：用div_3节点替换div_1节点。
function updateNode(){
/*
* 获取div-3和div-1.
* 使用replaceNode进行替换。
*/
var oDivNode_1 = document.getElementById("div_1");
var oDivNode_3 = document.getElementById("div_3");
//oDivNode_1.replaceNode(oDivNode_3);
// 建议使用replaceChild方法。
oDivNode_1.parentNode.replaceChild(oDivNode_3,oDivNode_1);
}
//需求：希望用div_3替换div-1，并保留div-3节点。其实就是对div_3进行克隆。
function cloneDemo(){
var oDivNode_1 = document.getElementById("div_1");
var oDivNode_3 = document.getElementById("div_3");
var oCopyDiv_3 = oDivNode_3.cloneNode(true);
//oDivNode_1.replaceNode(oDivNode_3);
// 建议使用replaceChild方法。
oDivNode_1.parentNode.replaceChild(oCopyDiv_3,oDivNode_1);
}
</script>
<input type="button" value="创建并添加节点" οnclick="crtAndAdd3()"/>
<input type="button" value="删除节点" οnclick="delNode()"/>
<input type="button" value="修改节点" οnclick="updateNode()"/>
<input type="button" value="克隆节点" οnclick="cloneDemo()"/>
<hr/>
<div id="div_1">
</div>
<div id="div_2">
I'm coming. 黑马程序员！
</div>
<div id="div_3">
div区域演示文字。
</div>
<div id="div_4">
</div>节点的增删改查。
1378
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
