关闭

DOM---JavaScript高级程序设计的笔记

标签: javascriptdom
20人阅读 评论(0) 收藏 举报
分类:

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)
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:43次
    • 积分:20
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档