摘要：在浏览器中，对象是继承自类型的一个实例，表示整个页面。一致性检测属性提供相应信息和功能的对象，与浏览器对的实现直接对应。在中，标签名始终都以全部大写表示而在有时包括，标签名始终与源代码中的保持一致。设置的特性名统一转为小写。
简介
DOM描述了一个层次化的节点树，允许开发人员添加、移除和修改页面。
节点根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
每个节点都有一个nodeType属性，用于表明节点的类型。并不是所有节点类型都受到Web浏览器支持，最常用的事元素和文本节点。
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.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11);
Node.NOTATION_NODE(12);
因为IE没有公开Node类型的构造函数，所以确定节点类型如下：
// nodeType 是只读的
if (someNode.nodeType == 1) {
alert("Node is an element");
}
Node类型
1、nodeName 和 nodeValue 属性
// 使用前先检查节点类型，确认是否是一个元素，对于元素节点
// nodeName 保存的是标签名（节点的名称），nodeValue = null （节点的值）;
if (someNode.nodeType == 1) {
value = someNode.nodeName; // nodeName的值是元素的标签名
}
2、 节点关系
每个节点都有一个 childNodes 属性，保存着一个 NodeList 对象。
是一个数组对象，保存一组有序的节点，可以通过位置访问节点。有length属性，但不是数组实例。
基于DOM结构动态执行查询结果，结构的变化能够自动反应着NodeList对象中。
可以用 item() 方法访问其中的节点。
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
// 将NodeList对象转化为数组
function convertToArray(nodes) {
var array = null;
try {
array = Array.prototype.slice.call(node,0); // 针对非 IE 浏览器
} catch {
array = new Array();
for (var i=0, len=nodes.length; I < len; i++) {
array.push(nodes[I]);
}
}
return array;
}
parentNode 属性：指向文档树中的父节点
父节点的 firstChild 和 lastChild 属性指向第一个和最后一个
previousSibling: 上一个同胞节点
nextSibling: 下一个同胞节点
hasChildNodes(): 节点包含一个或多个子节点返回 true
ownerDocument: 指向表示整个文档的文档节点
document.documentElement - 全部文档
document.body - 文档的主体
3、操作节点
以下方法都需要取得父节点（使用 parentNode 属性）
appendChild(): 向 childNodes 列表末尾添加一个节点。如果已存在，从原来位置移动到新位置
insertBefore(): 插入节点，接受两个参数，要出入的节点和参考节点（谁的前面）
replaceChild(): 替换节点，接受两个参数，要插入的节点和要替换的节点
removeChild(): 移除节点
以下两个方法是所有类型的节点都有
cloneNode(): 创建节点的副本，参数为true，复制节点及整个子节点树，false只复制节点本身，没有父节点，需要用上面方法添加到文档中
normalize(): 处理文档树中的文本节点。可能会出现文本节点不包含文本，或者接连出现两个文本节点。调用这方法，如果找到空文本，则删除；找到相邻文本节点，则合并为一个
Document 类型JavaScript通过 Document 类型表示文档。在浏览器中，document 对象是 HTMLDocument（继承自 Document 类型）的一个实例，表示整个HTML页面。而且 document 也是 window 对象的一个属性，因此可以将其作为全局对象来访问。通过这个文档对象，不仅可以取得与页面有关的信息，而且还能操作页面的外观及其底层结构。
nodeName 的值为 “#document”;
nodeValue 的值为 null；
parentNode 的值为 null；
ownerDocument 的值为 null；
其子节点可能是一个 DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction 或 Comment。
1、文档的子节点
内置的访问子节点的快捷方式：
documentElement 属性：始终指向HTML页面的元素
childNodes 列表访问文档元素
作为内置的HTMLDocument对象，document 对象有一个 body 属性，直接指向
元素。// 所有浏览器都支持 var html = document.documentElement; // 取得对对引用 var body = document.body; // 取得对对引用
用不着在 document 对象上调用 appendChild()、removeChild()和replaceChild()方法，因为文档类型（如果存在）是只读的，而且它只能有一个元素子节点（通常早存在）。
2、文档信息
document 对象还有一些标准的Document对象所没有的属性。这些对象表现的网页的一些信息。
// 取的文档标题 var originalTitle = document.title; // 设置文档标题 document.title = "New page title"; // 取得完成的URL var url = document.URL; // 取的域名 var domain = document.domain; // 取的来源页面的URL var referrer = document.referrer;
只有 domain 可以设置，如果包含子域名，不能设置为URL中不包含的域。
由于跨域安全限制，来自不同子域的页面无法通过 Javascript 通信，可以将每个页面的document.domain设置为相同值，就可以互相访问对方包含的JavaScript对象了。
如果域名一开始是“松散的”，就不能设为“紧绷的”，设为“wrox.com”，就不能设为“p2p.wrox.com”。
3、查找元素
取得特定的某个或某组元素的引用，然后执行一些操作。
getElementById(): 要获取的元素 id，返回第一个出现的，如果没找到返回 null
getElementsByTagName(): 参数（要取得元素的标签名），返回包含零个或多个元素的 NodeList。在HTML文档中，返回一个 HTMLCollection 对象，作为动态集合。传入“*”，取得文档中的所有元素
getElementsByName(): 返回给定 name 特性的所有元素。最常用取得单选按钮（单选按钮必须具有相同的 name 特性）
// 取得页面中所有的元素，并返回一个HTMLCollection var images = document.getElementsByTagName("img"); alert(images.length); // 图像的数量 alert(images[0].src); // 第一个图像元素的src特性 alert(images.item(0).src); // 第一个图像元素的src特性
HMTLCollection 对象
有一个 namedItem() 方法，可以通过元素的 name 特性取得集合中的项
支持按名称访问项
var myImage = images.namedItem("myImage"); var myImage = images["myImage"];
4、特殊集合
除了属性和方法，document 对象还有一些特殊的集合，都是 HTMLCollection对象，
document.anchors ,包含文档中所有带 name 特性的 元素；
document.applets ,所有的
document.forms ,文档中所有的
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/96607.html
摘要：然而，虽然先生对无所不知，被誉为世界的爱因斯坦，但他的语言精粹并不适合初学者学习。即便如此，在后面我还是会建议把当做补充的学习资源。但目前为止，依然是学习编程的好帮手。周正则表达式，对象，事件，阅读权威指南第，，，章。 既然你找到这篇文章来，说明你是真心想学好JavaScript的。你没有想错，当今如果要开发现代网站或web应用（包括互联网创业），都要学会JavaScript。而面对泛...
摘要：持续集成单元测试是开源的一个基于的测试执行过程管理工具。表示测试套件，是一序列相关程序的测试表示单元测试，也就是测试的最小单位。 持续集成 单元测试（unit） karma Karma 是Google开源的一个基于Node.js 的 JavaScript 测试执行过程管理工具（Test Runner）。该工具可用于测试所有主流Web浏览器，也可集成到 CI （Continuous in...
摘要：原文链接恰当地学习适合第一次编程和非的程序员持续时间到周前提无需编程经验继续下面的课程。如果你没有足够的时间在周内完成全部的章节，学习时间尽力不要超过周。你还不是一个绝地武士，必须持续使用你最新学到的知识和技能，尽可能地经常持续学习和提高。 原文链接：How to Learn JavaScript Properly 恰当地学习 JavaScript （适合第一次编程和非 JavaSc...
摘要：最近一周一直都在折腾一些项目中常用的记录下来，以后免去简单的配置再去查文档。常规入口指示应该使用哪个模块，来作为构建其内部依赖图的开始。把代码转换成，在使用语言中有介绍。扩展语法，使用下一代，在使用中有介绍。用于忽略部分文件。 最近一周一直都在折腾webpack,一些项目中常用的记录下来，以后免去简单的配置再去查文档。 常规 1.入口 指示 webpack 应该使用哪个模块，来作为构建...
摘要：当用户滚动页面时，合成线程会通知主线程更新页面中最新可见部分的位图。但是，如果主线程响应地不够快，合成线程不会保持等待，而是马上绘制已经生成的位图，还没准备好的部分用白色进行填充。 动画做多了，自然就要考虑性能，我打算出一个系列的日志，详细的讲解一下网页动画性能相关的知识，如果你已经可以运用css3 canvas来做动画，可以来参考一下。 目前我做的最复杂的动画就是360搜索中PC端的...
阅读 3519·2021-11-17 09:33
阅读 2193·2021-09-22 15:12
阅读 3217·2021-08-12 13:24
阅读 2320·2019-08-30 11:14
阅读 1619·2019-08-29 14:09
阅读 1235·2019-08-26 14:01
阅读 2963·2019-08-26 13:49
阅读 1679·2019-08-26 12:16
