11.DOM扩展——JavaScript高级程序设计(笔记)

00.querySelector()方法：接收一个CSS选择符，返回该模式匹配的第一个元素，如果没有找到匹配的元素，返回null.

 

01.querySelectAll()方法：一个CSS选择符，但返回的是所有匹配的元素二不仅仅是一个元素。这个方法返回的是一个NodeList的实例

 

02.元素遍历

　　Element Traversal API为DOM元素添加5个属性

　　　　*childElementCount:返回一个元素（不包括文本节点和注释）的个数

　　　　*firstElementChilde:指向第一个子元素;lastChild的元素版

　　　　*lastElementChild:指向最后一个字元素；lastChild的元素版

　　　　*previousElementSibling:指向前一个同辈元素;previousSibling的元素版

　　　　*nextElementSibling:指向后一个同辈元素；nextSibling的元素版

 

03.getElementsByClassName()方法

04.classList属性

　　　*add(value):将给定的字符串添加到列表中，如果值已经存在，就不添加了

　　　*contains(value):表示列表中是否存在给定的值，如果存在则返回true，否则返回false

　　　*remove(value):从列表中删除给定的字符串

　　　*toggle(value):如果列表中已经存在给定的值，删除他；如果列表中没有给定的值，添加它。

 

05.charset字符集属性

 

06.插入标记

　　a.innerHTML属性：在读模式下，属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的HTML标记。在写模式下，innerHTML会根据制定创新的DOM树，然后用DOM树完全替换调用元素原先的所有子节点。

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

　　c.insertAdjacentHTML()方法：参数：bdeforebegin\afterbegin\beforeend\afterend

　　d.scrollIntoView()方法：通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。

　　

07虽然所有浏览器开发商都知晓坚持标准的重要性，但在发现某项功能缺失时，这些开发商都会一如既往地向DOM中添加专有扩展，以弥补功能上的不足。表面上看，这种各行其是的做法似乎不太好，但实际上专有扩展为web开发提供了很多重要的功能，这些功能最终都在HTML5规范中得到标准化。

 

08.插入文本

　　a.innerText属性：属性可以通过操作元素中包含的所有文本内容，包括字文档树种的文本。通过innerText读取值时，它会按照由浅入深的顺序，将自文档树种的所有文本拼接起来。通过innertText写入值时，结果会删除元素中的所有字节点，插入包含相应值的文本节点。

 

09.滚动

　　scrollIntoViewINeeded：只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让它课件。如果当前元素在视口中课件，这个方法什么也不做。如果将可选的alignCenter参数设置为true，则表示尽量将显示的视口中部

　　scrollByLines：将元素的内容滚动指定的高

　　scrollByPages:将元素的内容滚动制定的页面高度，具体高度由元素的高度决定。