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的学习笔记,可以用于参考学习使用,脑图样式,浏览更方便,有需要的同学可以带走
比较详细的javascript DOM 学习笔记第1 2页.docx
前端学习(六)——javascript学习笔记(四)HTML DOM.xmind
javaScript DOM编程艺术2版学习笔记(1~9)章
韩顺平js-DOM学习笔记
JavaScript DOM编程艺术(中文第二版)学习笔记
一、DOM基础1.节点(node)层次Document--最顶层的节点,所有的其他节点都是附属于它的。DocumentType--DTD引用(使用<!DOCTYPE>语法)的对象表现形式,它不能包含子节点。DocumentFragment--可以像Document...
JavaScript_DOM编程 DOM 的常用方法属性 经典实例 浏览器兼容处理
详细的javascript学习笔记,DOM,BOM,AJAX等详细笔记!
JavaScript学习基础知识,对你一定有帮助!!
javascript 数组 DOM BOM简单学习总结
JavaScript HTML CSS DOM 学习笔记 自学笔记 仅供参考
javascript中与DOM相关的一些知识点的简要整理,个人学习笔记
韩顺平老师的javascript之dom编程的笔记
javascript为DOM绑定事件 兼容 学习笔记
主要介绍了JavaScript学习笔记之DOM操作,结合实例形式分析了javascript针对dom元素的获取、设置相关操作常用函数使用技巧,需要的朋友可以参考下
如果父节点没有子节点, 则firstChild和lastChild都为nullparentNode 父节点previousSibling 第一个节点的previ
关于JavaScript DOM编程的学习笔记
本文实例讲述了JavaScript DOM基础操作。分享给大家供大家参考,具体如下: 一、子节点 1、元素节点、文本节点 实例01 html <body> 文本节点1 <li></li> 文本节点2<li></li> 文本节点3<li></li> 文本节点4...