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>元素不能被执行

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏练小习的专栏

CSS计数器 counter

适用场景: 当排序以及序号变动对服务端造成的压力大的情况下,使用css计数。 在早期,只有ol和ul可以对子元素li进行排序,,而CSS2.1规范中加入了co...

23690
来自专栏性能与架构

JS中控制好this关键字的指向

javascript中的 this 的指向不太好控制,理解不好的话很容易错误 下面几个示例可以加深对this指向的理解 (1)内联事件 <a href="...

286110
来自专栏柠檬先生

html5 新特性

1.querySelector 返回文档中匹配指定css选择器的一个元素.     注意:uerySelector() 方法仅仅返回匹配指定选择器的第一个元...

246100
来自专栏mySoul

属性 元素的内容 创建,插入和删除节点 虚拟节点

表示HTML文档元素的HTMLElement对象定义了读/写属性。映射了元素的HTML属性。HTMLElement定义了通用的HTTP属性。以及事件处理程序的属...

15930
来自专栏Pythonista

Golang实现一个密码生成器

20430
来自专栏liuchengxu

Vim 文本对象指南 (2)

接 Vim 文本对象 (1), 关于插件使用, 可以查看完整配置 space-vim.

5520
来自专栏前端小叙

vue路由跳转报错解决

18240
来自专栏前端说吧

Sass控制命令及函数知识整理

43460
来自专栏信安之路

【作者投稿】PHP代码审计-sprintf函数中的安全问题

看到一篇WorldPress注入漏洞分析,其中sprintf单引号逃逸的思路很巧妙,在此对这类函数做一些简单的测试和总结。

8400
来自专栏GreenLeaves

JavaScript之insertBefore()和自定义insertAfter()的用法。

在JS图片库的第五版开发完后http://www.cnblogs.com/GreenLeaves/p/5691797.html#js_Five_Version我...

24090

扫码关注云+社区

领取腾讯云代金券