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高级程序设计(读书笔记)(一)

JavaScript高级程序设计(JS部分知识汇总)本笔记汇总了作者认为“JavaScript高级程序设计”这本书的前七章知识重点,仅供参考。第一章 JavaScript简介JavaScript发...
  • hc1025808587
  • hc1025808587
  • 2016年05月23日 22:43
  • 9014

《JavaScript高级程序设计(第三版)》读书笔记 (一)

《JavaScript高级程序设计(第三版)》读书笔记 本文内容是关于《JavaScriptt高级程序设计(第三版)》的读书笔记,而且只是提取个人认为每个章节比较重要或者需要注意的知识点。   ...
  • liaobuqidelin
  • liaobuqidelin
  • 2017年03月10日 20:24
  • 124

JS高级程序设计读书笔记(第一章到第五章)

我现在都到js高级程序设计最难的章节,第六章,对象,虽然有人推荐不用全部读完,但我还是完整的读一遍吧,一遍可以敲代码一边看书理解加百度,我认为这种方式很好,可以加深理解增强印象,这是我觉得这本书比JS...
  • didiaidada
  • didiaidada
  • 2015年09月07日 16:28
  • 851

JavaScript高级程序设计(读书笔记)(七)

本笔记汇总了作者认为“JavaScript高级程序设计”这本书的前七章知识重点,仅供参考。 第七章 函数表达式 小结: 在JavaScript编程中,函数表达式是一种非常有用的技术...
  • hc1025808587
  • hc1025808587
  • 2016年06月13日 16:06
  • 6699

JavaScript高级程序设计(第3版)第八章读书笔记

第八章 BOM 1. BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象由双重较色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript...
  • lysunnyrain
  • lysunnyrain
  • 2016年03月01日 21:51
  • 827

JavaScript高级程序设计(读书笔记)(五)

本笔记汇总了作者认为“JavaScript高级程序设计”这本书的前七章知识重点,仅供参考。 第五章 引用类型 小结: 对象在JavaScript中被称为引用类型的值,而且有一些...
  • hc1025808587
  • hc1025808587
  • 2016年05月29日 17:21
  • 6165

《JavaScript高级程序设计 第三版》学习笔记 (三)引用类型详解

2014.8.28一、引用类型 1.ECMAScript从技术上讲是一门面向对象语言,但它不具备传统的面向对象语言所支持的类和接口等基本结构。js中的对象,是某个特定引用类型的实例。新对象通过new...
  • lbxx1984
  • lbxx1984
  • 2014年08月28日 16:36
  • 780

javascript高级程序设计读书笔记——事件总结

第13章 事件 1.1 事件冒泡     事件开始的时候从最具体的元素接收,然后逐级向上传播到较为不具体的节点。 1.2 事件捕获     事件捕获与冒泡相反,首先由不具体的节点接收,最后...
  • yinkaihui
  • yinkaihui
  • 2016年08月16日 00:34
  • 861

JavaScript高级程序设计知识点汇总

前七章读书笔记详细介绍了原生JavaScript的基于ES5的全部知识点,本篇文章展示了本人绘制的后面章节内容的百度脑图,以便需要回顾知识点时能够作为一个索引,仅供参考。JavaScript相关技术B...
  • hc1025808587
  • hc1025808587
  • 2016年06月30日 11:01
  • 818

JavaScript高级程序设计学习笔记(1-4)

第一章一个完整的JavaScript应该由下列三个不同部分组成:- ECMAScript:规定了语法、类型、语句、关键字、保留字、操作符、对象 - DOM:针对XML但经过扩展用于HTML的应用程序编...
  • cheneychoi
  • cheneychoi
  • 2016年03月22日 16:45
  • 1353
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DOM---JavaScript高级程序设计的笔记
举报原因:
原因补充:

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