H5---DOM操作API （2）H5---全局属性

最新推荐文章于 2023-03-22 16:13:32 发布

☀ ◆◆龘 ☽

最新推荐文章于 2023-03-22 16:13:32 发布

阅读量168

点赞数

本文链接：https://blog.csdn.net/zzmbkh/article/details/101380556

版权

本文深入探讨H5中DOM操作API的进化，包括querySelector和querySelectorAll的使用，以及H5新增的全局属性如contenteditable, contextmenu等，对比H4全局属性，解析这些属性如何提升网页开发效率。

摘要由CSDN通过智能技术生成

H5—DOM操作API

在传统的 JS开发中，查找 DOM 往往是开发人员遇到的第一个头疼的问题，原生的 JS所提供的 DOM 选择方法并不多，仅仅局限于通过 tag, name, id 等方式来查找，这显然是远远不够的，如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式，或者使用某个库jQuery

<div class=”demo”>区域</div>

在这里插入图片描述

新DOM获取API出现：
现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持，甚至就连微软也派出了 IE 8 作为支持这一特性的代表，querySelector 和 querySelectorAll 作为查找 DOM 的又一途径，极大地方便了开发者，使用它们，你可以像使用 CSS 选择器一样快速地查找到你需要的节点。
优点：
H5新的获取DOM的querySelector 和querySelectorAll 方法可以不需要额外的jQuery等支持，也可以方便的获取DOM元素，语法跟jQuery类似。

获取元素API语法

document.querySelector("选择器");
document.querySelectorAll("选择器");

querySelector 和 querySelectorAll 的使用非常的简单，它和 CSS 的写法完全一样，对于前端开发人员来说，难度几乎为零。

在这里插入图片描述

获取百度链接在这里插入图片描述，获取成功②接下来，获取所有的li下的a ，验证后发现只获取到了第1个，无法获取所有。所以得出document.querySelector只能获取单个元素。

获取元素API

针对H5全局属性，前端面试常问以下问题：

1、什么是全局属性？
可以应用于任何html元素的属性称之为全局属性，例如class、id等，即全局属性可以应用于任何html元素。
2、什么是局部属性？
局部属性指的是只能应用到指定标签的属性，例如href、rel、type等属性无法应用于任何html元素。
3、全局属性和局部属性有什么区别？
普通局部属性只能应用于一些特定的html元素，而全局属性可用于任何html元素。
4、H5之前，即H4的全局属性有哪些？
H4全局属性描述
class 规定元素的一个或多个类名
id 规定元素的唯一 id
style 规定元素的行内 CSS 样式
title 规定有关元素的额外信息
5、H 在这里插入图片描述 5新增的全局属性有哪些？
H5全局属性描述
contenteditable 规定元素内容是否可编辑
contextmenu 规定元素的上下文菜单，上下文菜单在用户点击元素时显示。
data-* 自定义属性，用于存储页面或应用程序的私有定制数据
draggable 规定元素是否可拖动
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden 可以对标签内容隐藏（代替CSS中输入的display：none）
spellcheck 规定是否对元素进行拼写和语法检查
translate 规定是否应该翻译元素内容在这里插入图片描述

H4—全局属性

首先介绍下H4全局属性
①class—规定元素的一个或多个类名
②id—规定元素的唯一 id
③style—规定元素的行内 CSS 样式
④title—规定有关元素的额外信息
⑤lang—规定元素内容的语言
lang 属性可以指定标签范围内的元素的语言种类，英语lang=“en”,中文lang=“zh”，日文lang="ja

H4全局属性
dir—规定元素中内容的文本方向
属性值ltr从左至右、rtl从右至左
"
在这里插入图片描述

accesskey—规定激活元素的快捷键
作用：快捷键操作，Windows下alt+指定键，前提是浏览器alt并不冲突
支持元素： <button>, <input>, <label>, 以及 <textarea>
在这里插入图片描述

contenteditable—规定元素内容是否可编辑

contentEditable是由微软开发。被其他浏览器反编译并投入应用的一个全局属性。它的主要功能是是否允许用户编辑元素的内容，被编辑元素必须是获得鼠标焦点的元素。
contentEditable属性是一个布尔值属性，可以指定为ture或false。该属性还有一个隐藏属性的inherit状态，为true是允许用户编辑;为false时元素不能被用户编辑;没有指定时则由inherit状态决定，如果父元素是可编辑的，该元素也是可编辑的。

contextmenu

在这里插入图片描述

contextmenu 鼠标右击事件
在这里插入图片描述
data

自定义属性，用于存储页面或应用程序的私有定制数据
在这里插入图片描述

data

获取自定义属性值：
在这里插入图片描述

在这里插入图片描述

hidden-可以对标签内容隐藏（代替CSS中输入的display：none）
在这里插入图片描述

designMode属性—用来指定整个页面是否可编辑
浏览器兼容：
IE8出于安全考虑，不允许使用designMode属性让页面进入编辑状态
IE9允许使用designMode属性让页面进入编辑状态
Chrome3+ 和 Safari 使用内嵌frame的方式，该内嵌frame是可编辑
FF和Opera允许使用designMode属性让页面进入编辑状态