首页 > web前端 > js教程 > 正文

JS高级程序之DOM拓展

小云云
发布: 2018-03-07 13:30:13
原创
1494 人浏览过

11.1选择符API:

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中定义样式的方法有三种:外部,嵌入