FavoriteLoading
0

我的php学习第十四天之dom对象篇

昨日回顾

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的对象结构图

QQ截图20170426142015

image003

自己总结的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:取出查询字符串

image005

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节点树

image007

根节点:每一个HTML文档都有肯只能一个根节点,就是<html>

子节点:某一个节点的下级节点。

父节点:某一个节点的上级节点。

兄弟节点:平级关系的两个节点,同属于同一个父节点

 

DOM节点类型

DOM中定义了12种节点类型,针对HTML文档的节点类型只有5个。

Document节点:文档节点。对应整个HTML文档。访问其它节点都是从Document节点开始的。

其它节点都包含在Document节点之下。

Element节点:元素节点。对应于网页中的各种标记。比如:<img>、<table>

Attribute节点:属性节点。对应于网页中各标记的属性。比如:<img src=“” />

Text节点:文本节点。对应于标记中的内容。Text节点必须是最底层节点

Comment节点:注释节点(作个了解)

image009

核心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)

 

欢迎分享本文,转载请保留出处!—重蔚自留地 站长邮箱:951076433@qq.com