zoukankan      html  css  js  c++  java
  • 《JavaScript高级程序设计》笔记:DOM扩展(十一)

    选择符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
  • 相关阅读:
    nginx负载均衡代理配置脚本
    想查看下编译安装的nginx默认都带有哪些模块
    docker安装mysql8.0.18
    Reached target Basic System
    layer iframe的一些操作记录:
    微信JSAPI支付
    用go和python实现在图片里藏图片
    go反射优化
    go图片灰度化
    golang 创建发送邮件服务
  • 原文地址:https://www.cnblogs.com/moqiutao/p/10107902.html
Copyright © 2011-2022 走看看