《JavaScript高等程序设计》笔记：DOM扩大（十一）

2024年5月31日 202次阅读 来源: 风雨后见彩虹

选择符API

querySelector()要领

// 获得body元素
var tbody = document.querySelector('body');

// 获得ID为"myDIV"的元素
var myDIV = document.querySelector("#myDiv");

// 获得类为"selected"的第一个元素
var selected = document.querySelector(".selected");

// 获得类为"button"的第一个图象元素
var img = document.body.querySelector("img.button");

querySelectorAll()要领

// 获得某<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");

HTML5

与类相干的扩大

  1. getElementsByClassName()要领
    改要领能够经由过程document对象及一切HTML元素挪用该要领。
// 获得一切类中包括"username"和"current"的元素。类名的先后顺序无所谓
var allCurrentUsernames = document.getElementsByClassName("username current");

// 获得ID为"myDiv"的元素中带有类名"selected"的一切元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");

核心治理
HTML5也添加了辅佐治理DOM核心的功用。起首就是document.activeElement属性，这个属性始终会援用DOM中当前获得了核心的元素。

var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); // true

默许情况下，文档方才加载完成时，document.activeElement中保留的是document.body元素的援用。文档加载时期，docuemnt.activeElement的值为null。
别的就是新增了document.hasFocus()要领，这个要领用于肯定文档是不是获得了核心。

var button = document.getElementById("myButton");
botton.focus();
alert(document.hasFocus()); // true
    原文作者：风雨后见彩虹
    原文地址: https://segmentfault.com/a/1190000002405469
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