获取dom方法封装

最新推荐文章于 2022-06-06 15:36:06 发布
最新推荐文章于 2022-06-06 15:36:06 发布
阅读量170 收藏
点赞数 1
分类专栏： js合集 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dlf_123456/article/details/110190995
版权

在这里插入图片描述

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素
// 获取dom方法封装
getDomItem(type, name) {
  return document.querySelector(`[${type}="${name}"]`);
}
// 上图获取dom可以写为
this.getDomItem("class", "example").style.backgroundColor = "yellow";
this.getDomItem("id", "example").style.backgroundColor = "yellow";
帅丁丁
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
30-DOM元素的获取
wy1511861159的博客
09-02 401
第一节、DOM元素的获取 1.1、常用的一些获取DOM元素的方法 getElementById(“id值”) 规则：根据元素的id值获取元素，如果多个元素的ID值重复则获取第一个元素。 <script type="text/javascript"> function testById(){ /* document -- 文档--代表当前页面文档--代表当前HTML页面 */ var doc = document.getElementById("p1");
DOM封装（自己写一个DOM库）
weixin_44809439的博客
10-11 733
前言 DOM提供的api实在是不好用，各种各样的都有，需要记住的又多，特性不一，还要考虑兼容性问题。 在学习DOM原生api的同时，自己封装一套好用的api，即把原生api学会了，又做出一套好用的api； 首先是把声明一个dom全局变量，并挂载在window上。 dom = window.dom 一，增加节点 创建节点dom.create(<div>hi</div>) create(string) { const container = document.createElem
封装获取dom元素的简单实例
11-22
示例如下： [removed] //函数： 反复执行的代码块 //全局只有一个对象，防止全局变量污染 var itcast = { getElen : { tag : function(tag){ return document.getElementsByTagName(tag); }, id : function(id){ return document.getElementById(id); } }, css :
JavaScript中DOM查询封装函数
公众号【猴哥说前端】
04-13 434
    在JavaScript中可以通过BOM查询html文档中的元素，也就是所谓的在html中获取对象然后对它添加一个函数。常用的方法有以下几种：    ①document.getElementById()    通过元素ID在全局查找元素    ②document.getElementsByTagName（）    通过元素标签名字在全局查找元素        element.getEleme...
【JavaScript 进阶之旅 DOM篇 第三章】节点属性 方法 封装方法 DOM结构
马云
06-06 236
返回大写的标签名，文本节点，只读的属性返回节点值，可写的：属性、注释、文本可用返回元素节点的属性集合获取属性节点获取div元素的id值： 获取属性值比如：获取id为box的值：box 返回节点类型bool值，是否有孩子节点 方法的使用： 2、使用类数组特性来封装获取元素节点的方法 三、DOM结构树 Document下有：原型关系： : : : Element下有：原型关系：: : : : : 作用在getElementsByTagName上，获取所有标签：...
js封装 DOM获取
weixin_30512785的博客
09-04 273
function $(selector){ 　　//获取第一个字符 　　var firstLetter = selector.charAt(0); 　　//对第一个字符进行判断 　　switch(firstLetter){ 　　　　//#则为id名称； 　　　　case '#' : return idSelector(selector); 　　　　break; 　　　...
[JavaScript]了解Dom_封装函数
wy1948的博客
08-22 198
日常摸鱼，偶尔学习… 1.获取行内样式 获取行内样式可以通过一下方式，但是以下的方式对于页面的行外样式和外联样式无法获取。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dom—获取当前样式</title> <style> #Div1{ background-color: red; height: 300px; }.
获取dom元素那些讨厌的位置封装代码
12-03
介绍 解决各个浏览器下 获取dom 元素的 位置 兼容性 ie 6 7 8 firefox 3.6 chrome 4.0 目前只测试了这几个浏览器 作者 Jelle · lu QQ:271412542 Email:idche@qq.com blogs:http://www.cnblogs.com/idche/ 源码说明 ...
简单实现JS对dom操作封装
10-23
在JavaScript中，DOM（Document Object Model）是一种标准，...这种封装方法在实际开发中很常见，尤其是对于需要频繁操作DOM的场景。通过这样的封装，我们可以避免直接操作DOM带来的复杂性，提高代码的可维护性和性能。
封装获取dom元素
weixin_30471561的博客
07-08 155
<script> //函数： 反复执行的代码块 //全局只有一个对象，防止全局变量污染 var itcast = { getElen : { tag : function(tag){ return document.ge...
dom封装函数
cico_new的博客
01-19 635
//封装函数，返回元素e的第n层祖先元素节点 function retParent(elem. n) { while(elem && n) { elem = elem.parentElement; n --; } return elem; } var i = document.getElementsByTagName('i')[0]; //编辑函数，封装myChil
封装一个DOM查询
白天不懂夜的黑
01-20 479
//面试可以写的继承实例 //写一个封装DOM查询的例子 function Elem(id) { this.elem = document.getElementById(id) } Elem.prototype.html = function(val) { var elem = this.elem if (val) { elem.innerHTML = v...
常用操作DOM的方法及对象封装
Bidding
08-06 927
1、使用Javascript打印出1-10000之间的所有对称数（例如 121 1331等）【掌握】 代码： function print(start,end) { if (start>end) { return []; } var res=[]; for(var i=start;i var len=i.toString().length; if (i.toString()===
关于封装部分DOM操作的方法
水痕
06-06 929
window.utils = { /////////////////////////////关于DOM操作js开始///////////////////////////////////// /** * 定义一个获取元素的方法 * @param param * @returns {*} */ $$: function(param) {
DOM封装函数
chenlunju的专栏
12-17 299
编辑函数，封装myChildren功能，解决以前部分浏览器的兼容性问题。 &lt;script type="text/javascript"&gt; Element.prototype.myChildren = function() { var child = this.childNodes; var len = child.length; var arr = []; for...
认识DOM、class的封装、获取属性、获取节点
LY__lyxka的博客
05-26 742
认识DOM 文档对象模型（document object model），由W3C提出的标准，是一个使用脚本动态的访问和更新文档的内容、结构以及样式； DOM提供了响应的API（接口） ，可以对文档进行增删改查，以实现js对网页元素JS对网页元素的静态（进行）控制，实现动态网页的功能 HTML节点树 DOM的原理是将文档装入内容，并以节点的形式解析为一颗节点树 HTML 文档就是一种树状的结构化文档 节点类型 元素节点：指标签 如：p div h1~h6 a b 属性节点：指标签上的属性 如：
JS的DOM方法封装库
Renyinyu的博客
04-07 851
由于使用原生JS写代码时，经常需要使用到DOM方法，需要获取各种节点，而且还要处理各浏览器的兼容性。于是封装一个自己的兼容各浏览器的DOM封装库就势在必行了 var utils = (function(){ var flag = "getComputedStyle" in window; function listToArray(arg){ ...
JavaScript封装——封装获取元素的函数
wing_annuan的博客
11-26 962
封装获取元素的函数 函数的实参形式 1、#id 通过id名获取元素 2、.class名 通过class名获取元素 3、ele 通过标签名获取元素 <script> function getEle(ele) { //substr（参数1，参数2） //参数1表示开始的索引 //参数2表示截取个数，如果没有参数2表示从开...
angular中获取dom
最新发布
07-14
在 Angular 中获取 DOM 元素有几种常见的方式： 1. 使用 ViewChild： 在组类中，使用 `@ViewChild` 装饰器来获取 DOM 元素的引用。首先，在组件类中导入 `ViewChild` 和 `ElementRef`，然后在类中定义一个成员变量，并使用 `@ViewChild` 装饰器来获取 DOM 元素的引用。例如： ```typescript import { Component, ViewChild, ElementRef } from '@angular/core'; @Component({ selector: 'app-my-component', template: '<div #myElement>Hello World</div>' }) export class MyComponent { @ViewChild('myElement') myElement: ElementRef; ngAfterViewInit() { console.log(this.myElement.nativeElement); } } ``` 2. 使用 Renderer2： 在组件中注入 `Renderer2`，并使用它提供的方法来访问 DOM 元素。首先，在组件类中导入 `Renderer2`，然后在构造函数中注入 `Renderer2`，最后使用 `renderer` 对象来访问和操作 DOM 元素。例如： ```typescript import { Component, Renderer2 } from '@angular/core'; @Component({ selector: 'app-my-component', template: '<div #myElement>Hello World</div>' }) export class MyComponent { constructor(private renderer: Renderer2) { } ngAfterViewInit() { const element = this.renderer.selectRootElement('#myElement'); console.log(element); } } ``` 3. 使用 ElementRef： 在组件中注入 `ElementRef`，并使用它来访问 DOM 元素。首先，在组件类中导入 `ElementRef`，然后在构造函数中注入 `ElementRef`，最后使用 `nativeElement` 属性来访问原生 DOM 元素。例如： ```typescript import { Component, ElementRef } from '@angular/core'; @Component({ selector: 'app-my-component', template: '<div #myElement>Hello World</div>' }) export class MyComponent { constructor(private elementRef: ElementRef) { } ngAfterViewInit() { console.log(this.elementRef.nativeElement); } } ``` 需要注意的是，直接操作 DOM 元素可能会违反 Angular 的封装和抽象原则，推荐优先使用 Angular 提供的数据绑定和事件绑定机制来操作和交互组件。只有在必要的情况下才使用上述方式来获取和操作 DOM 元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值