您的位置：首页 > Web前端 > JavaScript

week14---12月11日 JS内置对象——document文档对象、Dom对象

2015-12-10 19:48 447 查看
一、复习

1、数学函数（四舍五入函数的三种分析，随机数函数）

2、验证码讨论

二、新课

（一）document文档对象

HTML DOM是W3C规范的文档对象模型(Document Object Model for HTML)，将HTML文档树进一步细化为带有标记元素、属性和文本节点的节点树，每个标记元素、标记属性、标记文本都是树中的一个Node节点，每一个节点都是一个对象。

document对象是浏览器窗口window的子对象，代表了整个HTML文档页面的根节点对象，是所有节点对象的父对象，可用于访问整个页面的所有元素。

整个HTML文档是一个文档节点对象，即document对象
每个HTML标记都是元素节点对象
每个HTML标记的属性都是元素的属性节点对象
每个HTML标记中的文本是元素的文本节点对象
每个HTML注释都是注释节点对象

除文档根节点document对象外，每个节点都有父节点，大部分元素还包含属性、文本及子标记节点子对象。

通过DOM对象可以访问页面所有HTML标记元素以及它们所包含的属性及文本，可以创建、修改和删除标记元素及内容。

1）document对象的属性

body <body>元素，使用框架集时表示为最外层<frameset>

title 当前文档的标题，即<title>元素内的文本

URL 当前文档的URL，等价于location.href属性

domain 当前文档的服务器域名地址

referrer 超链接载入当前文档的前文档URL，非超链接载入null

lastModified 当前文档最后的修改日期，来源于HTTP头

cookie 当前文档存储在用户机器上的标志字符串文件，用于跟踪用户

2）关于cookie

cookie是由document自动保存在用户机器硬盘上的一个简单文本文件，其中包含了当前文档及其所在的服务器地址，当保存有cookie文件的用户计算机再次向该服务器请求这个页面时，浏览器会自动发送这个cookie。若用户禁止了cookie则设置的cookie无效。
cookie文件由document对象自动读写，其内容必须是键值对的特定格式：
"键名=键值; expires=date;[path=url;domain=服务器域名]"
设置自定义cookie值"键名=键值"时，一个语句一次只能设置一项，可用多个语句多次设置多项，但每次每项的设置中必须最少包含一项expires，系统保存时各项之间用分号带一个空格隔开(书写时可省略空格)，键名相同时则用新值替换原值。
系统默认的键名expires可设置过期日期（超过设置日期浏览器会自动删除这个cookie）、path保存当前文档url、domain保存服务器域名，但这些数据都是不可读取的。
实训：使用cookie
3）document对象的方法

getElementById("id") 获取指定id元素对象(如有多个只取第一个)

getElementsByName("name") 获取指定name的元素对象数组

getElementsByTagName("tagname") 获取指定标记对象数组

标记名不区分大小写，获取第i个<p>元素：

document.getElementsByTagName("p")[i-1]

用getElementsByTagName("*"); 可获取所有元素对象数组

createElement("标记名") 创建返回新标记节点对象

createTextNode("文本内容") 创建返回新文本节点对象

标记对象调用appendChild(文本或子标记节点对象) 可追加指定子节点对象。

write("html标记或字符串常量"+变量或函数)将内容写入html文档

writeln("html标记或字符串常量"+变量或函数)最后插入换行符\n

open( ["mimetype" [, "replace"]] ) 清除页面、打开新文档流

mimetype文档类型(默认"text/html")、replace从父文档继承

close() 关闭open()打开的文档流并强制显示已写入数据

（二）DOM节点对象

1、DOM 节点对象

DOM节点对象泛指标记、标记属性、标记内的子标记对象或文本子对象，通过标记对象可获取其属性、子标记或文本内容子对象。

1）DOM节点对象的通用属性

标记、标记属性、标记内子标记对象或文本子对象等DOM节点对象都具有nodeType节点类型、nodeName节点名称和nodeValue节点值三个通用属性。

nodeType 节点类型，取值含义为：

1 标记节点(包括body) 2 属性节点 3 文本节点

8 注释节点 9 文档节点

nodeName节点名称，不同类型对象的属性值含义不同

body节点对象值为：#document

标记节点对象为标记名(大写)等价tagName属性。如<div>标记对象的nodeName或tagName属性值为"DIV"。

属性节点对象为属性名，如style属性对象nodeName值为style

文本节点对象的值为：#text

节点对象的通用属性

nodeValue节点值

标记节点对象(包括body)没有该属性，其值为null
属性节点对象的值为属性值
文本节点对象的值为所包含的文本字符串
注意：文本区文本节点应使用value属性，如果用nodeValue属性很容易出错。可以通过直接赋值为任意节点对象添加任意类型的属性。例如：
var a=getElementById("idValue");

a.propertyName="propertyValue"; //为a对象添加属性
2）标记对象的所属类

在html文档中每出现一个标记就相当于为JavaScript创建了一个相应的对象，这些对象对应的类名一般与标记名一致，但第一个字母必须大写。

如<body>、<p>、<div>标记分别为Body、P、Div类的对象

例外的标记有：

Anchor 锚或超链接<a>对象的类名

Image 嵌入图像<img>对象的类名

TableRow 表格行标记<tr>对象的类名

TableCell 表格单元格标记<td>对象的类名

Input text文本框、Input password密码框、Input hidden隐藏域、Input checkbox选择框、Input radio单选框、Input file文件选择框、Input reset重置按钮、Input submit提交按钮、Input button 按钮对象的类名。

用createElement("标记名")可创建新标记对象，也可直接使用类名创建标记对象。例如：

var div=new Div(); //创建一个空<div></div>标记对象

varimg=new Image(); //创建一个空<img />嵌入图像标记对象

然后可以通过直接赋值或调用setAttribute()方法为标记对象添加设置各种属性或文本内容。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航