JavaScript(三)

基于《JavaScript高级程序设计》


DOM 文档对象模型

  • 描绘一个层次化的节点数

  • 针对HTML/XML的API

  1. 节点层次

    i. Node类型：所有节点类型继承自Node类型，由12个数值常量表示

    节点关系：

    • childNodes/parentNode 属性，前者维护一个NodeList类数组对象，firstchild/lastchild。对应还有hasChildNodes()方法

    • previousSibling/nextSibling

    节点操作：

    • appendChild()

    • insertBefore(待插入节点, 参照节点) ：被插入的节点会被放置在参照节点前面，成为其previousSibling

    • replaceChild(待插入节点, 被替换节点)

    • removeChild(要移除的节点)

    • cloneChild(true/false) : true为深复制，不光是副本还包含其整个子节点树，false为浅复制，只有该节点本身，类似于孤儿。

    ii. Document类型 : document对象在浏览器中是HTMLDocument(继承自Document类型)的一个实例，表示整个HTML页面。

    • document.documentElement : 始终指向<html>元素
    • document.body : 取得对<body>的引用。
    • 涉及网络请求的：URL / domain / referrer

    查找元素：

    • getElementById()

    • getElementsByTagName() 参数为元素的标签名，返回包含0或多个元素的HTMLCollection对象，然后可用索引进行访问。也可用..item(n) / namedItem(str)进行访问。

    • getElementsByName() 返回带有给定name属性的所有元素

    文档写入：

    • write() / writeln() 后者在写入输出流的字符串末尾 + “\n”

    • / open() / close() 打开关闭网页的输出流

    iii. Element类型 最基本的元素类型，所有HTML元素都由HTMLElement类型表示（主要的属性是id, title, className）

    • .nodeName 和 .tagName都为元素的标签名

    • getAttribute() 取得特性(不区分大小写)，也可获得自定义特性，但是不会被添加为元素的特性。

    • setAttribute() 设置特性

    • attributes 属性 包含NamedNodeMap，元素的每一个特性都由一个Attr节点表示，每个节点都保存在NamedNodeMap对象中。

    有getNamedItem(name) / setNamedItem(node) / removeNamedItem(name) / item(pos) 取得的是节点，通过.nodeValue获得值

    创建元素：

    document.createElement(元素的标签名/完整的元素标签)

    iv. Text类型：

    • nodeValue的值为节点所包含的文本，没有子节点

    • 拥有一系列方法用于对文本的操作包括appendData(text) / insertData(offset, text) / splitText(offset) substringData(offset, count)

    v. Comment模型（注释）：

    与Text类型继承自相同的积累，除了splitText其它方法都有。

  1. DOM操作技术：

    i. 动态脚本：

    1
    2
    3
    4
    5
    6
    7
    // 在最后一行代码将元素添加到文档树之前是不会加载脚本的
    function loadScript(url){
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = url;
        document.body.appendChild(script);
    }

DOM 扩展

  1. 选择符(Seletors) API ： 让浏览器原生支持CSS

    • querySelector(CSS选择符) 通过document类型调用是在整个文档元素范围内查询，而通过Element类型调用则只是在其后代元素中查找。

    • querySelectorAll(CSS选择符) : 返回一个nodeList实例。

  1. 元素遍历 ：

    • childElementCount 返回子元素（不包括文本节点和注释）
    • firstElementChild / lastElementChild
    • previousElementSibling / nextElementSibling

  2. HTML5 :

    • getElementsByClassName(一或多个类名字符串 空格隔开)

    • classList HTML5为每个元素添加的属性，是 DOMTokenList的实例，后者有length属性，还可用item()方法或者方括号语法访问每个元素。

      • add(class_value) / remove(c_v) / contains(c_v)
      • toggle(c_v) 如果存在则删除，不存在则添加

    • 焦点：document.activeElement会引用DOM中当前获得焦点的元素

      • 元素获得焦点的方式有页面加载，用户输入，调用focus()方法。

      • document.hasFocus() 判断文档是否获得了焦点

    • HTMLDocument新增 (document. 调用)

      • readyState属性 可能值：loading / complete

      • compatMode 标准模式：CSS1Compat 混杂模式：BackCompat

      • head 直接引用文档的元素

    • 自定义数据类型：HTML5规定可以为元素添加非标准属性，但要以”data-xxx”格式，然后就可以通过元素的dataset属性来访问，其属性值是DOMStringMap实例，而映射中的属性名则去掉data前缀直接为xxx。

    • innerHTML 读模式下会返回调用元素的所有子节点对应的HTML标记，写模式下，会根据指定的值创建新的DOM树，然后替换或者添加。通过其插入<script>元素不会执行其中的脚本，因为<script>被认为是无作用域的，而必须开头是一个有作用域的元素，如文本节点(事后用fisrtChild移除)

    • outerHTML 读模式下会返回调用元素及其所有子节点的HTML标记，写模式是替换整个DOM树。

    • scrollIntoView(true/false) true或者不传，元素顶部与视口尽可能平齐，false调用元素尽可能全部出现在视口中。

DOM2 和 DOM3


  1. DOM变化：

    • 可以用 document.implementation.hasFeature(module_name, version) 检测浏览器是否支持指定DOM模块

    • XML命名空间 xmlns特性指定

    • 在Node类型中也包含下面特定于命名空间的属性：

      • localName / namespaceURI / prefix

  1. 样式:

    任何支持style特性的HTML元素在js中都有对应的style属性，是CSSStyleDeclaration的实例。对于CSS属性名需要转化为驼峰大小写形式。

    style包含下列属性和方法:

    • cssText 读取模式下返回浏览器对style特性的CSS代码内部表示，写入模式下赋值直接重写整个style特性。

    • length 和 item()方法

    • getPropertyValue(PropertyName)

    • removeProperty(PropertyName)

    • 获取计算样式(即在自身嵌入和外部引入层叠后的效果) document.defaultView.getComputedStyle(要计算的元素名，伪元素字符串没有则null)

    • 元素大小：

      • 偏移量

      • 客户区大小

      • 滚动大小

      • 元素大小

  2. 遍历：

    深度优先，遍历以给定节点为根，不可能向上遍历。

    i. NodeIterator : document.createNodeIterator()创建其新实例，接收四个参数

    • root 搜索起点
    • whatToShow 位掩码，表示访问哪些节点
    • filter NodeFilter对象，或者类似节点过滤器的自定义函数或者null
    • 是否扩展实体引用，没什么用，一般直接写false

    两个主要方法：nextNode() 第一次调用指向root , previousNode()

    ii. TreeWalker 由document.createTreeWalker(参数上面相同) 提供下列方法用于遍历DOM结构：

    • parentNode()
    • firstChild()/lastChild()
    • nextSibling()/previousSibling()

  3. 范围：

    i. DOM中的范围: 由document.createRange()创建

    简单选择通过selectNode()/selectNodeContents()，接收参数为一个DOM节点，通过其中的信息填充范围。后者只包含选择节点的子节点。

    • setStart()/setEnd()

    • deleteContents()/extractContents()/cloneContents()

    • range.cloneRange() / range.detach()