第十一章 DOM扩展

hghh
127 阅读4分钟

选择符API

  1. querySelector()

    接收一个 CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回 null。

  2. querySelectorAll()

    接收一个CSS选择符，返回一个带有所有属性和方法的NodeList实例，其底层实现则类似于一组元素的快照

    要取得返回的 NodeList 中的每一个元素，可以使用 item()方法，也可以使用方括号语法，比如：

    //取得某<div>中的所有<em>元素（类似于 getElementsByTagName("em")）
var ems = document.getElementById("myDiv").querySelectorAll("em"); 
//取得类为"selected"的所有元
var selecteds = document.querySelectorAll(".selected"); 
//取得所有<p>元素中的所有<strong>元
var strongs = document.querySelectorAll("p strong"); 
var i, len, strong; 
for (i=0, len=strongs.length; i < len; i++){ 
    strong = strongs[i]; //或者 strongs.item(i) 
    strong.className = "important"; 
}

  3. matchesSelector()

    接收一个CSS选择符，如果调用元素与该选择符匹配，返回 true；否则，返回 false。

元素遍历

  • childElementCount：返回子元素（不包括文本节点和注释）的个数。
  • firstElementChild：指向第一个子元素；firstChild 的元素版。
  • lastElementChild：指向最后一个子元素；lastChild 的元素版。
  • previousElementSibling：指向前一个同辈元素；previousSibling 的元素版
  • nextElementSibling：指向后一个同辈元素；nextSibling 的元素版

HTML5

与类相关的扩充

  1. getElementsByClassName()方法

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

  2. classList属性

    classList与NodeList类似，有length属性，取得每个元素可以使用 item()方法，也可以使用方括号语法。此外，还包括以下方法：

    • add(value)：将给定的字符串值添加到列表中。如果值已经存在，则不添加了
    • contains(value)：表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false
    • remove(value)：从列表中删除给定的字符串
    • toggle(value)：如果列表中存在给定的值，删除；如果列表中没有给定的值，添加
    <div class="bd user disabled">...</div> 

//删除"disabled"类
div.classList.remove("disabled"); 
//添加"current"类
div.classList.add("current"); 
//切换"user"类
div.classList.toggle("user"); 
//确定元素中是否包含既定的类名
if (div.classList.contains("bd") && !div.classList.contains("disabled")){ 
   //执行操作
} 
//迭代类名
for (var i=0, len=div.classList.length; i < len; i++){ 
    doSomething(div.classList[i]);
}

焦点管理

  1. document.activeElement()：引用 DOM 中当前获得了焦点的元素

  2. document.hasFocus()：确定文档是否获得了焦点

HTMLDocument的变化

  1. readyState属性：可用于实现文档加载完成后执行的操作，有两个可能值：loading-正在加载文档，complete-已经加载完文档
if (document.readyState === "complete") {
    //执行文档加载完成后的操作
}

  1. document.compatMode：浏览器采用的渲染模式，有两个可能值：CSS1Compat-"标准模式"，BackCompat-"混杂模式"

  2. head属性：引用文档的<head>元素

字符集属性

  1. document.charset属性：文档中实际使用的字符集，也可以用来指定新的字符集
  2. docum.defaultCharset属性：根据默认浏览器及操作系统的设置，当前文档默认的字符集。

自定义数据属性

HTML5 规定可以为元素添加非标准的属性，但要添加前缀 data-。添加了自定义属性之后，可以通过元素的 dataset 属性来访问自定义属性的值。每个 data-name 形式的属性都会有一个对应的属性，只不过属性名没有 data-前缀

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

var div = document.getElementById("myDiv"); 
//取得自定义属性的值
var appId = div.dataset.appId; 
var myName = div.dataset.myname; 
//设置值
div.dataset.appId = 23456; 
div.dataset.myname = "Michael";

插入标记

  1. innerHTML属性

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

  2. outerHTML属性

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

  3. insertAdjacentHTML()

    接收两个参数，插入的位置和要插入的HTML文本，第一个参数必须是下列值之一：

    • "beforebegin"，在当前元素之前插入一个紧邻的同辈元素；
    • "afterbegin"，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
    • "beforeend"，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；
    • "afterend"，在当前元素之后插入一个紧邻的同辈元素。

scrollIntoView()

所有 HTML 元素都可以调用scrollIntoView()方法，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。当传入true，或者不传入参，窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。当传入 false ，调用元素会尽可能全部出现在视口中

专有扩展

contains()

检测某个节点是否为另一个节点的后代。调用 contains()方法的应该是祖先节点，也就是搜索开始的节点，这个方法接收一个参数，即要检测的后代节点。如果被检测的节点是后代节点，该方法返回 true；否则，返回 false。

插入文本

  1. innerText属性

    在通过innerText 读取值时，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来。在通过innerText 写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点。

  2. outText属性

    在读取文本值时，outerText 与 innerText 的结果完全一样。但在写模式下，outerText 会替换整个元素（包括子节点）。

滚动

  • scrollIntoViewIfNeeded(alignCenter)：只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中可见，这个方法什么也不做。如果将可选的 alignCenter 参数设置为 true，则表示尽量将元素的垂直方向显示在视口中部
  • scrollByLines(lineCount)：将元素的内容滚动指定的行高，lineCount 值可以是正值，也可以是负值。Safari 和 Chrome 实现了这个方法
  • scrollByPages(pageCount)：将元素的内容滚动指定的页面高度，具体高度由元素的高度决定
//将页面主体滚动 5 行
document.body.scrollByLines(5); 
//在当前元素不可见的时候，让它进入浏览器的视口
document.images[0].scrollIntoViewIfNeeded(); 
//将页面主体往回滚动 1 页
document.body.scrollByPages(-1);
avatar
文章
阅读
粉丝