HTML5中的DOM扩展（一）

大熊G
706 阅读2分钟

这是我参与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()或者数组的中括号来获取其中的元素。它还有几个方法，我们写一下。

  1. add() 向类名里面添加指定的内容，如果它有这个值的话，则不做操作。
  2. contains() 判断内容是否存在类中，返回的是布尔值
  3. remove()顾名思义啦，删除
  4. 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应用，

avatar
文章
阅读
粉丝