黑马毕向东Java课程笔记（35天day33-1——33-19）DOM（文档对象模型）+BOM（浏览器对象模型）：part1
1、DOM概述
DOM简介，以及BOM对window对象初步操作，相应的代码如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档title>
head>
<body>
<script type="text/javascript" src="out.js">script>
<script type="text/javascript">
//演示navigator对象：包含关于 Web 浏览器的信息。
function windowObjDemo()
{
var name = window.navigator.appName;//注意APPName是属性而不是方法
var version = navigator.appVersion;//这里window对象可以省略，因为一旦窗体存在，window对象也就存在
println(name+"-----"+version);
//Netscape-----5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36
}
//windowObjDemo();
//演示location：包含关于当前 URL 的信息。
function windowObjDemo2()
{
//var pro = location.protocol;
//var URLtext = location.href;
//println(pro+"---"+URLtext);
//给location的href属性设置一个值。改变了地址栏的值，并对其值进行了解析如果是http，还进行连接访问。
location.href = "http://www.sina.com.cn";//会跳转到相应的网址。
}
//windowObjDemo2();
//file:---file:///G:/JS%E6%BC%94%E7%A4%BA/dom_demo.html——我们最开始访问的是一个文件
script>
<form>
<input type="button" value="演示window中的对象" onclick="windowObjDemo2()" />
form>
body>
html>
2、window浏览器对象的常见方法
浏览器操作对象是window对象，使用的是BOM技术，它的常见方法及代码实例如下：
----------------------------------window_method.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档title>
head>
<body>
<script type="text/javascript" src="out.js">script>
<script type="text/javascript">
var timeid;//定义一个全局变量，这样windowMethodDemo与stopTime方法都可以用到
function windowMethodDemo()
{
//confirm方法：显示一个确认对话框，其中包含一个可选的消息和确定取消按钮。返回值是Boolean
//var b = window.confirm("确定要点击吗？");//同样，在由于页面创建就有window存在，因此window对象可以省略
//println("b:"+b);
//出现按钮“确定要点击吗？”，确定则打印true，取消则打印false
//setTimeout：经过指定毫秒值后计算一个表达式。
//window.setTimeout("alert('time out run')",4000);
//经过4秒后弹出窗体“time out run”
//setInterval：每经过指定毫秒值后计算一个表达式。
//注意，这样带返回值也会执行setInterval，同时会将其返回值赋予timeid，效果与不将返回值赋予某个变量的情形是一样的
timeid = window.setInterval("alert('interval run')",4000);
//每经过4秒弹出窗体“interval run”
}
function stopTime()
{
//clearInterval：使用 setInterval 方法取消先前开始的间隔事件。
//既将setInterval设置的连续事件停止下来，参数是setInterval的返回值。
window.clearInterval(timeid);
//在按下停止按钮之前，每隔4秒就会弹出一个窗口，按下停止后窗口不再弹出
}
//窗口移动
function windowMove()
{//IE浏览器才有效果，而Chrome浏览器没有效果
//window.moveBy(10,10);//窗口分别向右边和下面移动10
//moveTo(80,40);//窗口移动到横坐标80纵坐标40的位置
for(var x=0; x<1000 ;x++)
{
moveBy(20,0);
moveBy(0,20);
moveBy(-20,0);
moveBy(0,-20);
//结果窗口疯狂移动
}
}
function windowOpen()
{
//open 打开新窗口并装入给定 URL 的文档。
/*
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
其中sURL代表地址符、sName表示以什么方式打开窗口、sFeatures表示设置打开窗口的属性
*/
open("ad.html","_blank","height=400,width=400,status=no,toolbar=no,menubar=no,location=no");
//打开一个新的设置好的窗体
}
script>
<form>
<input type="button" value="演示window对象的方法" onclick="windowOpen()" />
<input type="button" value="停止" onclick="stopTime()" />
form>
body>
html>
---------------------
ad.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档title>
head>
<body>
<h1>特价大优惠！h1>
<h2>什么东西便宜了呢！！h2>
<h1>你猜！h1>
<script type="text/javascript">
//这里不设置JS函数，而是直接使用window对象，调用window对象的延时以及关闭方法，那么新窗口打开后会直接读取到JS代码，执行延时与关闭函数（JS代码中，function函数部分需要调用执行，而函数外的部分会直接读取执行）
//close 关闭当前浏览器窗口或 HTML 应用程序(HTA)。
setTimeout("close()",3000);//设置3秒后本小窗口关闭，只有新开的窗口我们才可以设置自动关闭。
script>
body>
html>
3、window浏览器对象的常见事件
window相关事件以及属性的示例如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档title>
head>
<body>
<script type="text/javascript">
/*
window对象常见的事件：
onunload 在对象卸载前立即触发。
onload 在浏览器完成对象的装载后立即触发。
onbeforeunload 在页面将要被卸载前触发。
*/
//onunload事件本身窗体已经具备，现在我们想要定义的是窗体事件的处理方式，因此我们需要将事件指向一个函数
//这样我们在函数中就可以定义事件的行为，事件被触发函数就运行。（我们用JS的匿名函数来处理事件，事件名就是指向相应函数的变量）
/*
onunload = function()
{
alert("onunload run");
}
onload = function()
{
alert("onload run");
}
onbeforeunload = function()
{
alert("onbeforeunload run");
}
*/
/*
当我们访问一个页面，当页面的数据全都在浏览器窗口加载完毕后，window对象装载完毕，onload触发
当我们加载在浏览器窗口的事件不要的时候（既关闭窗口的时候），关闭之前onbeforeunload事件触发
浏览器关闭的时候onunload事件触发
*/
/*
我们发现上述事件只有onload在各类浏览器中都支持，而其他2个方法不管是在ie11还是Chrome中都不支持
好像是最新的Chrome和ie11支持onunload和onbeforeunload，但是不支持alert，反正知道就可以。
*/
//下面演示一下window对象的属性
//status 设置或获取位于窗口底部状态栏的信息。
onload = function()
{
window.status = "页面加载完毕";//发现底部状态栏的信息被设置为"页面加载完毕"
document.write(window.status);//页面打印"页面加载完毕"
}
script>
body>
html>
4、window浏览器对象的小练习
相应代码如下：
windowtest.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档title>
head>
<body>
<script type="text/javascript">
/*
* 演示弹窗广告效果。
*
* 页面一加载完就执行：onload事件
* 在当前页面定义脚本，可以在onload事件中完成广告的弹窗。
* onload事件一加载，就打开广告弹窗页面：open方法
方法2：也可以直接写open，页面一读到就开始执行
*/
window.onload = function()
{
//注意，表示路径的时候斜杆“/”只需要一个，而反斜杠“\”则需要2个
open("G:\\JS演示\\ad.html","_blank","height=400,width=400,status=no,toolbar=no,menubar=no,location=no");
}
script>
body>
html>
--------------------------------------
ad.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档title>
head>
<body>
<h1>特价大优惠！h1>
<h2>什么东西便宜了呢！！h2>
<h1>你猜！h1>
<script type="text/javascript">
//close方法 关闭当前浏览器窗口或 HTML 应用程序(HTA)。
// setTimeout("close()",3000);//设置3秒后本小窗口关闭
//我们弹出弹窗后，用户关闭弹窗，为了使得用户再次看到弹窗，我们用onunload设置用户关闭当前的弹窗页面后，
//再次打开弹窗“ad.html”，而再次关闭“ad.html”，就会再次弹出“ad.html”，这样就会一直循环！
//注意，我们open会使用一个新的浏览器界面弹出，我们关闭的是浏览器，而不是浏览器界面，因此，我们用的是onunload（关闭浏览器），而不是onbeforeload （关闭当前页面）
//onunload = function()
//{
// open("G:\\JS演示\\ad.html","_blank","height=400,width=400,status=no,toolbar=no,menubar=no,location=no");
//}
//如果我们将弹窗页面缩小，这样就一直看不到，我们可以设置隔一段事件就使得页面显示在界面上
//既setInterval与focus方法，focus既将当前的窗口前置
//focus 使得元素得到焦点并执行由 onfocus 事件指定的代码。
setInterval("focus()",1000);//发现就算将窗口缩小，每隔1秒就会前置1次！
script>
body>
html>
5、window对象下的document对象
document对象：代表给定浏览器窗口中的 HTML 文档。
document相应描述与代码示例如下，这一部分主要讲的是获取节点
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档title>
head>
<body>
<script type="text/javascript">
//定义获取节点的函数
function getNodeDemo()
{
/*
* 需求：获取页面中的div节点。
* 思路：通过docment对象完成。因为div节点有id属性。所以可以通过id属性来完成获取。（id是唯一的）
*/
var divnode = document.getElementById("divid");//通过id获取div标签的节点
//节点都有三个必备的属性。节点名称，节点类型，节点值。
//想要知道标签都有哪些属性，需要到文档中相应的标签下面寻找
//document.write(divnode.nodeName+"---"+divnode.nodeType+"---"+divnode.nodeValue);
//结果：DIV---1---null，nodeName是标签的属性名，nodeType使用数字来标识不同的标签节点，“1”表示节点为标签类型
/*
* 常见节点有三种：
* 1，标签型节点： 类型 1
* 2，属性节点： 类型 2
* 3，文本节点： 类型 3
*
* 标签型节点是没有值的，属性和文本节点是可以有值的。
*/
//获取div节点中的文本。——通过innerHTML属性
//var text = divnode.innerHTML;
//document.write(text);//结果：这是一个div标签
//改变div中的文本。
divnode.innerHTML = "哈哈内容被我修改了".fontcolor("red");
//结果：点击按钮，发现文本从“这是一个div标签”变成红色的“哈哈内容被我修改了”
}
//获取文本框节点演示getElementsByName方法
function getNodeDemo2()
{
//var nodes = document.getElementsByName("user");//由于name属性可以重复，最后获得是一个数组
//document.write(nodes[0].value);//结果：获取值hahaha，当然也可以自己在文本框内输入值
//当然我们也可以直接获取节点数组的某一个节点
var userNode = document.getElementsByName("user")[0];
document.write(userNode.value);//结果：获取值hahaha
}
//获取超链接节点对象。演示getElementsByTagName方法。
function getNodeDemo3()
{
var nodes = document.getElementsByTagName("a");//该方法同样返回数组
//alert(nodes[0].innerHTML);
//document.write(nodes.length);
for(var x=0; x<nodes.length; x++)
{
//alert(nodes[x].innerHTML);
//使得所有超链接点开的界面在新窗口打开。之前是必须在每一个超链接标签中设置target（或者在head中通过CSS设定）
nodes[x].target = "_blank";//注意得点击按钮才会从新窗口打开
}
}
/*
* 对于页面中的超链接，新闻链接通过新窗口打开，门户网站链接在当前页面打开。
* 当然是要获取其中被操作的超链接对象啊。
* 可是通过document获取超链接，拿到的是页面中所有的超链接节点，只想获取一部分该如何办呢？
* 只要获取到被操作的超链接所属的节点即可。再通过这个节点获取到它里面所有的超链接节点。
*
*/
//这里，我们将相同的超链接封装到同一个div标签中
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="演示document对象获取节点" onclick="getNodeDemo4()" />
<div id="divid">这是一个div标签div>
<input type="text" name="user" value="hahaha"/><br/>
<a href="http://www.sina.com.cn">新浪网站11a>
<a href="http://www.SOHU.com.cn">搜狐网站22a>
<div id="newslink">
<a href="http://www.163.com.cn">新闻链接1a>
<a href="http://www.164.com.cn">新闻链接2a>
<a href="http://www.itcast.com.cn">新闻链接3a>
div>
body>
html>
上面讲述了3个获取节点的方式，下面我们通过节点的层次关系获取节点对象。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档title>
head>
<body>
<script type="text/javascript">
function getNodeByLevel()
{
//获取页面中的表格节点。
var tabNode = document.getElementById("tabid");
//获取表格的父节点。parentNode——这是一个属性
//var parNode = tabNode.parentNode;
//alert(parNode.nodeName);//Body——表格的父节点是body
//获取子节点。childNodes——这是一个集合
var nodes = tabNode.childNodes;//这里获得是子节点是子节点的集合
alert(nodes[0].childNodes[0].childNodes[0].nodeName);
//打印nodes.nodeName结果是undefined，因为子节点是一个集合而不是一个对象。
//打印nodes[0].nodeName结果是tbody（我们的浏览器其实是#text，将tr移动到table标签后就是tbody，这里见35-33-15-14.35文本节点的解析），获得tbody的集合
//打印nodes[0].childNodes[0].nodeName，打印tr
//获取兄弟节点。
//上一个。
//var node = tabNode.previousSibling.previousSibling;
//alert(node.nodeName);
//下一个
//var node = tabNode.nextSibling.nextSibling;
//alert(node.nodeName);//span
/*
只有一个previousSibling或者nextSibling的时候，结果会解析处空白文本#text
尽量少用兄弟节点，因为在解析的时候会出现浏览器不同解析不一致，会解析出标签间的空白文本节点。（其实我们在Chrome浏览器中parentNode与childNodes节点也会有这种情况发生）
*/
}
script>
<input type="button" value="通过节点层次关系获取节点" onclick="getNodeByLevel()"/>
<div>div区域div>
<span>span区域span>
<table id="tabid"><tr><td>单元格一td>
<td>单元格二td>
tr>
table>
<span>span区域11span>
<dl>
<dt>上层项目dt>
<dd>下层项目dd>
dl>
<a href=''>一个超链接a>
body>
html>
6、节点的操作（通过document获取节点后操作节点）
节点操作的相应示例代码如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档title>
<style type="text/css">
div
{
border:#00ccff 1px solid;
width:200px;
padding:30px;
margin:10px;
}
/*
这里使用id选择器定义具体的div的格式
*/
#div_1{
background-color:#00ccff;
}
#div_2{
background-color:#FFccff;
}
#div_3{
background-color:#cc00ff;
}
#div_4{
background-color:#00FF00;
}
style>
head>
<body>
<script type="text/javascript">
//创建并添加节点。
//需求：在div_1节点中添加一个文本节点。
function crtAndAdd()
{
/*
* 1，创建一个文本节点。
* 2，获取div_1节点。
* 3，将文本节点添加到div_1节点中。
*/
//1、创建文本节点。
//createTextNode() 从指定值中创建文本字符串。 返回值：Returns the created TextNode object.
var oTextNode = document.createTextNode("这是一个新的文本");
//2、获取div_1节点。
var oDivNode = document.getElementById("div_1");
//3、将文本节点添加到div_1节点中。
//使用div的appendChild()方法： 给对象追加一个子元素。
oDivNode.appendChild(oTextNode);
}
//需求：在div_1中创建并添加一个按钮节点。
function crtAndAdd2()
{
//1、创建一个按钮节点。——使用input标签
//createElement 为指定标签创建一个元素的实例。 返回值：Returns a reference to the new element.
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文本。
*我们通过这个属性添加相应的HTML标签
*/
//1，获取div_1节点。
var oDivNode = document.getElementById("div_1");
//通过innerHTML属性添加相应标签
//oDivNode.innerHTML = "";//注意这里的格式
oDivNode.innerHTML = "有个超链接";//注意，这个设置会将前面的设置覆盖
}
script>
<script type="text/javascript">
//需求将div_2节点删除。
function delNode()
{
//1,获取div_2节点。
var oDivNode = document.getElementById("div_2");
//2,使用div节点的remvoeNode方法删除。
//oDivNode.removeNode(true);//注意将参数设置为true，这样div的子节点（这里是文字）也会删除，否则不会删除
//一般使用removeChild方法。 删除子节点。
//通过parentNode属性获取div_2的父节点，然后在用父节点的removeChild，将div_2删除。
oDivNode.parentNode.removeChild(oDivNode);//参数是要删除的子节点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");
//oReplace = object.replaceNode(oNewNode)：用于替换的对象作为参数
//oDivNode_1.replaceNode(oDivNode_3);
// 建议使用replaceChild方法。——同样是要获取要替换的对象的父对象再利用父对象来删除
//oReplace = object.replaceChild(oNewNode, oChildNode)
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");
//克隆div_3
//cloneNode 从文档层次中复制对对象的引用。oClone = object.cloneNode( [bCloneChildren])
oCopyNode_3 = oDivNode_3.cloneNode(true);//带true会将div_3的子节点也替换过去
//克隆后不会多显示一个div_3区域，但是div_3对象已经被克隆
//oDivNode_1.replaceNode(oCopyNode_3);//发现使用oCopyNode_3替换oDivNode_1，原来3也还存在
// 建议使用replaceChild方法。
oDivNode_1.parentNode.replaceChild(oCopyNode_3,oDivNode_1);
}
script>
<input type="button" value="创建并添加节点" onclick="crtAndAdd3()"/>
<input type="button" value="删除节点" onclick="delNode()"/>
<input type="button" value="修改节点" onclick="updateNode()"/>
<input type="button" value="克隆节点" onclick="cloneDemo()"/>
<div id="div_1">
div>
<div id="div_2">
好好学习，day day up！
div>
<div id="div_3">
div区域演示文字
div>
<div id="div_4">
节点的增删改查
div>
body>
html>