JavaScript DOM基础2

DOM自身存在很多类型，比如Element类型：表示的是元素节点，再比如Text类型：表示的是文本节点。DOM也提供了一些扩展功能。

一．DOM类型

DOM基础课程中，我们了解了DOM的节点并且了解怎样查询和操作节点，而本身这些不同的节点，又有着不同的类型。

DOM类型

类型名	说明
Node	表示所有类型值的统一接口，IE不支持
Document	表示文档类型
Element	表示元素节点类型
Text	表示文本节点类型
Comment	表示文档中的注释类型
CDATASection	表示CDATA区域类型
DocumentType	表示文档声明类型
DocumentFragment	表示文档片段类型
Attr	表示属性节点类型

1.Node类型

Node接口是DOM1级就定义了，Node接口定义了12个数值常量以表示每个节点的类型值。除了IE之外，所有浏览器都可以访问这个类型。

Node的常量

常量名	说明	nodeType值
ELEMENT_NODE	元素	1
ATTRIBUTE_NODE	属性	2
TEXT_NODE	文本	3
CDATA_SECTION_NODE	CDATA	4
ENTITY_REFERENCE_NODE	实体参考	5
ENTITY_NODE	实体	6
PROCESSING_INSTRUCETION_NODE	处理指令	7
COMMENT_NODE	注释	8
DOCUMENT_NODE	文档根	9
DOCUMENT_TYPE_NODE	doctype	10
DOCUMENT_FRAGMENT_NODE	文档片段	11
NOTATION_NODE	符号	12

虽然这里介绍了12种节点对象的属性，用的多的其实也就几个而已。

alert(Node.ELEMENT_NODE);//1，元素节点类型值

alert(Node.TEXT_NODE);//2，文本节点类型值

我们建议使用Node类型的属性来代替1,2这些阿拉伯数字，有可能大家会觉得这样岂不是很繁琐吗？并且还有一个问题就是IE不支持Node类型。
如果只有两个属性的话，用1，2来代替会特别方便，但如果属性特别多的情况下，1、2、3、4、5、6、7、8、9、10、11、12，你根本就分不清哪个数字代表的是哪个节点。当然，如果你只用1，2两个节点，那就另当别论了。

IE不支持，我们可以模拟一个类，让IE也支持。

if (typeof Node == 'undefined') {//IE返回

window.Node = {

ELEMENT_NODE : 1,

TEXT_NODE : 3

};

}

2.Document类型

Document类型表示文档，或文档的根节点，而这个节点是隐藏的，没有具体的元素标签。

document;//document

document.nodeType;//9，类型值

document.childNodes[0];//DocumentType，第一个子节点对象

document.childNodes[0].nodeType;//非IE为10，IE为8

document.childNodes[1];//HTMLHtmlElement

document.childNodes[1].nodeName;//HTML

如果想直接得到<html>标签的元素节点对象HTMLHtmlElement，不必使用childNodes属性这么麻烦，可以使用documentElement即可。

document.documentElement;//HTMLHtmlElement

在很多情况下，我们并不需要得到<html>标签的元素节点，而需要得到更常用的<body>标签，之前我们采用的是：document.getElementsByTagName('body')[0]，那么这里提供一个更加简便的方法：document.body。

document.body;//HTMLBodyElement

在<html>之前还有一个文档声明：<!DOCTYPE>会作为某些浏览器的第一个节点来处理，这里提供了一个简便方法来处理：document.doctype。

document.doctype;//DocumentType

PS：IE8中，如果使用子节点访问，IE8之前会解释为注释类型Comment节点，而document.doctype则会返回null。

document.childNodes[0].nodeName//IE会是#Comment

在Document中有一些遗留的属性和对象合集，可以快速的帮助我们精确的处理一些任务。

//属性

document.title;//获取和设置<title>标签的值

document.URL;//获取URL路径

document.domain;//获取域名，服务器端

document.referrer;//获取上一个URL，服务器端

//对象集合

document.anchors;//获取文档中带name属性的<a>元素集合

document.links;//获取文档中带href属性的<a>元素集合

document.applets;//获取文档中<applet>元素集合，已不用

document.forms;//获取文档中<form>元素集合

document.images;//获取文档中<img>元素集合

3.Element类型

Element类型用于表现HTML中的元素节点。在DOM基础那章，我们已经可以对元素节点进行查找、创建等操作，元素节点的nodeType为1，nodeName为元素的标签名。

元素节点对象在非IE浏览器可以返回它具体元素节点的对象类型。

元素对应类型表

元素名	类型
HTML	HTMLHtmlElement
DIV	HTMLDivElement
BODY	HTMLBodyElement
P	HTMLParamElement

PS：以上给出了部分对应，更多的元素对应类型，直接访问调用即可。

4.Text类型

Text类型用于表现文本节点类型，文本不包含HTML，或包含转义后的HTML。文本节点的nodeType为3。

在同时创建两个同一级别的文本节点的时候，会产生分离的两个节点。

var box = document.createElement('div');

var text = document.createTextNode('Mr.');

var text2 = document.createTextNode(Lee!);

box.appendChild(text);

box.appendChild(text2);

document.body.appendChild(box);

alert(box.childNodes.length);//2，两个文本节点

PS：把两个同邻的文本节点合并在一起使用normalize()即可。

box.normalize();//合并成一个节点

PS：有合并就有分离，通过splitText(num)即可实现节点分离。

box.firstChild.splitText(3);//分离一个节点

