JavaScript DOM常见知识点总结

理论知识回顾

DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。DOM脱胎于Netscape及微软公司创始的DHTML（动态HTML），但现在它已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。

DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息及（或）标记。每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构

    
        
    
    
        
Hello World!
    

文档节点是每个文档的根节点。在这个例子中，文档节点只有一个子节点，即元素，我们称之为文档元素。文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。在HTML页面中，文档元素始终都是元素。在XML中，没有预定义的元素，因此任何元素都可能成为文档元素。

每一段标记都可以通过树中的一个节点来表示：HTML元素通过元素节点表示，特性（attribute）通过特性节点表示，文档类型通过文档类型节点表示，而注释则通过注释节点表示。总共有12种节点类型，这些类型都继承自一个基类型。

常见节点类型

• Node类型
  DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现。每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在Node类型中定义的下列12个数值常量来表示。

//   确定节点类型
if (someNode.nodeType == Node.ELEMENT_NODE){   //在IE中无效
    alert("Node is an element.");
}

这个例子比较了someNode.nodeType与Node.ELEMENT_NODE常量。如果二者相等，则意味着someNode确实是一个元素。然而，由于IE没有公开Node类型的构造函数，因此上面的代码在IE中会导致错误。为了确保跨浏览器兼容，最好还是将nodeType属性与数字值进行比较，如下所示

if (someNode.nodeType == 1){    //适用于所有浏览器
    alert("Node is an element.");
}

节点关系

文档中所有的节点之间都存在这样或那样的关系。节点间的各种关系可以用传统的家族关系来描述，相当于把文档树比喻成家谱。在HTML中，可以将元素看成是元素的子元素；相应地，也就可以将元素看成是元素的父元素。而元素，则可以看成是元素的同胞元素，因为它们都是同一个父元素的直接子元素。

每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。请注意，虽然可以通过方括号语法来访问NodeList的值，而且这个对象也有length属性，但它并不是Array的实例。NodeList对象的独特之处在于，它实际上是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反映在NodeList对象中。我们常说，NodeList是有生命、有呼吸的对象，而不是在我们第一次访问它们的某个瞬间拍摄下来的一张快照。

• Document类型
  JavaScript通过Document类型表示文档。在浏览器中，document对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面。而且，document对象是window对象的一个属性，因此可以将其作为全局对象来访问。
• Element类型
  Element类型就要算是Web编程中最常用的类型了。Element类型用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问。
• Text类型
  文本节点由Text类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML字符，但不能包含HTML代码。

使用示例

    
    
    
    
    



   
what to buy
   
don't forget to buy this stuff.
   

       
a tin of beans
       
cheese
       
Milk
   
   

        
我是要被删除的节点
   
   删除节点
   

// 根据id获取元素
var html = document.getElementById("purchases");
// 根据元素类型获取元素 接受一个参数，标签名（div,p..） 返回数组
var li = document.getElementsByTagName("li");
// 通过class类名访问元素 返回一个具有相同类名的元素数组
var className = document.getElementsByClassName("sale");
/**
 * 使用getElementsByClassName这个方法还可以查找那些带有多个类名的元素，只要在
 * 字符串参数中用空格分隔类名即可
 */
var classA = document.getElementsByClassName("sale important");
/**
 * 想知道id为purchases的元素中有多少个包含sale类的元素 
 * 
 */
var shopping = document.getElementById("purchases");
var sales = shopping.getElementsByClassName("sale");

/** 
 * 总结：
 * 1、一份文档就是一颗节点数
 * 2、节点分为不同的类型：元素节点（、
）、属性节点(几乎所有元素都有一个title属性)和文本节点等。
 * 3、每个节点都是一个对象
 * 
 */

// 获取和设置属性
/** getAttribute是一个函数，它只有一个参数（查询的属性名字）
 * 
 * getAttribute不属于document对象，所以只能通过元素节点调用
 * 
 */
var paras = document.getElementsByTagName("p");
var title = paras[0].getAttribute("title");

/** 
 * setAttribute
 * 允许我们对属性节点作出修改，与getAttribute一样，只能用于元素节点
 * object.setAttribute(arrtribute,value)
 */
shopping.setAttribute("title", "hello word");
var title1 = shopping.getAttribute("title");

/** 
 * childNodes
 * 用来获取任何一个元素的子元素，它是一个包含这个元素全部子元素的数组
 * element.childNodes
 * 
 * 无论何时何地，只要需要访问childNodes数组的第一个元素，都可以写成firstChild
 * firstChild
 * lastChild
 */
/**
 * nodeType 属性共有12种可取的值。
 * node.nodeType
 * 
 * 元素节点的nodeType是1
 * 属性节点的nodeType是2
 * 文本节点的nodeType是3
 * 
 */
/** 
 * nodeValue
 * 改变文本节点的值
 * node.nodeValue
 */
/**
 * createElement 创建元素节点
 * document.createElement(nodeName)
 * 
 * 创建一个p元素
 * document.createElement("p")
 */
var para = document.createElement("p");
/** 
 * appendChild
 * 插入文档节点
 * parent.appendChild(child);
 */
var testDiv = document.getElementById("testDiv");
testDiv.appendChild(para)
/**
 * createTextNode 创建文本节点
 * document.createTextNode(text);
 */
var txt = document.createTextNode("hello word");
para.appendChild(txt);
/**
 * removeChild 删除节点
 * 
 * node.removeChild(node)
 * 
 * 返回值 被删除的节点
 * 
 */
function remove() {
    var remove = document.getElementById("remove");
    testDiv.removeChild(remove);
}

/**
 * querySelector()方法
 * querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。
 */
console.log(document.querySelector(".sale")) 
console.log(document.querySelector("#testDiv")) 
console.log(document.querySelector("#sale"))  // null

/**
 * querySelectorAll()方法接收的参数与querySelector()方法一样，
 * 都是一个CSS选择符，但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例。
 */
console.log(document.querySelectorAll(".sale"));

GitHub：JavaScript-Demo
参考：

• JavaScript高级程序设计
• JavaScript.DOM编程艺术（第2版）