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

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

@(JavaScript)[学习笔记]

---

目录

• JavaScript高程学习笔记之DOM(10,11,12)
  • 1. DOM
    • 1.1 节点层次
      • 1.1.1 Node类型
      • 1.1.2 Document类型
      • 1.1.3 Element类型
      • 1.1.4 Text类型
      • 1.1.5 Comment类型
      • 1.1.6 CDATASection类型
      • 1.1.7 DocumentType类型 略
      • 1.1.8 DocumentFragment类型
      • 1.1.9 Attr类型
    • 1.2 DOM操作技术
      • 1.2.1 动态脚本
      • 1.2.2 动态样式
      • 1.2.3 操作表格
      • 1.2.4 使用NodeList 略
  • 2. DOM扩展
    • 2.1 选择符API
      • 2.1.1 querySelector()方法
      • 2.1.2 querySelectorAll()方法
      • 2.1.3 matchesSelector()方法
    • 1.2 元素遍历 略
    • 2.3 HTML5
      • 2.3.1 与类相关的扩充
      • 2.3.2 焦点管理
      • 2.3.3 HTMLDocument的变化
      • 2.3.4 字符集属性
      • 2.3.5 自定义数据属性
      • 2.3.6 插入标记
      • 2.3.7 scrollIntoView()方法
    • 2.4 专有扩展
      • 2.4.1 文档模式
      • 2.4.2 children属性 略
      • 2.4.3 contains()方法
      • 2.4.4 插入文本
      • 2.4.5 滚动 略
  • 3 DOM2和DOM3 略

---

由于已经学习过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 略

---

思维导图