JS高级程序之DOM拓展

SelectorsAPI的核心两个方法，：querySelector（）和querySlelctorAll（），在兼容的浏览器中，可以通过Domcument及Element类型的实例可以调用他们。

11.1.1 querySelector（）方法：

querySelector（）方法接收一个css选择符，返回与该匹配的第一个元素，如果没有匹配到就返回null。

通过document调用querySelector（）方法会在文档元素的范围内查找到匹配的元素。

Elementquery调用querySelector（）方法只会在该元素后代元素中查找到匹配的元素

11.1.2querySelectorAll（）

var body=document.querySelector("body");
var p=body.querySelector(".menu_1")
//    var li=p.querySelector("li");
var li=p.querySelectorAll("li");
for(var i=0;i<li.length;i++){
var list={};
list[i]=li[i].innerHTML;
alert(list[i]);
    }

11.1.3matchesSelector

这个方法接收一个参数，即css选择符，如果调用的方法和该元素匹配则返回true。

11.2 元素遍历

Elment Traversal API 为DOM元素添加了以下5个属性。

1：childElementCount：返回子元素的个数

2：firstElementChild：指向第一个子元素，firstChild 元素版；

3：lastElementChild：指向最后一个子元素，lastChild元素版；

4：previousElementSibling：指向前一个同辈元素；

5：nextElementSibling：指向后一个同辈元素；

11.3HTML5

11.3.1与类相关的扩充

1：getElementByClassName（）该方法接收一个参数，一个或者多个类名的字符串，返回带有指定的所有元素的NodeList。

2：classList属性：（对class=“这里的操作”）

classList属性是新集合类型DOMTokenList的实例。与其他DOM集合类似。具有以下方法：

add（value）：将给定的字符串添加到列表中。

contains（value）：表示列表中是否存在给定的值，有的话就发返回true 没有就返回false。

remove（value）从列表中删除给定的字符串

toggle（如果列表中存在给定的值，删除，没有给定的值就添加它。）

<p id="select" class="aa ss dd ff hh "></p>
<script>
var elem = document.getElementById("select");
var classNum =elem.classList;
console.log(classNum);
</script>

到这里就可以通过上述的方法来对着里的参数进行操纵了。

11.3.2 焦点管理

HTML5也添加了辅助管理DOM的功能。首先就是document.activeElement属性,这个属性始终会引用DOM当前获得的焦点元素。可以获得当前用户焦点的元素。

使用。focus（）方法

11.3.3 HTMLDocument的变化

1:readyState属性

这个属性有两个值

1；loading，正在加载文档

2：complete，已经加载完文档。

使用document.readyState属性最恰当的方式就是用他来实现一个指示文档已经加载完成的指示器。表示文档已经加载完成。

if(document.readyState=="complete"){
       //执行操作
}

2：兼容模式：

自从IE6开始区分渲染页面的模式是标准的还是混杂的，IE给document添加了一个名为compatMode的属性，用来告诉开发人员页面采用了那种渲染模式。

有两个返回值：CSS1compat，和BackComapat。

分别对应了标准模式和混杂模式。

3：head属性

通过document.head不能用就使document.getElementByTagName();

11.3.4 字符集属性

通过document.charSet=“”；来修改页面的编码格式；

11.3.6插入标记

1：innerHTML属性

在读模式下，innerHTML属性返回调用元素的所有的子节点对应的HTML标记。在写模式下，innerHTML会根据指定的值来创建新的DOM树。

可以利用这个属性给指定的的标签里面添加标签，但是并不是所有的标签都是支持的

2:outerHTML属性

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

var val = elem.outerHTML;

读模式：返回所有的HTML标签

写模式：取代对应的DOM的元素。

<p id="select" class="aa ss dd ff hh ">
<p>this is a test Demo</p>
</p>

elem.outerHTML="<p>这是一个测试的demo</p>"

3：insertAdjeacentHTML（）方法

插入标记的最后一个方法。

接收两个参数：插入位置和要插入的HTML文本。第一个元素必须是下列值之一。

1：beforebegin，在当前元素之前插入一个紧邻的同辈元素。

2：afterbegin，在当前元素之下插入一个新的子元素或者在第一个元素之前插入新的元素

