专业编程基础技术教程

网站首页 > 基础教程 正文

PHP学习第十四天——JavaScript入门dom对象:一

ccvgpt 2024-11-08 10:55:10 基础教程 9 ℃

  1. 昨日回顾

昨日回顾可以看上篇文章：→文章链接

BOM和DOM

PHP学习第十四天——JavaScript入门dom对象:一

BOM，Brower Object Model浏览器对象模型，为我们提供了访问或操作浏览器中各组件的一种方法。

各组件：地址栏(location)、历史记录(history)、浏览器软件名称(navigator)、

地址的构成：协议、主机名、文件路径及文件名、查询字符串、锚点

协议：就是访问一种资源的一种规则。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);

2.Screen屏幕对象

Width：屏幕的宽度

Height：屏幕的高度

availWidth：屏幕的有效宽度（不含任务栏）

availHeight：屏幕的有效高度（不含任务栏）

colorDepth：色深

3.navigator浏览器对象

appName：浏览器软件的名称

appVersion：版本号

platform：操作平台

systemLanguage：系统语言

userLanguage：用户语言

cookieEnabled：cookie是否启用。Cookie是用来记录用户账号信息

4.location地址栏对象

href：指完整的地址栏中的地址

hash：取出锚点名称

protocol：取出地址的协议

host：取出主机地址和端口号

hostname：取出主机名称

pathname：取出文件路径和文件名

search：取出查询字符串

location对的方法

reload()：刷新网页，相当于单击浏览器的“刷新按钮”

5.history对象

back()：相当于浏览器的“后退”按钮

forward()：相当于浏览器的“前进”按钮

go(n)：跳转到哪个历史记录。N代表历史记录

go(1)：相当于“前进”按钮

go(0)：相当于“刷新”按钮

go(-1)：相当于“后退”按钮

知识点补充：如果你的Firefox无法关闭时，怎么办？

第一步：在地址栏中输入：about:config

第二步：将选项“dom.allow_scripts_to_close_windows”的值改为“true”

6.DOM简介

W3C的DOM使用JS程序或脚本，可以动态的改变网页中元素的结构、外观和内容。

网页对应的标准：结构(XHTML)、表现(css)、行为(js)

DOM可以操作结构化的文档非常方便，结构化的文档有：html、XML。

HTML文档：具有一定的层次结构、层次关系。

HTML文档只有一个根元素(根标记)，就是<html>。

HTML文档中，各元素之间是有一定层级关系。

DOM操作HTML元素，都是从根元素，一级一级的往下查找，直到找到目标元素为止。

7.DOM分类

核心DOM：核心DOM中的属性和方法，可以共享于HTML和XML文档。

HTML DOM：针对HTML文档的专用接口，也就是一些专用的属性和方法。

XML DOM：针对XML文档的专用接口，也就是一些专用的属性和方法。

CSS DOM ：针对CSS定义的专用接口，用于JS给HTML元素增加样式或外观。

事件DOM：针对不同的浏览器，定义不同的事件模型对象。IE有自己的事件模型、Firefox也有自己的事件模型。

8.HTML节点树

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

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

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

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

9.DOM节点类型

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

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

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

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

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

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

Comment节点：注释节点（作个了解）

10.核心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>之间不能有任何的空白。

11.三、节点的增删

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)

Tags：

猜你喜欢

最近发表
标签列表