JavaScript DOM笔记

DOM概念

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。
注意：IE中的多有DOM对象都是以COM对象的形式实现的。
文档：把一个html文件看成是一个文档，由于万物皆对象，所有把这个文档看成是一个对象。
html：展示信息，展示数据的。
xml：侧重于存储数据。
元素element：页面中的所有的标签都是元素，元素都可以看成是对象。
节点node：页面中所有的内容都是节点：标签，属性，文本。
DOM又称为文档树模型

技巧

• 如果是循环的方式添加事件，推荐用命名函数。
• 如果不是循环的方式添加事件，推荐使用匿名函数。

btn.onclick = function() {
    
}

• return false可以阻止a跳转
• 在表单中value和innerText都可修改文本内容。推荐第一种。

事件

事件：触发-响应机制
Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。

事件三要素

• 事件源:触发(被)事件的元素
• 事件类型:事件的触发方式(例如鼠标点击或键盘点击)
• 事件处理程序:事件触发后要执行的代码(函数形式)

节点层次

Node类型

除了IE之外，在其他所有浏览器中都可以访问到这个类型。JavaScript中的所有节点类型都是继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。
每个节点都有一个nodeType属性，用于表明节点的类型。

• Node.ELEMENT_NODE(1)
• Node.ATTRIBUTE_NODE(2)
• Node.TEXT_NODE(3)
• Node.CDATA_SECTION_NODE(4)
• Node.ENTITY_REFERENCE_NODE(5)
• Node.ENTITY_NODE(6)
• Node.PROCESSING_INSTRUCTION_NODE(7)
• Node.COMMENT_NODE(8)
• Node.DOCUMENT_NODE(9)
• Node.DOCUMNET_TYPE_NODE(10)
• Node.DOCUMENT_FRAGMENT_NODE(11)
• Node.DOCUMENT_NOTATION_NODE(12)
  **PS:**为确保跨浏览器兼容，最好还是讲nodeType属性与数字值进行比较。

nodeName和nodeValue属性

对于元素节点，nodeName中保存的始终都是元素的标签名，而nodeValue的值则始终是null。
标签节点的nodeValue为null，属性节点的nodeValue为属性值，文本节点的nodeValue为文本内容。

节点关系

• childNodes属性：返回一个NodeList对象，是一种类数组对象，保存着节点的所有子节点集合。
• parentNode属性：返回指定节点的父节点
• previousSibling属性：返回同级的前一个节点
• nextSibling属性：返回同级的后一个节点
• firstChild属性：返回指定节点的子节点中的第一个
• lastChild属性：返回指定节点的子节点中的最后一个
• **hasChildNodes()**方法：查询该节点是否有子节点，有则true，反之false
• ownerDocument属性：返回整个文档的文档对象

操作节点（重点）

• **appendChild()**方法：在指定节点的childNodes列表的末尾添加一个节点。
  注意：如果传入到appendChild()中的节点已经是文档的一部分，那结果就是将该节点从原来位置转移到新位置。
• **insertBefore()**方法：在某个节点前插入。
  接受两个参数：要插入的节点和作为参照的节点。
  注意：如果参照节点是null，则insertBefore()与appendChild()执行相同的操作。
• **replaceChild()**方法：将指点节点替换为新节点。
  接受两个参数：要插入的节点和要替换的节点。
• **removeChild()**方法：移除节点。
  注意：替换的节点和移除的节点依旧在文档中，只是没有自己位置了。

其他方法

• **cloneNode()**方法：用于创建调用这个方法的节点的一个完全相同的副本。
  接受一个布尔值参数：true为执行深复制，即复制节点及其整改子节点数；false为执行浅复制，即只复制节点本身。
  注意：复制节点不会复制JavaScript属性，建议在复制之前先一次节点的事件处理程序。
• **normalize()**方法：处理调用者的文档树中的文本节点。移除空的文本节点，并合并相邻的文本节点为一个文本节点。

Document类型

Document类型表示文档，在浏览器中document对象是一个实例，表示整个HTML页面。nodeType为9。

文档的子节点

• documentElement属性，该属性始终指向HTML页面的元素。

document.documentElement

• body属性，直接指向元素.

document.body

• doctype属性：获取文档类型。(少用)

document.doctype

文档信息

• title属性：包含

document.title

• URL属性：包含页面完整的URL（地址栏显示的）。

document.URL

• domain属性：包含页面的域名。

document.domain

• referrer属性：保存着链接到当前页面的那个页面的URL，如果没有来源网页则为空字符串。

document.referrer

查找元素

根据id获取元素（掌握）

document.getElementById(“id属性的值”)

var div = document.getElementById('main');
console.log(div);
// 获取到的数据类型 HTMLDivElement，对象都是有类型的
// HTMLDivElement <-- HTMLElement <-- Element  <-- Node  <-- EventTarget

注意：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。

根据标签名获取元素（掌握）

document.getElementsByTagName(“标签名字”)，返回的是一个伪数组。

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
   
  var div = divs[i];
  console.log(div);
}

根据name获取元素（了解）

document.ge