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
  • 相关阅读:
    PL/SQL 中查询CLOB字段内容
    ubuntu14.04 swap not avalible交换分区不能使用
    ubuntu14.04安装ia32-lib
    rtems资料分享
    NIR相机
    rsync详解
    SublimeText3使用技巧总结
    msm8610 lcd driver code analysis
    Qualcomm Android display架构分析
    LCD framebuffer驱动设计文档
  • 原文地址:https://www.cnblogs.com/moqiutao/p/10107902.html
Copyright © 2011-2022 走看看