资讯专栏INFORMATION COLUMN

《JavaScript高级程序设计》笔记:DOM扩展(十一)

BenCHou / 2743人阅读

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

选择符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 与类相关的扩充

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/85401.html

相关文章

  • JavaScript高级程序设计笔记JavaScript简介(一)

    摘要:实现一个完整的实现应该由下列三个不同的部分组成核心文档对象模型浏览器对象模型文档对象模型是针对但经过扩展用于的应用程序编程接口。级别级由两个模块组成核心和。其中,核心规定是如何映射基于的文档结构,以便简化对文档中任意部分的访问和操作。 javascript从一个简单的输入验证器发展成为一门强大的编程语言,完全出乎人们的意料。 javascript实现一个完整的javascript实现应...

    Edison 评论0 收藏0
  • JavaScript高级程序设计学习笔记一(JavaScript简介)

    摘要:在上百种语言中算是命好的一个,还有就是最近纳入高考体系的。由以下三个部分构成。就是对实现该标准规定的各个方面内容的语言的描述。是针对但经过扩展的用于的应用程序编程接口。将页面映射为由节点构成的树状结构。 JavaScript的历史这里就不再赘述了,当然JavaScript的历史还是比较有意思的。在上百种语言中JavaScript算是‘命’好的一个,还有就是最近纳入高考体系的python...

    supernavy 评论0 收藏0
  • 001-读书笔记-JavaScript高级程序设计 JavaScript简介

    摘要:由于计算机的国际化,组织的标准牵涉到很多其他国家,因此组织决定改名表明其国际性。规范由万维网联盟制定。级标准级标准是不存在的,级一般指的是最初支持的。 这篇笔记的内容对应的是《JavaScript高级程序设计(第三版)》中的第一章。 1.ECMA 和 ECMA-262 ECMA 是欧洲计算机制造商协会的缩写,全程是 European Computer Manufacturers Ass...

    masturbator 评论0 收藏0
  • javascript高级程序设计笔记:script元素属性

    摘要:高级程序设计摘录可选。表示通过属性指定的代码的字符集。这个属性并不是必需的,如果没有指定这个属性,则其默认值仍为。规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于事件执行。 《javascript高级程序设计》摘录: async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或 等待加载其他脚本。只对外部...

    since1986 评论0 收藏0
  • JavaScript 高级程序设计(第三版)笔记

    摘要:以上是使用转换函数方法时会返回的值在用判断的时候,首先执行了,然后判断为真或假。对象的遍历返回一个数组,包括对象自身的不含继承的所有可枚举属性不含属性的键名。 tip:本文含部分Es6语法 1.if(a)的自动转换 数据类型    转换为true的值       转换为false的值   Boolean      true              false   String  任何...

    tulayang 评论0 收藏0

发表评论

0条评论

BenCHou

|高级讲师

TA的文章

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