3：beforeend，在当前元素之下插入一个新的子元素或者在最后一个元素之后再插入新的元素

4：afterend在，在元素之后添加一个紧邻的同辈元素。

4：内存与性能问题；

使用本节介绍的方法替换子节点可能会导致浏览器的内存问题，不过使用innerHTML属性还是会给我们带来很多的遍历，原因是，再设置innerHTML或outerHTML的时候会创建一个HTML的解析器，这个解析器是在浏览器级别的代码基础上运行的，因此比js快了很多。

11.3.7scrollIntoView方法

滚动

11.4.1文档模式：

文档模式决定了你可以使用哪个级别的css，可以在js中使用哪些API：

总共有四种文档模式：

IE5：以混杂模式渲染页面，IE8以及更高版本中的新功能都无法使用

IE7：以IE7标准模式渲染页面，IE8以及更高版本中的新功能都无法使用

IE8：以IE8标准模式渲染,IE8中的新功能都能使用，因此可以使用SelectorsAPI、更多的CSS2级选择符和某些CSS3功能。还有一些HTML5的功能

IE9 一IE9标准模式渲染页面。新功能都能使用。比如EMACSript5的功能。

11.4.2 children属性

children属性和childNodes几乎没有什么区别，都是用来返回所有子节点的

11.4.3contain（包含）方法：

用来判断该节点是不是某节点的后代节点,可以直接理解英文的字面意思，包含。

父节点.contain（某个节点）：如果返回true，就是包含，否则就返回false。

还可以使用compareDocumentPosition（）比较文件位置，会返回一些掩码用来确定位置关系

为了模仿contain（）方法应该注重的是返回16；

11.4.4 插入文本：

1：innerText属性

会操作元素中所有的值，并按照由浅入深的方式把文档拼接起来。

和innerHTML的区别是：innerHTML会吧元素标签都显示出来，但是innerText只会返回拼接好的字符串

写入的时候也是只会显示一个文本子节点。

2：outerText属性

除了作用范围扩大到了包含他的节点之外，outerText与innerText基本上没有多大的区别。在读取文本的时候结果完全一样，但是写入的时候就完全不一样了。outerText不只是替换掉调用他的元素的子元素，而是会替换整个元素，建议不要使用。

11.4.5滚动：

1：scrollIntoviewIfNeeded（alignCenter）：只在当元素在视口中不可见的情况下，才滚动浏览器。

2：scrollByLines（lineCount）：将元素的内容滚动到指定的页面高度，lineCount可以使正值也可以是负值。

3：scrollBypage（pageCount）：将元素的内容滚动到指定的页面高度，具体高度由元素的高度决定。

注意：scrollIntoView（）和scrollIntoviewIfNeeded（alignCenter）的作用对象是元素容器，而scrollByLines（lineCount）和scrollBypage（pageCount）的作用对象是是元素本身。

12章：DOM2和DOM3

12.1.1针对XML命名空间的变化

有了XML命名空间，不同的XML文档的元素就可以混合在一起，不用担心命名冲突，从技术上说，HTML不支持XML命名空间，但XHTML支持XML命名空间。

1：Node类型的变化

在DOM2级中，Node类型包含下列特定于命名空间的属性。

localName：不带命名空间前缀的节点名称。

namespaceURL：命名空间URL挥着Null。

prefix：命名空间前缀或者null。

2：document类型的变化

DOM2级中的Document类型也发生了变化，包含了下列与命名空间有关的方法。

createElementNs（namespaceURI,tagName）：使用给定的tagName创建一个属于命名空间namespaceURI的新元素。

createAttributeNS（nameSpaceURI，attributeName）使用给定的attributeName创建一个属于命名空间nameSpaceURI的新特性。

getElementByTagNameNs（namespaceURI，tagName）返回属于命名空间namespaceURI的tagName元素的NodeList。

3：Element类型的变化

“DOM2级”中有关Element的变化，主要涉及操作特性。新增方法如下。

getAttributeNS（namespaceURI，localName）取得命名空间namespaceURI且名为localName的特性

getAttributeNodeNS（namespaceURI，localName）取得属于命名空间namespaceURI且名为localName的特性节点

getElementsByTagNameNS（namespaceURI，tagName）返回属于命名空间namespaceURI的nodeList

