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:将元素的内容滚动制定的页面高度,具体高度由元素的高度决定。

猜你喜欢

转载自www.cnblogs.com/aixiaoxiaoyu/p/9541120.html