• 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()方法:参数:bdeforebeginafterbegineforeendafterend

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

      

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

    08.插入文本

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

    09.滚动

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

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

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

  • 相关阅读:
    java将Thu Jun 11 00:00:00 CST 2020类型转换为正常的时间类型
    SSM中JSP和thymeleaf同时使用
    java中thymeleaf获取项目根路径
    使用position:fixed定位的DIV元素,如何使其居中
    HTML设置textarea不可拖动
    使用js让Html页面弹出小窗口
    wow.js – 让页面滚动更有趣,使用方法
    CSS修改文本框placeholder提示的文字颜色
    JS监听用户按下ESC
    当div内所有元素都是浮动的时候,让容器(div)自动适应高度
  • 原文地址:https://www.cnblogs.com/aixiaoxiaoyu/p/9541120.html
Copyright © 2020-2023  润新知