DOM(文档对象模型document object model):总结自红宝书
什么是DOM?
Dom是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树,允许开发人员添加、移动和修改页面的某一个部分。
节点层次
1.DOM可以将任何HTML描绘成一个由多层节点构成的元素。节点分为几种不同的类型,每种类型分别表示文档中不同的信息及标记。每个节点都拥有各自的特点、数据和方法,另外也与其他节点存在某种关系。节点之间的关系构成了层次,而所有页面标记则表现为一个特定节点为根节点的树形结构
2.根节点(文档节点)即,html元素,每个文档只存在一个文档元素,其他元素都包含在文档元素中
节点类型有很多种,总共有12种节点
NODE类型
1.DOM1定义了一个node接口,该接口将由DOM中的所有节点类型实现。这个Node接口在Javascript中是作为Node类型实现的,除了IE以外,在其他的浏览器中都可以访问到这个类型。JavaScript中的所有节点类型都继承自Node类型,因此所有节点类型都共享是相同的基本属性和方法
每个节点都有一个nodeType类型,用于表明节点的类型。
2.节点类型
someNode.nodeType==1 //适用于所有浏览器,1为元素标签的数值
nodeName 节点名称
nodeValue 节点的值
ChildNodes属性
每个节点都有一个childNodes属性,其中保存着一个nodeList对象。NodeList是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点。请注意,虽然可以通过方括号语法来访问NodeList的值,而且这个对象也有length属性,但它并不是Array的实例。NodeList对象的独特之处在于,它实际上是基于DOM结构动态执行查询的结果,因此DOM结构变化能够反映在NodeList对象中。
1.访问NodeList中的节点
通过方括号访问保存在NodeList中的节点
var xx=xxx.childNodes[0]
通过item( ) 方法访问
var xx=xxx.childNodes.item(1)
2.NodeList转化成数组
var ArrayOfNodes=Array.prototype.slice.call(someNode.childNodes,0);
!!注意:这种方法只在IE8以及之前版本中无效
想要在上面版本的浏览器NodeList转化为数组,必须手动枚举所有成员
结合上面的方法,适合所有浏览器的代码
function converToArray(nodes){
var array=null;
try{
array=Array.proptype.slice.call(nodes,0)
}catch(ex)
{
array=new Array();
for(var i=0,;len=nodes.length;i<len;i++)
{
array.push(nodes[i]);
}
}
}
parentNode属性(父节点):指向文档树中的父节点,childNodes列表中的所有节点都具有相同的父节点
previousSibling属性:指向兄弟节点的上一个节点。第一个节点为null
nextSibling属性:指向兄弟节点的下一个节点。最后一个节点为null
firstChild:第一个子节点
lastChild:最后一个子节点
hasChildNodes():查询节点是否有子节点
ownerDocument:指向表示整个文档的文档节点
操作节点
1.appendChild():用于向childNodes列表的末尾添加一个节点
2.insertBefore()添加在childNodes列表中某个特定的位置上插入在这个节点之前,整个方法接受两个参数要插入的节点和作为参照的节点。
3.repalceChild()方法:用一个新的节点替换某个节点的位置。该方法接受2个参数,要插入的节点和要替换的节点。
4.removeChild()方法:移除文档中的节点
5.cloneChild()方法:克隆文档中的节点,这个方法接受的参数为ture时,进行深复制,复制节点及整个节点的子文档树,为false时,只复制节点,不复制子节点
Document类型
JavaScript通过Document类型表示文档,在浏览器中,document对象是HTMLDocument(继承自Document类型)的一个实例,代表整个HTML页面。而且,document对象是window对象的一个属性,因此可以将其作为全局对象来访问。
documentElement属性:该属性始终指向HTML页面中的<html>元素
document.body属性:指向html中的body节点
document.title属性:这个属性可以取得当前页面的标题,也可以改页面的标题
与网页请求有关的3个属性,这些信息都来自于http请求头
document.URL:取得网页完整的URL,
document.domain:取得网页的域名
document.referrer:取得来源页面的URL,如果没有来源页面,则包含空字符串
这三个属性中只有domain可以设置
由于跨域安全限制,来自不同子域的页面无法通过JavaScript通信。而通过将每个页面的document.domain设置相同的值,这些页面就可以相互访问对方包含的JavaScript对象。
浏览器对domain属性还有一个限制,即如果域名一开始是松散,那么久不能将它设置为‘紧绷的’
//假设页面来自于p2p.wrox.com域
document.domain="wrox.com" 松散的(成功)
document.domain="p2p.wrox.com" 紧绷的(出错)
查找元素
document.getElementById():找到相应ID的元素
document.getElementTagName():取得相应标签名的元素集合类似于NodeList,在HTML文档返回一个HTMLCollection对象。
HTMLCollection对象还有个办法叫做namedItem(),使用这个方法可以通过元素的name特性取得集合中的项。
例如
<img src=" xxx.png" name="xxx" >
var images= document.getElementByTagName("img")
var xx==images.namedItem("xxx")
也可以这样访问
var xx=images.namedItem(“xxx”)
取得文档中所有元素document.getElementByTagName("*")
document.getElementByName(): 返回特定name特性的所有元素,HTMLDocument类型特有
特殊集合:
document.anchors,包含文档中所有带name特性的<a>元素;
document.forms,包含文档中所有<from>元素
document.images,包含文档中所有的<img>元素
document.links,包含文档中所有带href特性的<a>元素
文档写入
document.write():在页面加载过程中,将文本写入文档中。
!!注意:如果文档加载结束后再调用document.write(),那么输出的内容将会重写整个页面。
document.writeln():跟write()作用一样,不过会在写入字符串时后面加上\n
document.open( ):用于打开网页的输出流
document.write( ):用于关闭网页的输出流
Element类型
element.tagName:指向元素的标签名
HTML元素
所有HTML元素都由HTMLElement类型表示,这些类型直接继承自Element并添加了一些属性(id,titile,lang,dir,classname)。
取得特性
getAttribute():取得特性值,不存在则返回null
setAttribute():设置特性值,接受2个参数:要设置的特姓名和值
removeAttribute():移除特性
attributes属性
Element类型是使用attributes属性的唯一一个DOM节点类型
属性包含一个NameNodeMap与NodeList类似,也是一个"动态"的集合。
NameNodeMap对象拥有的方法
getNamedItem(name):返回nodeName属性等于name的节点
removeNamedItem(name):从列表中移除nodeName属性等于name的节点
setNameItem(node):向列表中添加节点,以节点的nodeName属性为索引
item(pos):返回于数字pos位置处的节点
获取特性的值
var id=element.attributes.getNamedItem("id").nodeValue
使用方括号语法通过特性名称访问方式节点的简写方式
var id=element.attributes["id"].nodeValue
创建元素
使用document.createElement()方法创建新元素,只接受一个参数,接收的参数为要创建元素的标签名。
创建新元素之后可以为元素添加属性:var xx.id="xxx"。也可以指定完整的HTML标签来解决
Text类型
document.createElement( ):创建新文本节点
element.normalize():合并相邻的文本节点,当在含文本节点的父元素调用时,合并所有的文本节点
splitText( ):将文本节点分成两个文本节点,原来的文本节点将包含从开始到指定位置之前的内容,新文本节点将包含剩下的文本
DocumentFragment类型
DocumentFragment类型在文档中没有对应的标记。DOM规定文档片段是一种"轻量级"的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源。
document.createDocumentFragment():创建文档片段,保存将来可能会添加到文档中的节点
Attr类型 元素的特性//比较少用到
动态脚本
function loadScript(){
var script=document.createElement("script")
script.text="text/javascript"
script.src="xxx.js"
document.body.appendchild(script)
}
动态样式
function loadcss(){
var link=document.createElement("link")
link.rel="stylesheet"
link.type="text/css"
link.href="xxx.css"
var head=document.getElementByTagName("head")
head.appendChild(link)
}
操作表格
rows:保存着<tbody>元素中行的HTMLCollection
deleteRow(pos):删除指定位置的行
insertRow(pos):向rows集合中的指定位置插入一行,返回对新插入行的引用
cells:保存着<tr>元素中单元格的HTMLCollection
deteCell(pos):删除指定位置的单元格
insertCell(pos):向cells集合中的指定位置插入一个单元格,返回对新插入单元格的引用
阅读更多- DOM (文档对象模型(Document Object Model))
- DOM 文档对象模型 DOM(Document Object Model)
- JavaScript笔记03——文档对象模型(Document Object Model,简称DOM):获取HTML元素、操作HTML元素
- DOM (文档对象模型(Document Object Model))
- DOM(Document Object Model,文档对象模型)
- DOM---文档对象模型(Document Object Model,简称DOM)
- 文档对象模型DOM――Document Object Model
- 文档对象模型(Document Object Model, DOM)简介
- DOM (文档对象模型(Document Object Model))
- DOM:Document Object Model 文档对象模型
- HTML DOM(即Document Object Model文档对象模型 )(节点概念、获取节点、节点的属性)
- DOM(Document Object Module,文档对象模型)为JavaScript提供完整,全面控制网页结构与内容的对象
- (3)选择元素——(2)文档对象模型(The Document Object Model)
- HTML DOM(document object model文档对象模型)
- 文档对象模型DOM(Document Object Module)
- 第10章 文档对象模型DOM 10.2 Document类型
- DOM文档对象模型——学习总结
- XML 文档对象模型----加载和使用XmlDocument (w3c DOM)
- 什么是DOM(Document Object Model)文档对象模型
- JS文档DOM对象模型总结