除了上面的两种方法外，Text还提供了一些别的DOM操作的方法如下：

var box = document.getElementById('box');

box.firstChild.deleteData(0,2);//删除从0位置的2个字符

box.firstChild.insertData(0,'Hello.');//从0位置添加指定字符

box.firstChild.replaceData(0,2,'Miss');//从0位置替换掉2个指定字符

box.firstChild.substringData(0,2);//从0位置获取2个字符，直接输出

alert(box.firstChild.nodeValue);//输出结果

5.Comment类型

Comment类型表示文档中的注释。nodeType是8，nodeName是#comment，nodeValue是注释的内容。

var box = document.getElementById('box');

alert(box.firstChild);//Comment

PS：在IE中，注释节点可以使用！当作元素来访问。

var comment = document.getElementsByTagName('!');

alert(comment.length);

6.Attr类型

Attr类型表示文档元素中的属性。nodeType为11，nodeName为属性名，nodeValue为属性值。DOM基础篇已经详细介绍过，略。

二．DOM扩展

1.呈现模式

区分标准模式和混杂模式(怪异模式)，主要是看文档的声明。IE为document对象添加了一个名为compatMode属性，这个属性可以识别IE浏览器的文档处于什么模式如果是标准模式，则返回CSS1Compat，如果是混杂模式则返回BackCompat。

if (document.compatMode == 'CSS1Compat') {

alert(document.documentElement.clientWidth);

} else {

alert(document.body.clientWidth);

}

2.滚动

DOM提供了一些滚动页面的方法，如下：

document.getElementById('box').scrollIntoView();//设置指定可见

3.children属性

由于子节点空白问题，IE和其他浏览器解释不一致。虽然可以过滤掉，但如果只是想得到有效子节点，可以使用children属性，这个属性是非标准的。

var box = document.getElementById('box');

alert(box.children.length);//得到有效子节点数目

4.contains()方法

判断一个节点是不是另一个节点的后代，我们可以使用contains()方法。这个方法是IE率先使用的，开发人员无须遍历即可获取此信息。

var box = document.getElementById('box');

alert(box.contains(box.firstChild));//true

在Firefox的DOM3级实现中提供了一个替代的方法compareDocumentPosition()方法。这个方法确定两个节点之间的关系。

var box = document.getElementById('box');

alert(box.compareDocumentPosition(box.firstChild));//20

关系掩码表

掩码	节点关系
1	无关(节点不存在)
2	居前(节点在参考点之前)
4	居后(节点在参考点之后)
8	包含(节点是参考点的祖先)
16	被包含(节点是参考点的后代)

PS：为什么会出现20，那是因为满足了4和16两项，最后相加了。为了能让所有浏览器都可以兼容，我们必须写一个兼容性的函数。

三．DOM操作内容

innerText、innerHTML、outerText和outerHTML等属性。除了之前用过的innerHTML之外，其他三个不怎么用不说了。

innerHTML属性

document.getElementById('box').innerHTML;//获取文本(不过滤HTML)

document.getElementById('box').innerHTML = '<b>123</b>';//可解析HTML

虽然innerHTML可以插入HTML，但本身还是有一定的限制，也就是所谓的作用域元素，离开这个作用域就无效了。

box.innerHTML = "<script>alert('Lee');</script>";//<script>元素不能被执行

box.innerHTML = "<style>background:red;</style>";//<style>元素不能被执行

JavaScript DOM基础2相关推荐

javascript DOM基础（一）
本文将DOM和javascript的一些常用法介绍给大家! 1.innerText.innerHTML.outerText.outerHTML区别功能: innerHTML 设置或获取位于对象起始和 ...
JavaScript零基础入门 13：DOM规范中的MutationObserver接口
目录一.MutationObserver接口二.MutationObserver基本用法 1.observe()方法 2.回调与MutationRecord 3.disconnect()方法 4. ...
前端学习之JavaScript DOM以及DOM操作的基础知识
在了解了javascript的语言基础和特性后 javascript真正大放光彩的地方来了--这就是javascript DOM Javascript DOM DOM(Document Object ...
java svg 读取dom结构_SVG基础以及使用Javascript DOM操作SVG
SVG 不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率不支持事 ...
JavaScript的基础学习篇
在学习JavaScript之前,我们应该先认识一下什么是脚本语言(Scripting Language)? 脚本语言就是一种简单的程序.在运行之前不需要先进行编译,所有的代码都是在客户程序中直接被执行 ...
JavaScript 语言基础知识点总结（思维导图）
1.JavaScript数组 2.JavaScript 函数基础 3.Javascript 运算符 4.JavaScript 流程控制 5.JavaScript 正则表达式 6.JavaScript ...
JavaScript Dom编程艺术
当我对JavaScript还停留在只认识这几个字母的时候,有一天我突然心血来潮,在网上下了DOM Scripting的样章,照着里面的例子写了我平生第一个能让我知所以然JavaScript,在浏览器运 ...
Javascript——DOM编程
Javascript--DOM编程基本概述文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM可以以一种独立于平台和语 ...
JavaScript DOM编程艺术学习笔记（一）
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
《HTML5+JavaScript动画基础》——2.4　JavaScript对象
本节书摘来自异步社区<HTML5+JavaScript动画基础>一书中的第2章,第2.4节,作者:[美]Billy Lamberta , Keith Peters著,更多章节内容可以访问云 ...

JavaScript DOM基础2

JavaScript DOM基础2相关推荐

最新文章

热门文章