第十章 DOM
2015-07-08 22:37:44 59 举报AI智能生成
登录查看完整内容
第十章介绍了DOM（文档对象模型），它是用于表示和操作HTML和XML文档的一种编程接口。DOM将文档结构化为一个由节点和对象组成的树形结构，使开发者能够通过编程语言对文档的内容、结构和样式进行精确的控制。通过DOM，开发者可以轻松地获取、修改和添加文档的元素、属性和文本内容，从而实现动态的网页效果和交互功能。DOM还提供了丰富的API和事件处理机制，使开发者能够响应用户的操作和交互，实现更加灵活和交互性的网页应用。总之，DOM是Web开发中不可或缺的工具，它为开发者提供了一种高效、灵活和强大的方式来操作和管理HTML和XML文档。
作者其他创作
大纲/内容
DOM
DOM描述
文档对象模型，针对HTML/XML文档的一个API
描绘一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分
关于节点
常用节点类型
元素节点 * 文本节点 * 注释节点
使用nodeName 和 nodeType属性，可用于检测所属节点类型
节点关系
每个节点都有childNodes属性(子节点)，保存一个NodeList对象
每个节点都有parentNode属性(父节点)
节点之间可通过previousSibling和nextSibling访问
操作节点的方法
appendChild()
向childNodes列表的末尾添加一个节点
向指定位置添加节点
replaceChild()
一个参数，是直接移除节点
cloneNode()
cloneNode()或cloneNode(false) 浅复制节点(不包含子节点)
cloneNode(true) 深复制节点(复制节点及其子节点，但不复制事件处理程序(除IE))
Document文档
document对象
是HTMLDocument的一个实例，表示整个HTML页面
是window对象的一个属性，可作为全局对象访问
document节点属性
nodeType：9
nodeName：#document
nodeValue：null
parentNode：null
访问子节点的方式和属性
内置方式：documentElement 和 childNodes
document.body：指向<body元素
document.title：包含<title元素中的文本，显示在浏览器窗口的标题栏或标签页上
与网页请求有关的属性
docuoment.URL 取得页面完整的URL
docuoment.referrer 保存链接到当前页面的那个页面的URL
获取元素的操作
document.getElementById();
获取元素的ID
document.getElementsByTagName();
获取元素的标签名，返回一个集合
document.getElementByName();
返回带有给定name特性的所有元素
document.links
包含文档中所有带href特性的<a元素
DOM一致性检测
document.implementation.hasFeature(DOM功能名称，版本号);
浏览器若支持给定名称和版本的功能，则返回true
Element类型
元素节点
作用
提供对元素标签名、子节点及特性的访问
属性
nodeType：1
nodeName：大写元素标签名
nodeName和tagName属性可访问元素的标签名，且返回的值相同
HTML元素
id
获取元素id
title
获取元素的title说明信息
className
获取元素的class类
操作特性的DOM方法
setAttribute()
设置特性，有两个参数：特性名和值
getAttribute()
获取特性的值，也包含自定义特性的值
removeAttribute()
移除特性
HTML5中规范，自定义特性应加上 data- 前缀以便验证
attributes
仅Element类型有该属性，包含一个NamedNodeMap对象
包含的方法
getNamedItem(name)
removeNamedItem(name)
setNamedItem(node)
item(pos)
返回位于数字pos处的节点
作用：将DOM结构序列化为XML或HTML字符串时，需要遍历元素的特性
创建元素节点
document.createElement(\"元素标签名\")
元素的子节点
childNodes属性包含元素所有的子节点
IE浏览器只可解析出代码的元素子节点；其他浏览器可以解析出元素子节点、文本节点、注释节点等
创建表格
为table元素添加方法/属性
caption
保存对caption元素的指针
tBodies
是一个tbody元素的HTMLCollection集合
tFoot
保存对tfoot元素的指针
tHead
保存对thead元素的指针
rows
是一个表格中所有行的HTMLCollection集合
createTHead()
创建thead元素
createTFoot()
创建tfoot元素
createCaption()
创建caption元素
deleteTHead()
删除thead元素
deleteTFoot()
删除tfoot元素
deleteCaption()
删除caption元素
deleteRow(pos)
删除指定位置的行
insertRow(pos)
向rows集合的指定位置插入一行
为tbody元素添加方法/属性
保存tbody元素中行的HTMLCollection
deteleRow(pos)
为tr元素添加方法/属性
cells
保存tr元素中单元格的HTMLCollection
deleteCell(pos)
删除指定位置的单元格
insertCell(pos)
向cells集合中的指定位置插入一个单元格
Text类型
文本节点
nodeType：3
nodeName：#text
nodeValue：节点包含的文本
parentNode： Element
操作文本的方法
appendData(text)
将text添加到节点末尾
从offset指定位置删除count个字符
在offset指定位置插入text
用text替换从offset指定位置开始到offset+count为止处的文本
splitText(offset)
从offset指定位置将当前文本分成两个文本节点
提取从offset指定位置开始到offset+count为止处的字符
length属性
保存节点中字符的数目
创建文本节点
document.createTextNode()
Comment类型
注释节点
nodeType：8
nodeName：#comment
nodeValue：注释的内容
parentNode：Document/Element
创建注释节点
document.createComment()
CDATASection类型
针对基于XML的文档，表示CDATA区域
节点特征
nodeType：4
nodeName：#cdata-section
nodeValue：CDATA区域中的内容
创建CDATA区域
document.createCDataSection()
只兼容标准浏览器
DocumentType类型
包含与文档的声明(doctype)有关的所有信息
nodeType：10
nodeName：doctype的名称
parentNode：Document
DocumentFragment类型
文档片段
一种\"轻量级\"的文档，可以包含和控制节点，不会占用额外的资源
nodeType：11
nodeName：#document-fragment
parentNode ： null
创建文档片段
document.createDocumentFragment()
DOM操作技术
动态脚本
插入外部js文件
直接插入js代码
动态样式
加载外部样式
嵌入式样式
0 条评论
回复 删除
下一页
