JavaScript学习--Item29 DOM基础详解

JavaScript学习--Item29 DOM基础详解,第1张

概述看完JavaScript高级程序设计,整理了一下里面的DOM这一块的知识点,比较多,比较碎!DOM在整个页面的地位如图:DOM(文档对象模型)是针对HTML 和XML 文档的一个API(应用程序编程接口)。DOM描,绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分.1、节点层次DO

看完JavaScript高级程序设计,整理了1下里面的DOM这1块的知识点,比较多,比较碎!DOM在全部页面的地位如图:

DOM(文档对象模型)是针对HTML 和XML 文档的1个API(利用程序编程接口)。DOM描,绘了1个层次化的节点树,允许开发人员添加、移除和修改页面的某1部份.

1、节点层次

DOM 可以将任何HTML 或XML 文档描绘成1个由多层节点构成的结构。节点分为几种不同的类型,每种类型分别表示文档中不同的信息及(或)标记。每一个节点都具有各自的特点、数据和方法,另外也与其他节点存在某种关系。节点类型如图:

1、节点的公共属和方法

nodeType ——节点的类型,9代表document节点,1代表Element节点,3代表Text节点,8代表Comment节点,11代表documentFragment节点

nodename ——元素的标签名(如P,SPAN,#text(文本节点),div),以大写情势表示

nodeVlue ——Text节点或Comment节点的文本内容

childNodes—–获得子节点

var firstChild = someNode.childNodes[0];var secondChild = someNode.childNodes.item(1);var count = someNode.childNodes.length;

parentNode——获得父节点

firstNode——获得第1个子节点

lastNode——获得最后1个子节点

nextSibling——获得下1个兄弟节点

prevIoUsSibling——获得上1个兄弟节点

ownerdocument——获得文档节点

hasChildNodes()——判断是不是有子节点

appendChild()——添加子节点,接收1个参数表示要添加的节点,返回添加的节点.

var returnednode = someNode.appendChild(newNode);alert(returnednode == newNode); //truealert(someNode.lastChild == newNode); //trueinsertBefore()——在参考节点前添加子节点,接收两个参数,第1个参数表示要添加的节点,第2个参数表示参考节点,返回添加的节点.//插入后成为第1个子节点var returnednode = someNode.insertBefore(newNode,someNode.firstChild);alert(returnednode == newNode); //truereplaceChild()——替换子节点,第2个参数表示被替换的节点,返回被替换的节点.//替换第1个子节点var returnednode = someNode.replaceChild(newNode,someNode.firstChild);removeChild()—–移除子节点,这个方法接受1个参数,即要移除的节点。被移除的节点将成为方法的返回值

//移除第1个子节点
var formerFirstChild = someNode.removeChild(someNode.firstChild);

cloneNode()——克隆节点,接收1个boolean类型的参数,当参数为true时履行深复制,意即复制内容包括其子节点.<ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>var deepList = myList.cloneNode(true);alert(deepList.childNodes.length); //3(IE < 9)或7(其他阅读器)var shallowList = myList.cloneNode(false);alert(shallowList.childNodes.length); //0

deepList.childNodes.length 中的差异主要是由于ie8 及更早版本与其他阅读器处理空白字符的方式不1样。IE9 之前的版本不会为空白符创建节点。

cloneNode()方法不会复制添加到DOM 节点中的JavaScript 属性,例如事件处理程序等。这个方法只复制特性、(在明确指定的情况下也复制)子节点,其他1切都不会复制。IE 在此存在1个BUG,即它会复制事件处理程序,所以我们建议在复制之前最好先移除事件处理程序。

上述节点的nodename 和 nodeValue对应下图:

@H_575_403@2、Doucment类型

JavaScript 通过document 类型表示文档。在阅读器中,document 对象是HTMLdocument(继承自document 类型)的1个实例,表示全部HTML 页面。而且,document 对象是window 对象的1个属性,因此可以将其作为全局对象来访问

1、document对象的属性和方法

documentElement——获得HTML节点元素@H_724_419@@H_724_419@var HTML = document.documentElement; //获得对<HTML>的援用alert(HTML === document.childNodes[0]); //truealert(HTML === document.firstChild); //true

body——获得body节点元素

Title——获得Title文字节点元素

//获得文档标题var originalTitle = document.Title;//设置文档标题document.Title = "New page Title";

URL——获得完全的URL

domain——获得域名

referrer——获得来源页面的URL

//获得完全的URLvar url = document.URL;//获得域名var domain = document.domain;//获得来源页面的URLvar referrer = document.referrer;

document.anchors——包括文档中所有带name 特性的元素

document.forms——包括文档中所有的元素,与document.getElementsByTagname(“form”)得到的结果相同

document.images——包括文档中所有的元素,与document.getElementsByTagname(“img”)得到的结果相同;

document.links——包括文档中所有带href 特性的元素。

2、DOM的 *** 作

getElementByID()——通过ID属性获得元素

getElementsByTagname()——通过元素名获得元素

@H_724_419@@H_724_419@var div = document.getElementByID("mydiv"); //获得ID='mydiv'元素的援用@H_724_419@@H_724_419@var images = document.getElementsByTagname("img"); //获得img元素的援用@H_724_419@@H_724_419@var allElements = document.getElementsByTagname("*"); //获得文档中所有的元素

ie7及较低版本还为此方法添加了1个成心思的“怪癖”:name特性与给定ID匹配的表单元素也会被该方法返回

3、DOM1致性检测

由于 DOM 分为多个级别,也包括多个部份,因此检测阅读器实现了DOM的哪些部份就10分必要了。document.implementation 属性就是为此提供相应信息和功能的对象,与阅读器对DOM的实现直接对应。DOM1 级只为document.implementation 规定了1个方法,即hasFeature()。这个方法接受两个参数:要检测的DOM功能的名称及版本号。如果阅读器支持给定名称和版本的功能,则该方法返回true。

var hasXmlDom = document.implementation.hasFeature("XML","1.0");

以下为列出了可以检测的不同的值及版本号

Core 1.0、2.0、3.0 基本的DOM,用于描写表现文档的节点树XML 1.0、2.0、3.0 Core的XML扩大,添加了对cdaTA、处理指令及实体的支持HTML 1.0、2.0 XML的HTML扩大,添加了对HTML特有元素及实体的支持VIEws 2.0 基于某些样式完成文档的格式化StyleSheets 2.0 将样式表关联到文档CSS 2.0 对层叠样式表1级的支持CSS2 2.0 对层叠样式表2级的支持Events 2.0,3.0 常规的DOM事件UIEvents 2.0,3.0 用户界面事件MouseEvents 2.0,3.0 由鼠标引发的事件(click、mouSEOver等)MutationEvents 2.0,3.0 DOM树变化时引发的事件HTMLEvents 2.0 HTML4.01事件Range 2.0 用于 *** 作DOM树中某个范围的对象和方法Traversal 2.0 遍历DOM树的方法LS 3.0 文件与DOM树之间的同步加载和保存LS-Async 3.0 文件与DOM树之间的异步加载和保存ValIDation 3.0 在确保有效的条件下修改DOM树的方法3、Element类型

1、HTML元素

所有 HTML 元素都由HTMLElement 类型表示,不是直接通过这个类型,也是通过它的子类型来表示。HTMLElement 类型直接继承自Element 并添加了1些属性。添加的这些属性分别对应于每一个HTML元素中都存在的以下标准特性。

ID ——元素在文档中的唯1标识符。
Title ——有关元素的附加说明信息,1般通过工具提示条显示出来。
lang ——元素内容的语言代码,很少使用。
dir ——语言的方向,值为”ltr”(left-to-right,从左至右)或”rtl”(right-to-left,从右至左),也很少使用。
classname ——与元素的class 特性对应,即为元素指定的CSS类。未将这个属性命名为class,是由于class 是ECMAScript 的保存字

<div ID="mydiv" class="bd" Title="Body text" lang="en" dir="ltr"></div>var div = document.getElementByID("mydiv");alert(div.ID); //"mydiv""alert(div.classname); //"bd"alert(div.Title); //"Body text"alert(div.lang); //"en"alert(div.dir); //"ltr"div.ID = "someOtherID";div.classname = "ft";div.Title = "Some other text";div.lang = "fr";div.dir ="rtl";

2、特性 *** 作

有3个方法可以 *** 作元素的特性

getAttribute() setAttribute() removeAttribute()var div = document.getElementByID("mydiv");alert(div.getAttribute("ID")); //"mydiv"alert(div.getAttribute("class")); //"bd"div.setAttribute("ID","someOtherID");div.setAttribute("class","ft");div.setAttribute("Title","Some other text");div.removeAttribute("class");

有两类特殊的特性,它们虽然有对应的属性名,但属性的值与通过getAttribute()返回的值其实不相同。第1类特性就是style,用于通过CSS 为元素指定样式。在通过getAttribute()访问时,返回的style 特性值中包括的是CSS 文本,而通过属性来访问它则会返回1个对象。

第2类与众不同的特性是onclick 这样的事件处理程序。当在元素上使用时,onclick 特性中包括的是JavaScript 代码,如果通过getAttribute()访问,则会返回相应代码的字符串. ie6 及之前版本不支持removeAttribute()。

3、attributes 属性

Element类型是使用attributes属性的唯逐一个DOM节点类型,attributes属性是namedNodeMap类型的对象,它有以下几个方法

getnamedItem(name)——返回nodename 属性等于name 的节点;removenamedItem(name)——从列表中移除nodename 属性等于name 的节点;setnamedItem(node)——向列表中添加节点,以节点的nodename 属性为索引;item(pos)——返回位于数字pos 位置处的节点。var ID = element.attributes.getnamedItem("ID").nodeValue;var ID = element.attributes["ID"].nodeValue;element.attributes["ID"].nodeValue = "someOtherID";

由于attributes的方法不够方便,因此开发人员更多的会使用getAttribute()、removeAttribute()和setAttribute()方法。

4、创建元素

document.createElement() ——方法可以创建新元素。这个方法只接受1个参数,即要创建元素的标签名。var div = document.createElement('div');div.ID = 'mydiv';div.classname = 'Box';document.appendChild();

在 IE 中可以以另外一种方式使用createElement(),即为这个方法传入完全的元素标签,也能够包括属性,以下面的例子所示。

var div = document.createElement("<div ID=\"myNewdiv\" class=\"Box\"></div >");

这类方式有助于避开在ie7 及更早版本中动态创建元素的某些问题。

4、Text类型

文本节点由 Text 类型表示,包括的是可以照字面解释的纯文本内容。纯文本中可以包括转义后的HTML 字符,但不能包括HTML代码。

使用以下方法可以 *** 作节点中的文本

appendData(text):将text 添加到节点的末尾。

deleteData(offset,count):从offset 指定的位置开始删除count 个字符。

insertData(offset,text):在offset 指定的位置插入text。

replaceData(offset,count,text):用text 替换从offset 指定的位置开始到offset+count为止处的文本

splitText(offset):从offset 指定的位置将当前文本节点分成两个文本节点

substringData(offset,count):提取从offset 指定的位置开始到offset+count 为止处的字符串创建文本节点

createTextNode()——可以创建文本节点.

@H_724_419@@H_724_419@var textNode = document.createTextNode("<strong>Hello</strong> world!");

下面展现如何将1个文本节点添加到文档中

var element = document.createElement("div");element.classname = "message";var textNode = document.createTextNode("Hello World!");element.appendChild(textNode);document.body.appendChild(element);

合并文本节点

1个元素可能会存在多个文本节点,但是文本节点之间也没有空格,因此没法辨别哪一个节点对应的是哪一个文本,通过下面的方法可以将element元素的文本节点合并.

element.normalize();固然也能够分割文本节点,使用splitText(index),index表示字符索引.var newNode = element.firstChild.splitText(5);从位置5 开始。位置5"Hello""world!"之间的空格alert(element.firstChild.nodeValue); //"Hello"alert(newNode.nodeValue); //" world!"alert(element.childNodes.length); //2

注意提示:
1、innerText、textContent innerText与textContent的区分,当文本为空时,innerText是”“,而textContent是undefined
2、INNERHTML与innerText的区分,就是对HTML代码的输出方式Text不会输出HTML代码.

5、DOM扩大

1、选择符API

Selectors API Level 1 的核心是两个方法:
- querySelector()
- querySelectorAll()。

在兼容的阅读器中,可以通过document 及Element 类型的实例调用它们。目前已完全支持Selectors API Level 1的阅读器有IE 8+、firefox 3.5+、Safari 3.1+、Chrome 和Opera 10+。

querySelector()方法

//获得body 元素@H_724_419@@H_724_419@var body = document.querySelector("body");//获得ID 为"mydiv"的元素@H_724_419@@H_724_419@var mydiv = document.querySelector("#mydiv");//获得类为"selected"的第1个元素@H_724_419@@H_724_419@var selected = document.querySelector(".selected");//获得类为"button"的第1个图象元素@H_724_419@@H_724_419@var img = document.body.querySelector("img.button");

querySelectorAll()方法

//获得某<div>中的所有<em>元素(类似于getElementsByTagname("em"))@H_724_419@@H_724_419@var ems = document.getElementByID("mydiv").querySelectorAll("em");//获得类为"selected"的所有元素@H_724_419@@H_724_419@var selecteds = document.querySelectorAll(".selected");//获得所有<p>元素中的所有<strong>元素@H_724_419@@H_724_419@var strongs = document.querySelectorAll("p strong");

2、HTML5与类相干的扩充

getElementsByClassname()方法//获得所有类中包括"username""current"的元素,类名的前后顺序无所谓@H_724_419@@H_724_419@var allCurrentUsernames = document.getElementsByClassname("username current");

支持 getElementsByClassname()方法的阅读器有IE 9+、firefox 3+、Safari 3.1+、Chrome 和
Opera 9.5+。

焦点管理——document.activeElement

这个属性指向的是当前取得焦点的元素,使用focus()可让元素取得焦点

@H_724_419@@H_724_419@var button = document.getElementByID("mybutton");button.focus();alert(document.activeElement === button); //truedocument.hasFocus()

这个方法用于肯定文档是不是取得了焦点

@H_724_419@@H_724_419@var button = document.getElementByID("mybutton");button.focus();alert(document.hasFocus()); //true

实现了这两个属性的阅读器的包括IE 4+、firefox 3+、Safari 4+、Chrome 和Opera 8+。

HTMLdocument的变化

readyState 属性

document.readyState表示文档的加载进度,它有两个值分别为’loading’和’complete’.

if(document.readyState == 'complete'){ //履行 *** 作}

支持 readyState 属性的阅读器有IE4+、firefox 3.6+、Safari、Chrome 和Opera 9+。

compatMode 的属性——document.compatMode属性告知开发人员阅读器采取了哪一种渲染模式。

在标准模式下,document.compatMode 的值等于”CSS1Compat”,而在混杂模式下document.compatMode 的值等于”BackCompat”。

if (document.compatMode == "CSS1Compat"){alert("Standards mode");} else {alert("Quirks mode");}

兼容性:IE、firefox、Safari 3.1+、Opera 和Chrome

字符编码——document.charset

当前文档的字符编码

document.defaultCharset——当前文档的默许字符编码

3、自定义数据属性

HTML5 规定可以为元素添加非标准的属性,但要添加前缀data-,目的是为元素提供与渲染无关的信息,或提供语义信息。

<div ID="mydiv" data-appID="12345" data-myname="Nicholas"></div>var div = document.getElementByID("mydiv");//获得自定义属性的值var appID = div.dataset.appID;var myname = div.dataset.myname;//设置值div.dataset.appID = 23456;div.dataset.myname = "Michael";if (div.dataset.myname){alert("Hello," + div.dataset.myname);}

支持自定义数据属性的阅读器有firefox 6+和Chrome

插入标记

INNERHTML属性

在读模式下,INNERHTML 属性返回与调用元素的所有子节点(包括元素、注释和文本节点)对应
的HTML 标记。在写模式下,INNERHTML 会根据指定的值创建新的DOM树,然后用这个DOM树完全
替换调用元素本来的所有子节点

outerHTML 属性

在读模式下,outerHTML 返回调用它的元素及所有子节点的HTML 标签。在写模式下,outerHTML
会根据指定的HTML 字符串创建新的DOM 子树,然后用这个DOM子树完全替换调用元素。

4、内存与性能问题

使用本节介绍的方法替换子节点可能会致使阅读器的内存占用问题,特别是在IE 中,问题更加明显。在删除带有事件处理程序或援用了其他JavaScript 对象子树时,就有可能致使内存占用问题。假定某个元素有1个事件处理程序(或援用了1个JavaScript 对象作为属性),在使用前述某个属性将该元素从文档树中删除后,元素与事件处理程序(或JavaScript 对象)之间的绑定关系在内存中并没有1并删除。如果这类情况频繁出现,页面占用的内存数量就会明显增加。因此,在使用INNERHTML、outerHTML 属性方法时,最好先手工删除要被替换的元素的所有事件处理程序和JavaScript 对象属性

scrollintoVIEw()方法——让元素可见//让元素可见document.forms[0].scrollintoVIEw();6、DOM2和DOM3

DOM2 和DOM3级分为许多模块(模块之间具有某种关联),分别描写了DOM 的某个非常具体的子集。这些模块以下

DOM2 级核心(DOM Level 2 Core):在1 级核心基础上构建,为节点添加了更多方法和属性。DOM2 级视图(DOM Level 2 VIEws):为文档定义了基于样式信息的不同视图。DOM2 级事件(DOM Level 2 Events):说明了如何使用事件与DOM文档交互。DOM2 级样式(DOM Level 2 Style):定义了如何以编程方式来访问和改变CSS 样式信息。DOM2 级遍历和范围(DOM Level 2 Traversal and Range):引入了遍历DOM 文档和选择其特定部份的新接口。DOM2 级 HTML(DOM Level 2 HTML):在1 级HTML 基础上构建,添加了更多属性、方法和新接口
样式

在 HTML 中定义样式的方式有3 种:通过<link/>元素包括外部样式表文件、使用<style/>元素定义嵌入式样式,和使用style 特性定义针对特定元素的样式。“DOM2 级样式”模块围绕这3 种利用样式的机制提供了1套API。要肯定阅读器是不是支持DOM2 级定义的CSS 能力,可使用以下代码

var supportsDOM2CSS = document.implementation.hasFeature("CSS","2.0");var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2","2.0");

1、访问元素的样式

任何支持 style 特性的HTML 元素在JavaScript 中都有1个对应的style 属性。访问和设置元素的CSS属性可以这样 *** 作:

var div = document.getElementByID('mydiv');console.log(div.style.color); //获得color值div.style.color = 'red'; //设置color值div.style.FontSize = '20px';//设置Font-size的值(这里会将有短横线的值转化为驼峰命名来获得或设置)

注:ie6+,Chrome,firfox支持这类获得或设置CSS的方式.这里有1个特例,由于float是保存关键字,所以通过CSSfloat来访问和设置,而IE中则通过stylefloat来设置或访问.

元素的style对象除有CSS的样式属性外,也包括了自己的1些属性,具体以下:

csstext:通过它能够访问和设置style 特性中的CSS代码.支持ie6+,firfox.length:利用给元素的CSS 属性的数量。支持IE9+,firfox.parentRule:表示CSS 信息的CSSRule 对象,后面将讨论CSSRule 类型。getPropertyPriority(propertyname):如果给定的属性使用了!important 设置,则返回”important”;否则,返回空字符串。支持IE9+,firfox.getPropertyValue(propertyname):返回给定属性的字符串值。支持IE9+、Safari,Chrome,firfoxitem(index):返回给定位置的CSS 属性的名称。支持IE9+、Safari,firfoxremoveProperty(propertyname):从样式中删除给定属性。支持IE9+、Safari,firfoxsetProperty(propertyname,value,priority):将给定属性设置为相应的值,并加上优先权标志(”important”或1个空字符串)。支持IE9+、Safari,firfox//设置style对象的csstext属性mydiv.style.csstext = "wIDth: 25px; height: 100px; background-color: green";alert(mydiv.style.csstext);

2、 *** 作样式表

CSsstyleSheet 类型表示的是样式表,包括通过<link>元素包括的样式表和在<style>元素中定义的样式表,使用下面的代码可以肯定阅读器是不是支持DOM2 级样式表:

var supportsDOM2StyleSheets =document.implementation.hasFeature("StyleSheets","2.0");

CSsstyleSheet 继承自StyleSheet,后者可以作为1个基础接口来定义非CSS 样式表。从StyleSheet 接口继承而来的属性以下:

Disabled:表示样式表是不是被禁用的布尔值。这个属性是可读/写的,将这个值设置为true可以禁用样式表。href:如果样式表是通过<link>包括的,则是样式表的URL;否则,是null。

media:当前样式表支持的所有媒体类型的集合。与所有DOM 集合1样,这个集合也有1个length 属性和1个item()方法。也能够使用方括号语法获得集合中特定的项。如果集合是空列表,表示样式表适用于所有媒体。在IE 中,media 是1个反应<link><style>元素media特性值的字符串。

ownerNode:指向具有当前样式表的节点的指针,样式表多是在HTML 中通过<link><style/>引入的(在XML 中多是通过处理指令引入的)。如果当前样式表是其他样式表通过@import 导入的,则这个属性值为null。IE 不支持这个属性。

parentStyleSheet:在当前样式表是通过@import 导入的情况下,这个属性是1个指向导入它的样式表的指针。

Title:ownerNode 中Title 属性的值。type:表示样式表类型的字符串。对CSS 样式表而言,这个字符串是”type/CSS”。

除 Disabled 属性以外,其他属性都是只读的。在支持以上所有这些属性的基础上,CSsstyleSheet 类型还支持以下属性和方法:

CSSRules:样式表中包括的样式规则的集合。IE 不支持这个属性,但有1个类似的rules 属性。ownerRule:如果样式表是通过@import 导入的,这个属性就是1个指针,指向表示导入的规则;否则,值为null。IE 不支持这个属性。deleteRule(index):删除CSSRules 集合中指定位置的规则。IE 不支持这个方法,但支持1个类似removeRule()方法。insertRule(rule,index):向CSSRules 集合中指定的位置插入rule 字符串。IE 不支持这个方法,但支持1个类似的addRule()方法。

利用于文档的所有样式表是通过 document.styleSheets 集合来表示的。也能够直接通过<link><style>元素获得CSsstyleSheet 对象。DOM 规定了1个包括CSsstyleSheet 对象的属性,名叫sheet;除IE,其他阅读器都支持这个属性。IE 支持的是styleSheet属性

3、元素大小

偏移量
offsetHeight:元素在垂直方向上占用的空间大小,以像素计。包括元素的高度、(可见的)水平转动条的高度、上边框高度和下边框高度。offsetWIDth:元素在水平方向上占用的空间大小,以像素计。包括元素的宽度、(可见的)垂直转动条的宽度、左侧框宽度和右侧框宽度。offsetleft:元素的左外边框至包括元素的左内边框之间的像素距离。offsettop:元素的上外边框至包括元素的上内边框之间的像素距离。

客户区大小

有关客户区大小的属性有两个:clIEntWIDthclIEntHeight。其中,clIEntWIDth 属性是元素内容区宽度加上左右内边距宽度;clIEntHeight 属性是元素内容区高度加上上下内边距高度

转动大小

scrollHeight:在没有转动条的情况下,元素内容的总高度。scrollleft:被隐藏在内容区域左边的像素数。通过设置这个属性可以改变元素的转动位置。scrolltop:被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的转动位置。
肯定元素大小

IE、firefox 3+、Safari 4+、Opera 9.5 及Chrome 为每一个元素都提供了1个getBoundingClIEntRect()方法。这个方法返回会1个矩形对象,包括4 个属性:left、top、right 和bottom。这些属性给出了元素在页面中相对视口的位置。但是,阅读器的实现稍有不同。ie8 及更早版本认为文档的左上角坐标是(2,2),而其他阅读器包括IE9 则将传统的(0,0)作为出发点坐标。因此,就需要在1开始检查1下位于(0,0)处的元素的位置,在ie8 及更早版本中,会返回(2,2),而在其他阅读器中会返回(0,0).

遍历

DOM2 级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM 结构的类型:NodeIteratorTreeWalker。这两个类型能够基于给定的出发点对DOM 结构履行深度优先(depth-first)的遍历 *** 作。

在与DOM 兼容的阅读器中(firefox 1 及更高版本、Safari 1.3 及更高版本、Opera 7.6 及更高版本、Chrome0.2 及更高版本),都可以访问到这些类型的对象。IE 不支持DOM 遍历。使用以下代码可以检测阅读器

对DOM2 级遍历能力的支持情况。

@H_724_419@@H_724_419@var supportsTraversals = document.implementation.hasFeature("Traversal","2.0");@H_724_419@@H_724_419@var supportsNodeIterator = (typeof document.createNodeIterator == "function");@H_724_419@@H_724_419@var supportsTreeWalker = (typeof document.createTreeWalker == "function");

范围

为了让开发人员更方便地控制页面,“DOM2 级遍历和范围”模块定义了“范围”(range)接口。通过范围可以选择文档中的1个区域,而没必要斟酌节点的界限(选择在后台完成,对用户是不可见的)。在常规的DOM *** 作不能更有效地修改文档时,使用范围常常可以到达目的。firefox、Opera、Safari 和Chrome 都支持DOM 范围。IE 以专有方式实现了自己的范围特性。

参考:
- JavaScript高级程序设计
- JavaScript之DOM *** 作

总结

以上是内存溢出为你收集整理的JavaScript学习--Item29 DOM基础详解全部内容,希望文章能够帮你解决JavaScript学习--Item29 DOM基础详解所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1016341.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-22
下一篇 2022-05-22

发表评论

登录后才能评论

评论列表(0条)

保存