DOM的两个扩展主要是Selectors API 和 HTML5

选择符API

方法描述返回
querySelector()接收一个CSS选择符该模式匹配的第一个元素
querySelectorAll()接收一个CSS选择符返回NodeList实例

HTML5

html5新增了很多API,致力于简化CSS类的用法.

1.与类相关的扩充
1.getElementsByClassName()

这个方法是HTML5最受欢迎的一个方法,可以通过document对象及所有HTML元素调用该方法,

<body>
    <div class="test current">测试1</div>
    <div class="test current">测试2</div>
    <div class="test current">测试3</div>
    <div id="myDiv">
        <div class="selected">后代</div>
    </div>
</body>
<script>
    //根据类名返回所有相关元素
    var all = document.getElementsByClassName("test current");
    console.log(all);
    //取得id为myDiv元素中,带有类名为selected的所有元素
    //只能返回后台元素
    var selected = document.getElementById("myDiv").getElementsByClassName("selected");
    console.log(selected);
      
</script>

输出结果
在这里插入图片描述

2.classList属性

在操作类名时,需要通过className属性添加,删除和替换类名.className是一个字符串,所以即使只修改字符串的一个部分,也必须每次都设置整个字符串的值.

HTML5新增了一种操作类名的方式,可以放操作变得简单安全,就是classList属性.
有以下方法:

  • add(value) 将指定字符串添加到列表中,如果值已经存在,就不载添加
  • contains(value) 表示列表中是或否存在给定的,如果存在返回true 反之falss
  • remove(value) 从列表中删除给定的字符串
  • toggle(value)如果列表中已经存在给定的值,删除它,如果列表中没有给定的值,就添加它.
<div id="mydiv2" class="user logo">classList测试</div>
<script>
//classList
    var mydiv2 = document.getElementById("mydiv2");
    mydiv2.classList.remove("user");
    console.log(mydiv2);
</script>

返回
在这里插入图片描述

3.焦点管理

元素获得焦点的方式有页面加载,用户输入和在代码中调用focus方法.

var btn = document.getElementById("myBtn");
btn.focus();
alert(document.activElement === btn); //true
alert(document.hasFocus());//true

默认情况下,文档刚刚加载完成时,document.activeElement中保存的是document,body元素的引用.文档加载期间,document.activeElement的值为null

document.haFocus()方法,用于确定文档是否获得了焦点

4.插入标记
1.innerHTML属性

在读模式下,innerHTML属性返回与调用元素的所有节点,在写模式下,innerHTML会根据自定的值创建新的DOM树,然后用这个DOM树完全替换调用元素原先的所有子节点.

<div id="content">
        <p>这是一个<strong>段落</strong>hh.</p>
        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>
    </div>
<script>
 //innerHTML属性
    var content = document.getElementById("content");
    console.log(content.innerHTML);
</script>

返回
在这里插入图片描述
在写模式下,innerHTML的值会被解析为DOM子树,替换调用元素原来的所以子节点.

content.innerHTML = 'hello world';
//会按样式显示,但是早期的浏览器不一定会
content.innerHTML = "hello & welcome ,<b>\"reader\"</b>";

在大多是浏览器中,通过innerHTM插入<script></script>并不会执行其中的脚本

并不是所有元素都支持innerHTML属性,不支持的有<col><colgroup><frameset><head><html?<style><table><tbody><thead><tfoot><tr>

2.outerHTML属性

在读模式下,outerHTML返回调用它的元素和所有子节点的HTML元素,在写模式下,outerHTML会根据指定的HTML字符串.
假如打印上面的content的outerHTML属性,则返回
在这里插入图片描述

2.专有扩展
1.children属性

这个属性是HTMLCollection的实例,只包含元素中同样还是元素的子节点.除此之外,children属性和childNodes没有什么区别.

 var childCount = content.children.length;
 var firstChild = content.children[0];
2.contains()方法

调用contains()方法的应该是祖先节点,也就是搜索开始的节点,这个方法接收一个参数,就是要检测的后代节点.

    console.log(document.documentElement.contains(document.body));
// "true"
3.插入文本
  • innerText 读取值时,它会按照由浅入深的顺序,将子文档中的所有文本拼接起来,写入时,结果会删除元素的所有子节点.
  • outerText除了作用范围扩大到调用它的节点外,和innerText没有什么区别.
4.滚动
  1. scrollIntoViewIfNeeded(alignCenter):只在当前元素在视口中不可见的情况下,才滚动浏览器或容器元素
  2. scrollByLines(lineCount):将元素内容滚动指定的行高
  3. scrollByPages(pageCount):将元素的内容滚动指定额页面高度,具体高度由元素的高度决定.
# javascript
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

cover

用 OpenAI Assistants 做大模型应用开发

avatar CSDN学习社区
cover

1 小时解读鸿蒙 10 大热点问题

avatar CSDN学习社区
cover

1 小时解读鸿蒙 10 大热点问题

avatar CSDN学习社区