1.HTML中的DOM
W3C再开发XML DOM的同时，还针对XHTML以及HTML开发了DOM。这个DOM定义了一个HTMLDocument和HTMLElement作为这种实现的基础。每个HTML元素由对应的HTMLElement类型来表示。例如HTMLDivElement代表<div>标签。
2.访问相关节点
document对象既是BOM的一部分，也是DOM的一部分。因此DOM的处理过程大多数都是以document对象开始的。直接看代码吧。有点特别的东西都在注释里进行了说明。
<html>
<head>
<title>DOM Example</title>
<script type="text/javascript">
function domTest() {
var oHtml = document.documentElement;//返回HTML的<html>标签对应的元素
var oHead = oHtml.firstChild;
var oBody = oHtml.lastChild;
//var oHead = oHtml.childNodes[0];
//var oHead = oHtml.childNodes.item(0);
//var oBody = oHtml.childNodes[1];
//var oBody = oHtml.childNodes.item(1);
//HTML DOM 预定义了body属性直接指向<body>标签
//var oBody = document.body;
alert(oHtml.childNodes.length);
alert(oHead.parentNode == oHtml);
alert(oBody.parentNode == oHtml);
alert(oBody.previousSibling == oHead);
alert(oHead.nextSibling == oBody);
alert(oHead.ownerDocument == document);//ownerDocument属性指向该文档对象
}
</script>
</head>
<body onload="domTest()">
<p>Hello,World!</p>
<p>Isn't thhis exciting?</p>
<p>You are learing to use DOM!</p>
</body>
</html>
3.检测DOM节点类型
可以通过nodeType属性来检测节点的类型。上一篇博客中已经提到了12中节点类型，并且举例说明了。这里不再赘述。
检测方法一：返回的是Node接口中定义的节点类型常量代表的数字。
alert(document.nodeType);//输出9
alert(document.documentElement.nodeType);//输出1
检测方法二：使用Node中的常量匹配来检测节点类型。
alert(document.nodeType == Node.DOCUMENT_NODE); //输出true
alert(document.documentElement.nodeType == Node.ELEMENT_NODE);//输出true
但是上面的第二种方法在IE以外的浏览器上基本上都没问题，IE则不行。我测试了一下，既是用IE8也还会报错。那么可以自定义匹配节点类型的常量来解决这个问题。见代码：
if(typeof Node == "undefined") {
var Node = {
ELEMENT_NODE:1,
ATTRIBUTE_NODE:2,
TEXT_NODE:3,
CDATA_SECTION_NODE:4,
ENTITY_REFERENCE_NODE:5,
ENTITY_NODE:6,
PROCESSING_INSTRUCTION_NODE:7,
COMMENT_NODE:8,
DOCUMENT_NODE:9,
DOCUMENT_TYPE_NODE:10,
DOCUMENT_FRAGMENT_NODE:11,
NOTATION_NODE:12
};
}
参考书目：
《JavaScript高级编程》Nicolas C. Zakas著， 曹力 张欣 等译。
分享到：
相关推荐
从菜鸟教程上学习的关于js的学习笔记，可以用于参考学习使用，脑图样式，浏览更方便，有需要的同学可以带走
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
### JavaScript DOM 学习笔记知识点总结 #### 一、DOM基础概述 DOM（Document Object Model）文档对象模型是一种处理可扩展标记语言的标准编程接口。它提供了结构化文档（如HTML和XML）的标准方法来访问、修改文档...
这篇“web学习笔记——javascript基础”将带你走进JavaScript的世界，理解其基本概念和常用语法。 JavaScript语法基础： 1. 变量：在JavaScript中，变量用于存储数据。声明变量使用`var`关键字，例如`var myVar = ...
前端学习（六）——javascript学习笔记（四）HTML DOM.xmind
在这个学习笔记中，涵盖了从基础到高级的JavaScript和DOM操作技巧，一共涉及1~9章的内容。以下是对这些章节知识点的详细阐述： **第1章：JavaScript简介** 本章介绍了JavaScript的基本概念，包括它是一种解释型、弱...
韩顺平js-DOM学习笔记
这份"javascript入门学习笔记"旨在为初学者提供一个全面且深入的JavaScript学习路径。 一、基础语法 JavaScript的基础包括变量、数据类型、操作符、流程控制等。变量用于存储数据，数据类型分为基本类型（如字符串...
这一过程涉及了`insertRow`和`insertCell`方法的使用，展示了如何动态创建和插入DOM节点。 ### 动态生成DOM节点 第二个示例中，`createElement`方法被用来创建新的`<tr>`和`<td>`节点，然后将它们添加到DOM树中。...
在"Javascript_DOM学习笔记+代码"中，你可能会发现具体的示例代码和练习，这些可以帮助你更好地理解和实践上述概念。通过深入学习和实践，你将能够熟练地操纵网页内容，创建动态交互的Web应用。
以上是JavaScript学习笔记中提到的一些核心知识点，通过对这些知识点的理解和熟练应用，可以为进一步学习和掌握JavaScript打下坚实的基础。在实际开发过程中，结合具体的项目需求，这些知识会得到更深入的拓展和应用...
JavaScript DOM 学习笔记 JavaScript DOM（Document Object Model）是 HTML 和 XML 文档的编程接口，它提供了一种访问和操作文档结构和内容的方式。DOM 将文档表示为一个树状结构，其中每个节点都代表文档中的一个...
总的来说，JavaScript DOM编程艺术这本书涵盖了JavaScript基础、DOM操作以及实际应用，是学习网页动态交互和JavaScript编程的重要资源。通过学习，开发者能够熟练地创建交互式、动态的网页内容。
本篇学习笔记主要探讨了DOM的基础知识，包括不同类型的节点以及如何访问和操作这些节点。 1. **DOM节点层次** - **Document**：作为整个文档的顶级节点，它包含了文档的全部内容。 - **DocumentType**：表示文档...
1. JavaScript基础知识：学习DOM编程之前，首先要掌握JavaScript的基础语法，包括变量声明、数据类型、控制结构（如if语句和循环）、函数定义与调用等。理解这些基础知识对于后面深入学习DOM操作至关重要。 2. DOM...
JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...
通过"Java JDK 6学习笔记——ppt简体版"，学习者可以系统地学习到如何使用JDK 6进行开发，包括环境配置、基本语法、类库使用、异常处理、IO流、网络编程、多线程等各个方面。PPT格式通常直观易懂，便于快速理解和...
JavaScript入门学习笔记
### JavaScript DOM 编程知识点详解 #### 一、DOM 基础概念 **DOM (Document Object Model)** 是一种用于表示 HTML 和 XML 文档的标准对象模型。它将文档定义为节点树，允许开发者通过编程方式访问和修改这些节点...