昨日回顾
BOM和DOM
BOM，Brower Object Model浏览器对象模型，为我们提供了访问或操作浏览器中各组件的一种方法。
各组件：地址栏(location)、历史记录(history)、浏览器软件名称(navigator)、
http://www.sina.com.cn/index.html?username=yao&password=123456#top
地址的构成：协议、主机名、文件路径及文件名、查询字符串、锚点
协议：就是访问一种资源的一种规则。http://、 FTP://、news://
DOM，Document Object Model，文档对象模型，为我们提供了访问和操作网页中各标记(元素)的一种方法。
BOM和DOM在浏览器中是以“对象”的形式存在。
BOM的对象结构图
自己总结的DOM模型中对应的对象
window对象
name：指窗口的名称，一般给超级链接使用；
innerWidth和innerHeight：指浏览器的净高和净宽(内宽)；
outerWidth和outerHeight：指浏览器的外宽和外高；
alert()：弹出一个警告对话框，只有一个“确定”按钮；
prompt()：用户输入对话框，单击“确定”返回“字符串”，单击“取消”返回null
typeof()用来测试一个变量的类型，string、 number、 boolean、 object、undefined、function
typeof(null) = “object”
confirm()：弹出一个确认对话框。返回值：true和false
setTimeout()：设置一个延时器，只能执行一次。
格式：var timer = setTimeout(JS函数或代码，毫秒数)
timer的值是一个数字，数值型数据。
清除延时器：window.clearTimeout(timer);
如果setTimeout()要实现重复执行，在函数内再次调用自己。
setInterval()：设置一个定时器，可以重复调用某个JS代码。每隔指定的毫秒后，调用一次JS函数。
格式：var timer = window.setInterval(JS函数或代码，毫秒数);
举例：var timer = window.setInterval(function(){
i++;
},1000);
Screen屏幕对象
Width：屏幕的宽度
Height：屏幕的高度
availWidth：屏幕的有效宽度（不含任务栏）
availHeight：屏幕的有效高度（不含任务栏）
colorDepth：色深
navigator浏览器对象
appName：浏览器软件的名称
appVersion：版本号
platform：操作平台
systemLanguage：系统语言
userLanguage：用户语言
cookieEnabled：cookie是否启用。Cookie是用来记录用户账号信息
location地址栏对象
href：指完整的地址栏中的地址
hash：取出锚点名称
protocol：取出地址的协议
host：取出主机地址和端口号
hostname：取出主机名称
pathname：取出文件路径和文件名
search：取出查询字符串
location对的方法
reload()：刷新网页，相当于单击浏览器的“刷新按钮”
history对象
back()：相当于浏览器的“后退”按钮
forward()：相当于浏览器的“前进”按钮
go(n)：跳转到哪个历史记录。N代表历史记录
go(1)：相当于“前进”按钮
go(0)：相当于“刷新”按钮
go(-1)：相当于“后退”按钮
知识点补充：如果你的Firefox无法关闭时，怎么办？
第一步：在地址栏中输入：about:config
第二步：将选项“dom.allow_scripts_to_close_windows”的值改为“true”
DOM简介
W3C的DOM使用JS程序或脚本，可以动态的改变网页中元素的结构、外观和内容。
网页对应的标准：结构(XHTML)、表现(css)、行为(js)
DOM可以操作结构化的文档非常方便，结构化的文档有：html、XML。
HTML文档：具有一定的层次结构、层次关系。
HTML文档只有一个根元素(根标记)，就是<html>。
HTML文档中，各元素之间是有一定层级关系。
DOM操作HTML元素，都是从根元素，一级一级的往下查找，直到找到目标元素为止。
DOM分类
核心DOM：核心DOM中的属性和方法，可以共享于HTML和XML文档。
HTML DOM：针对HTML文档的专用接口，也就是一些专用的属性和方法。
XML DOM：针对XML文档的专用接口，也就是一些专用的属性和方法。
CSS DOM ：针对CSS定义的专用接口，用于JS给HTML元素增加样式或外观。
事件DOM：针对不同的浏览器，定义不同的事件模型对象。IE有自己的事件模型、Firefox也有自己的事件模型。
HTML节点树
根节点：每一个HTML文档都有肯只能一个根节点，就是<html>
子节点：某一个节点的下级节点。
父节点：某一个节点的上级节点。
兄弟节点：平级关系的两个节点，同属于同一个父节点
DOM节点类型
DOM中定义了12种节点类型，针对HTML文档的节点类型只有5个。
Document节点：文档节点。对应整个HTML文档。访问其它节点都是从Document节点开始的。
其它节点都包含在Document节点之下。
Element节点：元素节点。对应于网页中的各种标记。比如：<img>、<table>
Attribute节点：属性节点。对应于网页中各标记的属性。比如：<img src=“” />
Text节点：文本节点。对应于标记中的内容。Text节点必须是最底层节点。
Comment节点：注释节点（作个了解）
核心DOM节点属性
核心DOM中的属性是公共属性，可以应用于HTML DOM，每一个HTML标记都继承核心DOM中的属性。
一、访问节点
nodeName：节点的名称
nodeValue：节点的值，只有Text节点才有nodeValue属性。
提示：nodeValue中内容不能增加任何的标记。nodeValue和innerHTML不一样。
innerHTML中可以加各种其它的标记
nodeValue只能输入普通文本；
firstChild：第一个子节点。
lastChild：最后一个子节点。
childNodes：子节点的列表，是一个数组。只有一个子节点，也返回一个数组。
parentNode：父节点
二、给节点增加属性、删除属性、取得某一个属性的值
setAttribute(name,value)：给某一个HTML元素增加一个属性。
例如：setAttribute(“style”,”width:400;height:200px;”) //给某个标记增加行内样式
setAttribute(“src”,”images/bg.gif”) //给图片标记增加一个src属性，属性值为“images/bg.gif”
setAttribute(“id”,”result”); //给某个标记增加一个id属性，属性值为“result”
getAttribute(name)：取得某个属性的值
例如： var style = document.getAttribute(“style”)
removeAttribute(name)：删除指定的一个属性
例如：obj.removeAttribute(“style”);
如果访问某一个节点呢？
访问每一个节点的起始点都是Document节点对应的document对象。
<html>节点：document.firstChild
document.documentElement
<body>节点：document.body
document.firstChild.lastChild
为什么XHTML通过document.firstChil.lastChild取不到<body>节点？
核心DOM最初是给HTML4.0文档用的。
XHTML和HTML的主要区别：DTD定义。
因此，在XHTML文档中无法使用document.firstChild.lastChild这种方式访问节点。
解决办法：将DTD定义删除，恢复HTML4.0的结构。
为什么Firefox浏览器下，经常会出现，取得某一个节点，反而返回文本节点？
Firefox会把空格、换行都当成一个节点，当成一个文本节点。
解决办法：<body>和<table>之间不能有任何的空白。
三、节点的增删
createElement(tagName)：创建一个HTML元素。注意：tagName不加尖括号，如：createElement(“h2”)
createTextNode(text)：创建文本节点
appendChild(node)：将某一个子节点追加到父节点
removeChild(node)：移取某一个子节点
举例：创建一个<h2>节点，文本内容是“大家好”
//（1）创建一个h2节点
Var node_h2 = document.createElement(“h2”)
//（2）创建文本节点
Var node_h2_text = document.createTextNode(“大家好”);
//（3）将文本节点，追加到h2节点下。
node_h2.appendChild(node_h2_text);
//将h2节点挂到body节点下
document.body.appendChild(node_h2)
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/453.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
