JS-DOM操作和BOM操作

DOM

简介

DOM是Document、Object、Model的简称。(文档对象模型)

W3C DOM 标准被分为 3 个不同的部分：
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM树

在 HTML DOM 中，HTML 文档中的所有内容都是节点（HTML元素）。DOM 是被视为节点树的 HTML。

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
比如<p>我是段落</p>
文本节点"我是段落"的父节点是<p>节点，注意元素节点不包含文本

DOM有什么用

DOM可以通过 document对象来获取所有的HTML元素，对元素进行增删改查。 还可以通过JS的代码将写好的网页进行改动。用来做一些特效，交互等功能，让页面动起来

JavaScript 能够改变页面中的所有 HTML的元素、属性，CSS 样式
JavaScript 能够对页面中的所有事件做出反应
HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准

document对象

document 文档对象 描述当前窗口或指定窗口对象的文档
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象是Window对象的一部分，可通过 window.document 属性对其进行访问
Document 对象使我们可以从脚本JS中对 HTML 页面中的所有元素进行访问(CRUD)

DOM的使用

1、查找 HTML 元素
document.getElementById( id名 );
document.getElementsByTagName( 标签名 );
document.getElementsByClassName( 类名-class属性的值 ); IE 5,6,7,8 中无效。
document,getElementsByName( name属性的值 );

2、改变 HTML（DOM HTML）
DOM 可以使 JS 改变 HTML 元素的内容
1）、JS 能够创建动态的 HTML内容 直接向 HTML 输出流写内容
document.write( ) 可用于直接向 HTML 输出流写内容。包括标签对属性等
注意：不要在文档加载之后使用 document.write( )。这会覆盖该文档。
2）、改变 HTML 内容 使用 innerHTML 属性
document.getElementById( id ).innerHTML = new HTML；
3）、改变 HTML 属性
document.getElementById( id ).attribute = new value；

3、改变 CSS （DOM CSS）
DOM 可以使 JS 改变 HTML 元素的样式
document.getElementById( id ).style.property = new style；
document.getElementById(“p”).style.color = “red”;

4、HTML DOM 元素（节点）
添加新元素
首先创建该元素（元素节点），然后向一个已存在的元素追加该元素
var para=document.createElement( “p” ); // 创建新的p元素：
var node=document.createTextNode( “这是新段落。” ); // 创建文本节点才能给p添加文本
para.appendChild( node ); // 给p元素追加文本节点
删除已有的 HTML 元素
必须首先获得该元素的父元素
var child = document.getElementById( “p1” );
child.parentNode.removeChild( child );

5、HTML DOM的常用属性和方法

常用方法

getElementsByTagName()：返回带有指定标签名称的所有元素的节点列表(集合/节点数组)。
getElementById(); 返回带有指定id的元素。
getElementsByClassName(); 返回带有指定类名的所有元素的节点列表。
appendChild(node) ; 在指定节点处插入新的子节点（元素）
removeChild(node) ; 删除子节点（元素)
replaceChild(node) ; 替换子节点（元素)
insertBefore();在指定的子节点前面插入新的子节点.
createAttribute();创建属性节点
createElement();创建元素节点
createTextNode();创建文本节点
getAttribute();返回指定的属性值
setAttribute();把指定的属性值修改为指定的值

常用属性

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的所有属性节点
document.documentElement - 全部文档 整个HTML文档对象
document.body - 文档的主体body部分

nodeName 规定节点的名称 只读

元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document ( 文档节点就是document节点)
nodeName 始终包含 HTML 元素的大写字母标签名

nodeValue 规定节点的值

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
x=document.getElementById(“p”);
document.write(x.firstChild.nodeValue);

nodeType 返回节点的类型 只读

元素类型	nodeType
元素	1
属性	2
文本	3
注释	8
文档	9

BOM

简介

BOM，浏览器对象模型（Browser Object Model）。
BOM 使JS可以与浏览器交互( 改变窗口的尺寸、移动窗口的位置、获取浏览器的信息、缓存等 )
BOM指的就是window对象。

Windows

1、简介

Window 对象表示浏览器中打开的窗口。
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
1)、所有全局变量是 window 对象的属性。
2)、所有全局函数是 window 对象的方法。
HTML DOM 的 document 也是 window 对象的属性

2、属性

1)、尺寸
浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 5、6、7、8：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
适配所有浏览器的方案：
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

2)、closed
closed 属性可返回一个布尔值，该值声明了窗口是否已经关闭。该属性为只读。
当浏览器窗口关闭时，表示该窗口的 Windows 对象并不会消失，它将继续存在，不过它的 closed 属性将设置为 true。

function ifClosed( ) {
document.write( " 'myWindow' has been closed!" )
}
function ifNotClosed( ) {
document.write( " 'myWindow' has not been closed!" )
}
function checkWin( ) {
if ( myWindow.closed )   ifClosed( )
else   ifNotClosed( )
}
myWindow = window.open( ' ', ' ' , 'width = 200, height = 100 ' )
myWindow.document.write( "This is 'myWindow' " )

<input type="button" value = "是否关闭了新的窗口" onclick="checkWin( )" />

方法

1)、window.open( ) - 打开新窗口
newWindow = window.open( "http://www.bjrjjy.com " , ‘软甲’, ‘width = 200, height = 200’ );
2)、window.close( ) - 关闭当前窗口
方法 close( ) 将关闭由 window 指定的顶层浏览器窗口。某个窗口可以通过调用 self.close( ) 或只调用 close( ) 来关闭其自身。
只有通过 JS代码打开的窗口才能够由 JS 代码关闭。这阻止了恶意的脚本终止用户的浏览器。