hasAttributeNS（namespaceURI，localName）确定当前元素是一个有名为localNaem的特性，而且该特性的命名空间是namespaceURI

removeAttributeNS（namespaceURI，localName）删除属于命名空间namespaceURI且名为localName的特性

setAttributeNS（namespaceURI，qualifiedName，value）：设置属于命名空间namespaceURI且名为qualifiedName的特性值为value

setAttributeNodeNS（attNode）设置属于命名空间namespaceURI的特性节点

4：NamedNodeMap类型的变化

由于特性是通过NamedNodeMap表示的，因此这些方法多数情况下只针对特性使用

1：getNamedItemNS（namespaceURI，localName）：取得属于命名空间namespaceURI且名为localName的项

2：removeNamedItemNS（namespaceURI，localName）：移除属于命名空间namespaceURI且名为localName的项

3：setNamedItemNS（node）：添加node，这个节点已经事先指定了命名空间信息。

由于一般都是通过元素访问特性，所以这些方法很少使用。

12.1.2 其他方面的变化

1：documentType类型的变化

添加了三个属性：publicID systemId 和internalSubset。

2：document类型的变化：

DOM2级核心还为document。implementation对象规定了两个新方法：creatDocumentType（）和creatDocument（）

前者用于创建一个新的DocumentType节点，接受三个参数：文档类型，publicID、systemID；

创建新文档时需要使用到createDocument（）方法，同样也接受三个参数：namesp-aceURI、文档元素的标签名、新文档类型

3：Node类型的变化

就只是添加了isSupported（）方法：用于确定当前节点具有什么能力。

这个方法接收两个参数，特性名和特性版本号。

12.2样式

在HTML中定义样式的方法有三种：外部<link>，嵌入<style>，使用style属性在元素标签里进行修改。

12.2.1访问元素的样式

CSS属性 javaScript属性

background-image style.backgroundImage

color style.color

display style.display

font-family style.fontFamily

1：DOM样式属性和方法：

“DOM2级样式”规范还为style对象定义了一些属性和方法。这些属性和方法在提供元素style特性的同时，也可以修改样式。下面列出了这些属性和方法。

cssText：可以访问到style中的CSS代码

length：应用给于是你素的CSS属性的数量。

parentRule：表示CSS信息的CSSRule对象

getPropertyCssValue（propertyName）：返回包含给定属性值的CssVal对象。

getPropertyPriority（propertyName）：如果属性给定了！important设置，就返回！important，否则就返回空字符串

getPropertyValue（）返回给定属性的字符串值

item（）返回给定位置的CSS属性的名称

removeProperty（propertyName）：从样式中删除给定的样式

setProperty（）将给定属性设置为相应的值，并加上优先权限标志。

在实际开发中，getPropertyValue（）用的比较频繁

2计算的样式

getComputedStyle（）方法。这个方法需要接受两个参数：要取得计算样式的元素和一个伪元素字符串。如果不需要伪元素字符串，可以填null。

例子：取得元素样式

12.2.2 操作样式表

CSSStyleSheet 继承自StyleSheet，后者可以作为一个接口来定义非CSS样式表。从StyleSheet接口继承而来的属性如下。

disable：表示样式表是否被禁用布尔值

href：如果样式变是通过<link>包含的，则是样式表的URL：否则，是null

media：当前样式表支持的所有媒体类型的集合

ownerNode：指向拥有当前样式表的节点的指针

parentStyleSheet:一个指向导入他样式表的指针

title：ownerNode中title属性的值。

type：表示样式表类型的字符串

cssRules样式表中的规则集合

ownerRule：如果样式表是通过@import导入的，这个属性就是一个指针，指向表示导入的规则，否则，值为null

deleteRule（index）：删除指定的规则

insertRule：（方法）向cssRule集合中插入rule字符串

应用于文档的所有样式都是通过docuement.stylesheets集合来表示的

1：CSS规则：

CSSStyleSheet对象包含以下对象：

cssText：返回整条规则对应的文本。

parentRule：如果当前规则是导入规则，这个属性就返回导入规则；否则就是null

parentStyleSheet：当前规则所属的样式表

SelectorText：返回当前规则的选择符文本。

Style：一个CSSStyleDeclaration对象，可以通过它设置和取得规则中特定样式的样式表。

