HTML5一DOM相关的API

本文介绍了DOM操作方法,如获取指定类的所有元素、管理元素的类列表、控制焦点等,以及文档的各种属性,包括加载状态、渲染模式、字符集等,并探讨了如何使用自定义属性增强网页功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.getElementsByClassName():接受一个参数,返回带有指定类的所有元素的NodeList。传入多个类名时,类名的先后顺序不重要。
2.classList:每个元素都有一个classList属性,它是DOMTokenList的实例,以集合的形式表示元素的class属性的值,它有如下方法:
  add(value):将给定的字符串添加到列表中,如果已存在,就不添加了。
 contains(value):列表中是否存在给定的值,如存在则返回true,否则返回false。
  remove(value):从列表中删除给定的字符串。
 toggle(value):如果列表已存在给定的值,删除它;如果列表中没有给定的值,添加他。
3.焦点管理
 document.activeElement:这个属性始终引用DOM中当前获得了焦点的元素。
     var o = document.getElementById_x_x_x_x_x_x_x_x_x('name');
     o.focus();
     alert(document.activeElement ==o));      //true
 document.hasFoucs():判断文档是否获得了焦点。
    var o = document.getElementById_x_x_x_x_x_x_x_x_x('name');
    o.focus();
    alert(document.hasFoucs());      //true
4.document.readyState:document对象的readyState属性,表示当前文档的加载状态,它有两个可能的值。
  loading:正在加载文档;
  complete:已经加载完文档。
5.document.compatMode:document对象的compatMode属性,表示当前浏览器采用哪种渲染模式:在标准模式下,document.compatMode的值等于'CSS1Compat';在混杂模式下,它的值等于'BackCompat'。
6.document.head:引用文档的head元素。
  var head =document.head||document.getElementsByTagName('head')[0];
7.字符集属性
  document.charset:表示文档中实际使用的编码级;
 document.defaultCharset:根据浏览器及操作系统的设置,当前文档默认的编码级。
 如果文档没有使用默认的编码级,则charset和defaultCharset属性的值可能会不一样。
8.自定义属性:HTML5规定可以添加非标准的属性,但要添加前缀data-,目的是为元素提供与渲染无关的信息,或者提供语义信息。
 

添加完自定义属性后,可以通过元素的dataset属性来访问自定义属性的值。dataset属性的值是DOMStringMap的一个实例,也就是一个名值对的映射。在这个映射中,每个data-name形式的属性都会有一个对应的属性,只不过属性名没有data-前缀。
  var div =document.getElementById_x_x_x_x_x_x_x_x_x('div');
 alert(div.dataset.class);    //hello
 alert(div.dataset.id);       //world




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值