HTML5中的DOM扩展（一）
theme: channing-cyan
这是我参与8月更文挑战的第22天，活动详情查看：8月更文挑战
我们都知道HTML5与之前的html是截然不同的方向，html5规范新增了很多DOM节点操作。我们下面来展开说一下
css类扩展
伴随着HTML4的发展，class类的使用也逐渐变多，主要是我们用的css属性也变多了，其中有俩个DOM扩展的方法被广泛使用。一个是获取css类的元素，还有一个是实现类名的增删改查。
document.getElementsByClassName()
这个方法和我们前几天说的document.querySelector()方法很像，只不过这个方法是获取类名，它不需要加点，也不需要浏览器判断我们获取的是类还是id或者标签名。
<body>
<div class="box">
<p class="name">我是Jackson</p>
</div>
<div class="box"></div>
</body>
<script>
let box = document.getElementsByClassName("box");
let name = document.getElementsByClassName("name");
console.log(box);
console.log(name);大家可以看到我上面写了俩个名字为box的类，如果有多个的话，我们输出它直接就是一个包含着元素类的NodeList。
image.png
IE9版本以上的浏览器都支持这个属性。
classList属性
classList更加方便了我们添加和删除class类，它也有length属性，还可以通过item()或者数组的中括号来获取其中的元素。它还有几个方法，我们写一下。
- add() 向类名里面添加指定的内容，如果它有这个值的话，则不做操作。
- contains() 判断内容是否存在类中，返回的是布尔值
- remove()顾名思义啦，删除
- toggle() 如果存在指定内容的话就删除，如果不存在的话就添加。
box[0].classList.add('content');我们在第一个类名为box的又添加了一个类名叫content，可以看到确实是添加上了，这个的用法就是这么简单。
image.png
焦点管理
我们在写表单的时候都会判断是否获取当前焦点，先说一下document.activeElement方法，它返回的是当前拥有焦点的元素，它默认的话是body元素。
console.log(document.activeElement);//body我们可以利用focus()方法来让一个元素获取焦点。
let btn = document.getElementById('button');
btn.focus();
console.log(btn == document.activeElement);//true
image.png
还有一个document.hasFocus()方法。它判断当前文档是否拥有焦点，返回的布尔值。
console.log(document.hasFocus());
image.png
这里我们返回false的原因就是当前是button获取的焦点。
这种焦点管理主要还是用于无障碍web应用。感兴趣的同学可以自行了解一下无障碍web应用，
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-08-22，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