type：表示规则类型的常量值。

其中最常用的属性是cssText，selectorText和Style。

2：创建规则

DOM规定。要向现在有样式的表中添加新规则，需要使用insertRule（）方法。这个方法接受两个参数：规则文本和插入的索引

例子：

sheet.insertRule("body{background-color:silver}",0);//DOM方法。

跨浏览器的方式插入规则，可以使用下面的函数。这个函数接受四个值：要向其中添加规则的样式表以及与addRule（）相同的三个参数，如图：

3.删除规则：

从样式表中删除规则的方法是deleteRule（）

1：偏移量

元素可见的大小由其高度、宽度决定，包括所有的内边距、滚动条的边框大小（注意，不包括外边框）。通过下列四个属性可以取得元素的偏移量。

offsetHeight：元素在垂直放上上占用的空间大小，一像素计；

offsetWidth：元素在水平方向上占用空间的大小，以像素记。

offsetLeft：元素的左边框至包含元素的左内边框之间的像素距离。

offsetTop：元素上外边框至元素上内边框之间的距离。

其中offsetLeft和offsetTop属性与包含元素有关，包含元素的引用存在offsetParent属性中

2：客户区的大小：

盒子模型分为外边距（margin）内边距（padding）边框（border）和内容（contain）区域

客户区就类似于盒子模型的contain区域，有两个属性，clienWidth和clienHeight

3：滚动大小：

滚动大小指的是包含滚动内容的元素的大小

包含了四个值：

scrollHeight：在没有滚动条的情况下，元素内容的总高度

scrollWidth：在没有滚动条的情况下，元素内容的总宽度

scrollLeft：被影藏在内容区域左边的像素数

scrollTop：被影藏在内容区域上方的像素数

scrollHeight和scrollWidth只要用于确定元素内容的实际大小。

通过scrollLeft和scrollRgiht属性既可以确定当前滚动的状态，也可以设置元素滚动的位置。

4：确定元素大小

各个浏览器为每个元素都提供了一个getBoundingClientRect（）方法，这个方法返回一个矩形对象，包含四个属性：left、top、right、和bottom

12.3 遍历

DOM2级遍历和范围模块定义了两个用于辅助完成顺序遍历DOM结构的类型：NodeIterator和TreeWalker。

12.3.1 NodeIterator

NodeIterator类型是两者中比较简单的一个，可以使用document.creatNodeIterator()方法创建他的新实例。这个方法接收四个参数

root：想要作为搜索起点的树中的节点。

whatToshow：表示要访问哪些节点的数字代码。

filter：是一个NodeFilter对象

entityReferenceExpansion：布尔值，表示是否要扩展实体引用。

DOM2级遍历和范围

（1）遍历即使用NodeIterator或TreeWalker对DOM执行深度优先的遍历

（2）NodeIterator是一个简单的接口，只允许以一个节点的步幅前后移动。而TreeWalker在提供相同功能的同时，还支持在DOM结构的各个方向上移动，包括父节点、同辈节点、和子节点等方向。

（3）范围是选择DOM机构中特定部分，然后再执行相应操作的一种手段。

（4）使用范围选区可以在删除文档中某些部分的同时，保持文档结构的格式良好，或者复制文档的相应部分。

（5）IE8及更早版本不支持“DOM2级 遍历和范围”模块，但它提供了一个专有的文本范围对象，可以用来完成简单的基于文本的操作范围。IE9完全支持DOM遍历

17章：错误处理及调试：
17.1.1 IE

IE是唯一一个在浏览器界面窗体中显示JS错误的，发生JS错误时，浏览器左下角会出现一个黄色的图标，旁边显示着Error on page

17.2.1try-catch语句：

try{
    //可能出错的语句
}catch（error）{
    //怎么处理 
}

1：finally子句

finally在try语句中一定会被执行，不管catch语句是否已经执行，他会忽略catch语句。

2：错误类型：

Error

EvalError

RangeError

ReferenceError

SyntaxError

相关推荐：

细说JavaScript对dom的操作

Vue中DOM的异步更新策略以及nextTick机制详解

jQuery中DOM节点操作方法总结

以上就是JS高级程序之DOM拓展的详细内容，更多请关注Gxl网其它相关文章！