function closeWin( ) {
myWindow.close( )
}
myWindow = window.open( ' ' , ' ' , 'width = 200, height=100' )
myWindow.document.write( "This is 'myWindow' " )

<input type="button" value="关闭新窗口" onclick="closeWin( )" />
3)、window.moveTo( ) - 移动当前窗口
moveTo( ) 方法可把新窗口的左上角移动到一个指定的坐标。
出于安全方面的原因，浏览器限制此方法使其不能把窗口移出屏幕。
对于当前窗口：不支持Google 支持safari(并且只有一个标签页的时候)
对于新窗口：所有浏览器都支持。

function moveWin( ) {
myWindow.moveTo( 0, 0 )
myWindow.focus( )
}
myWindow = window.open( ' ' , ' ' , 'width = 200, height = 100' )
myWindow.document.write( "This is 'myWindow' " )

<input type="button" value="Move 'myWindow'" onclick="moveWin()" />

4、window.resizeTo( ) - 调整当前窗口的尺寸
resizeTo( ) 方法用于把窗口大小调整为指定的宽度和高度。
对于当前窗口：不支持Google 支持safari(并且只有一个标签页的时候)
对于新窗口：所有浏览器都支持。

var w;
function openwindow( ) {
w=window.open( ' ', ' ',  'width = 100, height = 100' );
w.focus( ); // 获取焦点   窗口在最上层
}
function myFunction( ) {
w.resizeTo( 500, 500 );
//            w.focus();
}

<button onclick="openwindow()">创建窗口</button>
<button onclick="myFunction()">调整窗口</button>

Windows的对象

1、Window Screen
包含有关用户屏幕的信息

属性和方法
screen.availWidth - 可用的屏幕宽度 宽度，以像素计，减去界面特性，比如窗口任务栏
改变浏览器窗口尺寸，availWidth不会改变
screen.availHeight - 可用的屏幕高度

2、Window Location
获得当前页面的地址 (URL)，并把浏览器重定向到新的页面

属性方法
location.hostname web 主机的域名
location.pathname 当前页面的路径和文件名(整个URL里的子路径)
location.port web 主机的端口 （80 或 443）
location.protocol 使用的 web 协议（http:// 或 https://）
location.href 当前页面的 URL。
window.location.href = ‘’; // 改变浏览器的指向，实现用JS代码自动跳转；
location.assign( ) 加载新的文档
window.location.assign( "http://www.bjrjjy.com" )

3、Window History
history 包含浏览器的历史 为了保护用户隐私，对JS 访问该对象的方法做出了限制

属性方法
history.back( ) - 加载历史列表中的前一个URL。 与在浏览器点击后退按钮相同

function goBack( ) {
window.history.back( )
}

<input type="button" value="Back" onclick="goBack( )">
history.forward( ) -加载历史列表中的下一个URL。 与在浏览器中点击按钮向前相同

function goForward( ) {
window.history.forward( )
}

<input type="button" value="Forward" onclick="goForward( )">

4、Window Navigator
包含有关访问者浏览器的信息

1)、注意
来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：
navigator 数据可被浏览器用户更改
浏览器无法报告晚于浏览器发布的新操作系统
由于不同的浏览器支持不同的对象，可以使用对象来检测浏览器。例如，只有 Opera 支持属性 “window.opera”，可以据此识别出 Opera。
if ( window.opera ) { }

2)、属性方法
navigator.appCodeName Browser CodeName
navigator.appName Browser Name
navigator.appVersion Browser Version
navigator.cookieEnabled Cookies Enabled
navigator.platform Platform
navigator.userAgent User-agent header 用户代理
navigator.systemLanguage User-agent language

5、JS PopupAlert
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

1)、警告框
警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。
alert( “文本” )

2、确认框
确认框用于使用户可以 验证或者 接受某些信息。
当确认框出现后，用户需要点击 确定或者取消 按钮才能继续进行操作。
如果点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
var result = confirm( “文本” )

3、提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
prompt( “提示文本”, “默认值” )
var name = prompt( “请输入账号”, “863395062” )
if ( name!=null && name!="" ) document.write( “你好！” + name + " 欢迎回来 " )；

6、JS Timing 计时器 定时器 setInterval
在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行 称之为计时事件。
var t = setTimeout( “JS代码” , 毫秒 ) 未来的某时执行代码
如果取消这个 setTimeout( ) 可以使用t这个变量名来指定
第二个参数指示从当前起多少毫秒后执行第一个参数。 1000 毫秒等于一秒。
clearTimeout( setTimeout_variable ) 取消

7、cookie 用来识别用户
cookie 是存储于 访问者的 计算机中的变量。每当 同一台计算机 通过浏览器请求某个页面时，就会发送这个 cookie。可以使用 JS来 创建cookie和取回cookie的值。

名字 cookie
当访问者 首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 “Welcome John Doe!” 的欢迎词。而名字则是从 cookie 中取回的。

密码 cookie
当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。

日期 cookie
当访问者首次访问你的网站时，当前的日期可存储于 cookie 中。当他们再次访问网站时，他们会收到类似这样的一条消息：“Your last visit was on Tuesday August 11, 2005!”。日期也是从 cookie 中取回的。

格式：
document.cookie
document.cookie
创建一个存储访问者名字的 cookie。当访问者首次访问网站时，他们会被要求填写姓名。
名字会存储于 cookie 中。当访问者再次访问网站时，他们就会收到欢迎词。
// 第一次进来 弹出提示框 然输入名字
// 第二次访问 判断是否有缓存cookie 有：就显示欢迎 没有就弹出提示框
// 如果输入了名字 存储名字到cookie