我要投稿

1 分钟学 6 个常见的 DOM 基础操作（一）

admin 程序员资讯

2023-05-27 0 909

我们好，那时他们涂超华 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、推论现阶段浏览器与否原生支持日期选择输入框

以下方式，将推论现阶段浏览器与否支持日期输入框：

constisDateInputSupported =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 属性。