dom-043（DOM04-HTML5）

发布时间：2025-12-10 19:19:35 浏览次数：9

DOM04-HTML5-

DOM04-HTML5DOM的两个扩展主要是SelectorsAPI和HTML5选择符API方法描述返回querySelector()接收一个CSS选择符该模式匹配的第一个元素querySelectorAll()接收一个CSS选择符返回NodeList实例HTML5html5新增了很多API,致力于简化CSS类的用法.1.与类相关的扩充1.getElements…_dom-043

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

选择符API

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

HTML5

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

1.与类相关的扩充

1.getElementsByClassName()

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

<body>    <p >测试1</p>    <p >测试2</p>    <p >测试3</p>    <p >        <p >后代</p>    </p></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>

【正版授权，激活自己账号】：Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

输出结果

2.classList属性

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

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

add(value) 将指定字符串添加到列表中,如果值已经存在,就不载添加 contains(value) 表示列表中是或否存在给定的,如果存在返回true 反之falss remove(value) 从列表中删除给定的字符串 toggle(value)如果列表中已经存在给定的值,删除它,如果列表中没有给定的值,就添加它.

<p  >classList测试</p><script> //classList var myp2 = document.getElementById("myp2"); myp2.classList.remove("user"); console.log(myp2); </script>

3.焦点管理

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

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

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

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

4.插入标记

1.innerHTML属性

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

<p >        <p>这是一个<strong>段落</strong>hh.</p>        <ul>            <li>item1</li>            <li>item2</li>            <li>item3</li>        </ul>    </p><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.滚动

scrollIntoViewIfNeeded(alignCenter):只在当前元素在视口中不可见的情况下,才滚动浏览器或容器元素 scrollByLines(lineCount):将元素内容滚动指定的行高 scrollByPages(pageCount):将元素的内容滚动指定额页面高度,具体高度由元素的高度决定.

上一篇：如何将视频转码为mp4格式下一篇：凡科商城常见问题指引

综合百科