JavaScript高程学习笔记之DOM(10,11,12)

JavaScript高程学习笔记之DOM(10,11,12)

@(JavaScript)[学习笔记]

---

[TOC]

---

因为已经学习过JavaScript编程艺术，这里的DOM学习将会简化 因为已经学习过JavaScript编程艺术，这里的DOM学习将会简化 因为已经学习过JavaScript编程艺术，这里的DOM学习将会简化

1. DOM

1.1 节点层次

文档元素：html元素

1.1.1 Node类型

JavaScript全部节点类型都继承Node类型。每一个节点有个nodeType属性，有12个常量值表示 为保证兼容性要使用数值而不是字符串

1.1.2 Document类型

URL：完整的URL domain：域名 referrer：来源页域名 getElementById()方法、getElemnetByTagName()方法和getElementByName()方法 特殊集合 document.anchors document.applets document.forms document.images document.links document.implementation.hasFeature()方法 文档写入

1.1.3 Element类型

1.1.4 Text类型

document.creatTextNode() normalize()合并相邻文本节点 splitText()分割文本节点

1.1.5 Comment类型

documen.creatComment()建立注释

1.1.6 CDATASection类型

document.creatCDataSection()建立CDATA区域

1.1.7 DocumentType类型 略

1.1.8 DocumentFragment类型

轻量级文档 用document.creatDocumentFragment()方法建立文档片断

1.1.9 Attr类型

元素的特性

1.2 DOM操做技术

1.2.1 动态脚本

内部；外部；DOM建立

1.2.2 动态样式

内部；外部；DOM建立

1.2.3 操做表格

HTML DOM建立表格

1.2.4 使用NodeList 略

---

2. DOM扩展

• 理解Selectors API
• 使用HTML5 DOM扩展
• 了解专有的DOM扩展

2.1 选择符API

2.1.1 querySelector()方法

接收一个CSS选择符，返回与该模式匹配的第一个元素，若是没有找到匹配的元素，返回null 经过Document类型调用，会在文档元素范围内查找匹配元素 经过Element类型调用，会在该元素后代元素的范围内查找匹配的元素

2.1.2 querySelectorAll()方法

接收CSS选择符，返回的是全部的匹配元素而不单单是一个元素。该方法返回的是一个NodeList的实例

2.1.3 matchesSelector()方法

接收CSS选择符，若是调用元素与该选择符匹，返回true，不然返回false

1.2 元素遍历 略

2.3 HTML5

2.3.1 与类相关的扩充

getElementByClassName()方法 classList属性 HTML5 支持classList属性的浏览器有Firefox3.6+和Chrome

2.3.2 焦点管理

document.activeElement属性 获取焦点的方法：页面加载、用户输入、代码调用focus()方法 document.hasFocus()方法

2.3.3 HTMLDocument的变化

readyState属性、compatMode属性和head属性

2.3.4 字符集属性

charset属性、defaultCharset属性

2.3.5 自定义数据属性

前缀data- dataset属性访问

2.3.6 插入标记

innerHTML属性： 在读模式下，返回与调用元素的全部子节点对应的HTML标记 在写模式下，根据指定的值建立新的DOM树，用这个DOM树替换调用元素原先的全部子节点 outerHTML属性： 在读模式下，返回调用它的元素及全部子节点的HTML标签 在写模式下，根据指定的HTML字符串建立新的DOM树，而后用这个DOM子树彻底替换调用元素 insertAdjacentHTML()方法 #####2.3.7 scrollIntoView()方法 经过滚动浏览器窗口或某个容器元素，调用元素就能够出如今视口中

2.4 专有扩展

2.4.1 文档模式

文档模式决定你可使用哪一个级别的CSS，能够在JavaScript中使用哪些API，以及如何对待文档类型

2.4.2 children属性 略

2.4.3 contains()方法

肯定某个节点是否是另外一个节点的后代

2.4.4 插入文本

innerText属性和outerText属性

2.4.5 滚动 略

---

3 DOM2和DOM3 略

---

思惟导图