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

原创 2016年08月31日 15:36:00

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)

相关文章推荐

javascript高级程序设计读书笔记--DOM总结

1. node类型 nodeType———-常用noode类型—— Node.ELEMENT_NODE(1) 元素节点 Node.ATTRIBUTE_NODE(2) 属性节点 Node.TEXT_...

JavaScript高级程序设计 DOM事件处理 读书笔记

1.IE 不支持事件的捕获。 2.事件捕获阶段不触发事件。 3.冒泡阶段触发事件。 4.html中处理事件 (1) (2)function show(){ alert('test');   }  ...

JavaScript DOM高级程序设计笔记__(一)

第一章 遵循最佳实践 1.1不唐突和渐进增强   不唐突:         a.你的脚本对用户来说必须是不唐突的,即消除了不必要的行为和令人讨厌的功能.          ...

《JavaScript高级程序设计》学习笔记——DOM

第十章 DOM DOM是针对XML和HTML文档的一个API:即规定了实现文本节点操控的属性、方法,具体实现由各自浏览器实现。 1. 节点层次 1) 文档节点:document,每个文档的根节点...

JavaScript DOM高级程序设计笔记__(二)----第四章 响应用户操作和事件

序言     事件就是操作检测与脚本执行的组合, 或者给予检测到的操作类型在某个对象上调用监听器. 术语     事件: onclick只是一个对象的属性,而不是一个事件,只是通过它可以为DOM...
  • SyKent
  • SyKent
  • 2012年08月16日 22:57
  • 2025

《Javascript高级程序设计》DOM扩展

DOM

JavaScript高级程序设计之DOM 扩展之专有扩展之文档模式第11.4.1讲

虽然所有浏览器开发商都知晓坚持标准的重要性,但在发现某项功能缺失时,这些开发商都会一如 既往地向DOM 中添加专有扩展,以弥补功能上的不足。表面上看,这种各行其事的做法似乎不太好, 但实际上专有扩...

JavaScript高级程序设计之DOM之节点层次之Node类型第10.1.1讲

DOM(文档对象模型)是针对HTML 和XML 文档的一个API(应用程序编程接口)。DOM 描 绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。DOM 脱胎于 Netscape ...

JavaScript高级程序设计之DOM 扩展之专有扩展之contains()方法第11.4.3讲

在实际开发中,经常需要知道某个节点是不是另一个节点的后代。IE 为此率先引入了contains() 方法,以便不通过在DOM 文档树中查找即可获得这个信息。调用contains()方法的应该是祖先节...

JavaScript高级程序设计之DOM 扩展之专有扩展之插入文本第11.4.4讲

前面介绍过,IE 原来专有的插入标记的属性innerHTML 和outerHTML 已经被HTML5 纳入规范。 但另外两个插入文本的专有属性则没有这么好的运气。这两个没有被HTML5 看中的属性是...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DOM---JavaScript高级程序设计的笔记
举报原因:
原因补充:

(最多只允许输入30个字)