zoukankan      html  css  js  c++  java
  • 11DOM扩展

    11.1选择符API

    众多JavaScript库中最常用的一项功能,就是根据CSS选择符选择与某个模式匹配的DOM元素。

    querySelector()方法接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null。通过Documnet类型调用时会在文档元素的范围内查找匹配的元素。而通过Element类型调用,只会在该元素后代元素的范围内查找匹配的元素。

    querySelectorAll()方法返回的是所有匹配的元素而不仅仅是一个元素,返回的是一个Nodelist的实例。要取得返回的Nodelist中的每一个元素,可以使用item()方法,也可以使用方括号语法。

    matchesSelector()方法接收一个参数,即CSS选择符,如果调用元素与该选择符匹配,返回true;否则,返回false。

    11.2元素遍历

    Element Traversal API为DOM元素添加了5个属性:childElementCount、firstElementChild、lastElementChild、previousElementSibling、nextElementSibling。

    11.3HTML5

    与类相关的扩充

    getElementByClassName()方法接收一个参数,即一个包含一个或多个类名的字符串,返回带有指定类的所有元素的NodeList。

    classList属性可以添加、删除和替换类名。这个属性有如下方法:add()、contain()、remove()和toggle()。

    焦点管理

    元素获得焦点的方式有页面加载、用户输入(通常是按Tab键)和在代码中调用focus()方法。document.hasFocus()方法用于确定文档是否获得了焦点。

    HTMLDocument的变化

    document的readyState属性有两个可能的值:loading和complete。document.compatMode()属性可以检测页面的兼容模式。document.head可以应用文档的<head>元素。

    字符集属性

    charset属性表示文档中实际使用的字符集,也可以用来指定新字符集。defaultCharset表示根据默认浏览器及操作系统的设置,当前文档默认的字符集应该是什么。

    自定义数据属性

    HTML5规定可以为元素添加非标准的属性,弹药添加前缀data-,可以通过元素的dataset属性来访问自定义属性的值。

    插入标记

    在读模式下,innerHTML属性返回与调用元素的所有子节点(包括元素、注释和文本节点),在写模式下,innerHTML会根据指定的值创建新的DOM树,然后用这个DOM树完全替换调用元素原先的所有子节点。在读模式下,outerHTML返回调用它的元素及所有子节点的HTML标签,在写模式下,outerHTML会根据指定的HTML字符串创建新的DOM子树,然后用这个DOM子树完全替换调用元素。insertAdjacentHTML()方法可以插入标记,第一个参数的可能取值:beforebegin、afterbegin、beforeend和afterend。使用这三个属性时,最好先手工删除要替换的元素的所有事件处理程序和JavaScript对象属性。

    scrollIntoView()方法

    scrollIntoView()可以设置滚动页面。

    11.4专有扩展

    文档模式

    通过document.documentMode属性可以知道给定页面使用的是什么文档模式。

    children属性

    children属性只包含元素中同样还是元素的子节点。

    contain()属性

    contain属性用来检测某个节点是不是另一个节点的后代。compareDocumentPosition()也能够确定节点间的关系。

    插入文本

    在通过innerText读取值时,它会按照由浅入深的顺序,将子文档树种的所有文本拼接起来,在通过innerText写入值时,结果会删除元素的所有子节点,插入包含相应文本值的文本节点。可以通过innerText属性过滤掉HTML便签。outerText属性。

    滚动

    scrollIntoViewIfNeeded(alignCenter)、scrollByLines(lineCount)、scrollByPages(pageCount)

  • 相关阅读:
    java中的上转型对象
    java工程项目里,在一个包里面,不能出现同名的类名,这问题是刚接触java才会遇到的,特别是新手一般都没有建立包,而是使用默认的,易出现同名的类名,导致eclipse提示错误
    接口作为参数,不同的接口调用不同的方法,例如:输出“I love Game”或输出“我喜欢游戏”
    JavaScript--原型链
    JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scrollTop/scrollWidth,scrollHeight、clientHeight,clientWidth区别
    JavaScript--结合CSS变形、缩放能拖拽的登录框
    JavaScript--放大镜
    JavaScript--返回顶部方法:锚链接、行内式js写法、外链式、内嵌式
    JavaScript--封装好的运动函数+旋转木马例子
    JavaScript--漏写var却还能使用标签
  • 原文地址:https://www.cnblogs.com/dingzibetter/p/js.html
Copyright © 2011-2022 走看看