资讯专栏INFORMATION COLUMN

红皮书(10):DOM扩展

ASCH / 526人阅读

摘要:取得所有类中包含和的元素。类名的先后顺序无所谓取得为的元素中带有类名的所有元素焦点管理也添加了辅助管理焦点的功能。首先就是属性,这个属性始终会引用中当前获得了焦点的元素。另外就是新增了方法,这个方法用于确定文档是否获得了焦点。

选择符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()方法
// 取得某
中的所有元素(类似于getElementsByTagName("em")) var ems = document.getElementById("myDiv").querySelectorAll("em"); // 取得类为"selected"的所有元素 var selecteds = document.querySelectorAll(".selected"); // 取得所有

元素中的所有元素 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://www.ucloud.cn/yun/87466.html

相关文章

  • js中的事件流和事件处理程序

    摘要:事件流描述的是从页面中接受事件的顺序。事件流中的事件流是事件冒泡流。顺序是从外向里级事件规定的事件流包括三个阶段事件捕获阶段处于目标阶段和事件冒泡阶段,其中到是处于目标阶段,如图所示。添加的事件会被逆序执行。 HTML和js之间的交互是通过事件实现的。 事件流描述的是从页面中接受事件的顺序。 事件流 IE中的事件流是事件冒泡流。顺序是从里向外 eg:div-body-html-...

    forsigner 评论0 收藏0
  • 皮书(3):变量、作用域和内存问题

    摘要:局部变量只在函数执行过程中存在。此时,局部变量就没有存在的必要了,因此可以释放他们所占的内存以供他们使用。这一做法适合于大多数全局变量和局部变量的属性。 基本类型和引用类型的值 动态的属性 var person = new Object(); person.name = Nicholas; alert(person.name); // Nicholas var name = N...

    phodal 评论0 收藏0
  • JS皮书解读之防篡改对象

    摘要:注意一旦把对象定义为防篡改,就无法撤销了。使用阻止对象扩展注意严格模式下,不是而是报错。使用冻结对象对于库作者而言,冻结对象可防止有人修改库的核心对象。 showImg(https://segmentfault.com/img/remote/1460000019753620); 前言:去年7月份在简书写的,发现后端、React中也有体现,觉得有必要在微信上分享下。 注意:一旦把对象定义...

    张迁 评论0 收藏0

发表评论

0条评论

ASCH

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<