DOM
IE9以下的所有DOM对象都是以COM对象的形式实现
1.Node类型
1.NodeType属性:
(1) ELEMENT_NODE
(2) ATTRIBUTE_NODE
(3) TEXT_NODE
(4) CDATA_SECTION_NODE
(5) ENTITY_REFERENCE_NODE
(6) ENTITY_NODE
(7) PROCESSING_INSTRUCTION_NODE
(8) COMMENT_NODE
(9) OCUMENT_NODE
(10) DOCUMENT_TYPE_NODE
(11) OCUMENT_FRAGMENT_NODE
(12) NOTATION_NODE
2.nodeName、nodeValue
对于元素节点而言nodeName保存的是标签名,nodeValue则是null
-
3.节点关系
childNodes 属性:保存着类似数组的NodeList对象
NodeList访问:
- someNode.childNodes[0]
- someNode.childNodes.item(1)
- someNode.childNodes.length
装换为数组:
var arrNodes = Array.prototype.slice.call(some.childNodes,0)
- parentNode 属性
- firstChild 属性
- lastChild 属性
- previousSibling 属性
- nextSibling 属性
- ownerDocument 属性
- hasChildNodes() 方法 是否包含子节点,返回布尔值
4.操作节点
- appendChild(new)
- insertBefore(new,old)
- replaceChild(new,old)
- removeChild(old)
- cloneNode() 参数为true,则复制子节点
- normalize() 删除空节点,合并重复文本节点
2.Document 类型
在浏览器中,document对象是HTMLDocuemnt(继承自Document类型)的一个实例,表示整个HTML页面,且是window的属性
1.文档子节点
document.documentElement
document.body
document.doctype
注:document对象是只读,不能增删节点
2.文档信息
title
URL(包含页面完整的URL)
domain (只包含页面域名)
referrer (保存着链接到当前页面的上个页面URL)
注:domain不能设置为URL中不包含域,且改为松散的域后无法再改为具体的域
3.查找元素
document.getElementById()
注:IE7以下若表单元素的name等于查找的id会返回
document.getElementsByTagName()
返回HTMLCollection对象
注:IE将注释节点实现为元素,document.getElementsByTagName(‘*’)会返回注释节点
document.getElementsByName()
返回特定name的元素
使用namedItem(‘name’)值返回第一项
4.特殊合集
这些特殊合集都是HTMLCollection对象
document.anchors (包含文档中所有带name特性的a)
document.forms (包含文档中所有form)
document.images (包含文档中所有images)
document.links (包含文档中所有links)
5.DOM一致性检测
document.implementation属性
提供检测浏览器实现DOM的哪部分
包含hasFeature(‘名称’,‘版本号’)方法,返回布尔值
6.文档写入
write()
writeln()
3.Element 类型
1.HTML元素
每个元素都有以下属性
id、title、lang、dir、className
-
2.取得特性
getAttribute()
与属性访问特性的不同:
- getAttribute()可取得自定义特性
- 取得style和事件时返回字符串,属性访问返回的是对象和函数
3.设置特性
setAttribute(‘name’,’value’)
若无特性则创建,特性会被转换为小写
removeAttribute(‘name’)
IE6不支持
4.attributes属性
该属性包含一个NamedNodeMap对象,拥有下列方法
- getNamedItem(name) 【返回nodeName属性等于name的节点】
- removeNamedItem(name) 【从列表中移出节点】
- setNamedItem(node) 【向列表中添加节点】
- item(pos) 【返回pos位置处的节点】
每个特性节点都有一个名为specified属性,值为true时,为指定特性
4.Text 类型
通过nodeValue 属性或data属性访问Text节点中包含的文本
创建文本节点
document.createTextNode()
规范化文本节点
normalize()
分割文本节点
splitText()
5.Comment类型
注释节点
6.CDATASection类型
7.DocumentType类型
8.Document.Fragment类型
9.Attr 类型
==============================================================================
DOM操作技术
1.动态加载脚本
外部加载脚本
function loadScriptUrl(url){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.body.appendChild(script);
}
内联脚本
function loadScriptUrl(code){
var script = document.createElement('script');
try{
script.appendChild(document.createTextNode(code));
}catch(ex){
script.text = code; //兼容IE(IE将script视为一个特殊的元素,不允许DON访问其子节点)
}
document.body.appendChild(script);
}
2.动态样式
3.操作表格
table属性和方法
caption:
tBodies
tFoot
tHead
createTHead()
createTFoot()
createCaption()
deleteTHead()
deleteTFoot()
deleteCaption()
-
tbody的属性和方法
- rows
- deleteRow(pos)
- insertRow(pos)
- cells
-
deleteCell(pos)
:insertCell(pos)