1 分钟学 6 个常见的 DOM 基础操作(一)
前端达人
共 1087字,需浏览 3分钟
· 2022-02-27
大家好,今天我们来花 1 分钟来学习 DOM 相关的基础操作,内容虽然简单,但是还是有必要归纳总结的,希望这些整理对大家有所帮助。
1、判断当前 DOM 是否匹配给定的CSS选择器
判断DOM是否匹配,如果匹配返回 true
const matches = function (ele, selector) {
return (
ele.matches ||
ele.matchesSelector ||
ele.msMatchesSelector ||
ele.mozMatchesSelector ||
ele.webkitMatchesSelector ||
ele.oMatchesSelector
).call(ele, selector);
};
2、判断当前元素是否包含给定的样式
ele.classList.contains('class-name');
3、确认两个元素的父子关系
有时候我们需要确认当前元素是否给定元素的后代,我们可以这么做。
使用 contains 方法
const isDescendant = parent.contains(child);
逐层上找是否匹配
// 判断元素是否为某个元素的后代
const isDescendant = function (parent, child) {
let node = child.parentNode;
while (node) {
if (node === parent) {
return true;
}
// 赋值遍历
node = node.parentNode;
}
// 如果未匹配返回 false
return false;
};
4、判断元素是否进入可视区域
const isInViewport = function (ele) {
const rect = ele.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
5、判断代码的运行环境是否在浏览器里
我们可以通过检查 window 和 document 对象的存在性来检测当前代码是否在浏览器中运行
const isBrowser = typeof window === 'object' && typeof document === 'object';
6、判断当前浏览器是否原生支持日期选择输入框
以下方法,将判断当前浏览器是否支持日期输入框:
const isDateInputSupported = function () {
// 创建表单输入框元素
const ele = document.createElement('input');
// 添加日期属性
ele.setAttribute('type', 'date');
const invalidValue = 'not-a-valid-date';
// Set an invalid value
ele.setAttribute('value', invalidValue);
// 如果支持data属性,赋值内容将不起效,将返回空
return ele.value !== invalidValue;
};
你还可以用同样的方法,来判断 input 表单输入框是否支持 email, range, url 属性。
总结
由于时间原因,今天分享的 DOM 基础操作专题就分享到这里,感谢你的阅读。
来源:https://github.com/1milligram/html-dom
相关阅读
1分钟学会如何用 JS 对象代理(proxies)实现对象的私有属性
1分钟用 CSS + HTML 实现个按字母吸附滑动的列表(类似手机通讯录列表)
「1分钟学JS基础」移除最后一个字符、Promise.allSettled()的使用、日期数组排序
「1 分钟学 DOM 基础操作」添加和移除元素样式、添加至元素内、添加和移除事件、计算鼠标相对元素的位置
评论
了解加密货币到加密货币的互换
1、什么是加密货币互换?加密货币到加密货币的互换是指以现行市场汇率将一种加密货币直接兑换为另一种加密货币。与需要法定货币存款和较长流程的传统交易所不同,加密货币到加密货币的互换可以无缝地促进交换。掉期在提高加密货币的流动性和效率方面发挥着重要作用。该功能使用户能够将他们的加密货币与钱包中的其他代币进
区块链头条
0
李彦宏:开源大模型不如闭源,后者会持续领先;周鸿祎:“开源不如闭源” 的言论是胡说八道
架构师大咖
架构师大咖,打造有价值的架构师交流平台。分享架构师干货、教程、课程、资讯。架构师大咖,每日推送。
公众号该公众号已被封禁0、李彦宏:开源大模型不如闭源,后者会持续领先当今
源码共读
0
【第129期】程序员的新宠:三款终端工具,让你告别Xshell!
概述 WindTerm:跨平台的SSH利器 首先介绍的是WindTerm,这是一款使用C语言开发的跨平台SSH客户端。它不仅完全免费,而且没有商业使用的限制。WindTerm支持SSH v2、Telnet、Raw Tcp等协议,而且性能出色,甚至超过了FinalShell和Electerm。功能
前端微服务
0
字节员工:35岁以后被裁员的,后来都走了哪条路?现在2-2,要不要利用最后一年拼命上个岸。
架构师大咖
架构师大咖,打造有价值的架构师交流平台。分享架构师干货、教程、课程、资讯。架构师大咖,每日推送。
公众号该公众号已被封禁在当今竞争激烈的职场环境中,年龄并不总是一个决定性
源码共读
0
上班的时候,有一群摸鱼搭子非常重要...
上班的时候,有一群摸鱼搭子非常重要!一到上班时间,他们就从四面八方涌进群里冒泡...从八卦聊到股市、从职场聊到乌X兰局势,偶尔还会复读、相亲、battle...然后,下午6点钟准时消失不见...所以你要不要加入我们一起摸鱼?我们有北京、上海、深圳、广州、杭州、武汉、成都、南京等8个城市的摸鱼群,还有
产品经理日记
0
AI论文写作工具和生成器(一)
随着人工智能和大模型的迅猛发展,AI对研究人员和学生提供了极大的写作便利。本文将介绍市面上常用的AI论文写作工具,帮助你提高论文写作效率并遵循学术道德。请仅将AI论文生成器视为辅助参考手段,切勿直接挪用全文。XPaper AlXPaper AI是由点击式创作工具晓语台推出的一款论文写作生成平台,只需
IQ前端
0
周四002 瑞超:同样落寞的境遇——北雪平vs埃尔夫斯堡
上赛季最终排名联赛第9的北雪平本赛季伊始表现不佳,4轮战罢他们仅以1胜1平2负的战绩排在倒数第三,这支历史上曾夺得13次联赛冠军、6次杯赛冠军老牌劲旅,正如英格兰赛场上的一众百年俱乐部,在低谷中不断探索着出路。球队主教练安德烈亚斯·阿尔姆曾是AIK索尔纳及赫根队的主教练,他于今年年初刚刚拿起球队教鞭
产品与体验
0
雷军辟谣了!不是高考状元,卡里也没有冰冷的 40 亿
架构师大咖
架构师大咖,打造有价值的架构师交流平台。分享架构师干货、教程、课程、资讯。架构师大咖,每日推送。
公众号该公众号已被封禁最近很火的雷军简历,听说落魄时卡里只有冰冷的 40
源码共读
0