标签：ora   rem   tor   前端开发   mod   关系   stc   www.   音频   

第1章.基础篇(上)

DOM (Document Object Model) - 文档对象模型

以对象的方式来表示对应的html，它有一系列的规范

i.e. 

在浏览器中，DOM是通过JS实现的。

DOM:

DOM Core：核心结构、API的定义

DOM HTML： 定义HTML如何转化成对象（HTML对应的对象）-- 操作节点

DOM Style：样式转换成对象 -- 操作样式

DOM Event：事件对象的模型 -- 响应用户的操作

文档树

HTML -> DOM树

节点遍历

node.parentNode

  .firstChild

  .lastChild

  .previousSibling

  .nextSibling

  .firstElementChild

  .lastElementChild

  .nextElementSibling

  .previousElementSibling

i.e.

p.parentNode是body

p.firstChild是hello,

p.firstElementChild是span

p.lastElementChild是img

p.lastChild是img

p.previousSibling没有，则返回null

p.nextSibling是div

节点类型：

ELEMENT_NODE：元素节点 （如上body, p, div, span, img）

TEXT_NODE：文本节点（如上hello,, 微专业, mooc）

COMMENT_NODE

DOCUMENT_TYPE_NODE

课堂交流：如何实现浏览器兼容版的element.child

element.children能够获取元素的元素子节点，但是低版本的ie不支持，如何在低版本的ie上兼容类似的功能。

http://www.jianshu.com/p/b7e111015c48

节点操作

Abstract: getElementById, getElementsByClassName, getElementsByTagName, querySelector(All), createElement, innerText, appendChild, insertBefore, removeChild, innerHTML

浏览器读取HTML渲染出页面结构以后，还可以通过JS改变页面的结构

获取节点:

通过节点关系可以获取节点（父子关系、兄弟关系）

缺点：可维护性差，如果一个节点的位置发生了变化，则关系也可能会被打乱

所以，一般使用接口来获取节点（获得的是节点对象：

getElementById：

element = document.getElementById(id)：id在document中是唯一标识

getElementsByTagName：

collection = element.getElementsByTagName(tagName)：通过元素来调用来获取元素内的节点

若tagName为"*", 则会获取指定元素element包含的所有的后代元素节点

注：collection是动态的集合

getElementsByClassName：

collection = element.getElementsByClassName(className)

通过空格分割，可以指定多个类名（无序），获取同时具有多个类名的元素

但是IE 6/7/8不兼容getElementsByClassName

function getElementsByClassName(element, classNames) {
    if (element.getElementsByClassName) {
        // 特性侦测，如果兼容则优先使用W3C规范的方式
        return element.getElementsByClassName(classNames);
    } else {
        var elements = element.getElementsByTagName("*"); // 所有后代元素
        var result = [];
        var element,
            classNameStr,
            flag;
        classNames = classNames.split(‘ ‘);
        for (var i = 0; element = elements[i]; i++) {
            classNameStr = ‘ ‘ + element.className + ‘ ‘;
            flag = true;
            for (var j = 0, className; className = classNames[j]; j++) {
                if (classNameStr.indexOf(‘ ‘ + className + ‘ ‘) == -1) {
                    flag = false;
                    break;
                }
            }
            if (flag) {
                result.push(element);
            }
        }
        return result;
    }
}

querySelector：

element = element.querySelector(selector)

返回第一个符合的元素

querySelectorAll：

list = element.querySelectorAll(selector)

i.e. 

<div id="users">
    <h2>....</h2>
    <ul>
        <li class="user">Satoshi</li>
        <li class="user">春来草青</li>
        <li class="user last">Kash</li>
    </ul>
</div>

var users = document.querySelector(#users");　　// 获取到元素div#users

users.querySelectorAll(".user");　　// 获取到 [ li.user  li.user  li.user.last ]

document.querySelectorAll("#users .user");　　// 获取到同上 [ li.user  li.user  li.user.last ]

创建节点

修改节点

插入节点

删除节点

innerHTML

属性操作

样式操作

事件

数据通信

数据存储

动画

音频与视频

canvas

BOM

表单操作

列表操作

前端开发工程师 - 03.DOM编程艺术 - 第1章.基础篇(上)

标签：ora   rem   tor   前端开发   mod   关系   stc   www.   音频   

原文地址：http://www.cnblogs.com/FudgeBear/p/7464839.html