昨日回顾
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联系删除