当前位置：首页 > JS > 6个好用的操作dom的方法

6个好用的操作dom的方法

夏立军3年前 (2022-08-15)JS570

转载来源: https://mp.weixin.qq.com/s/jsoi-zO0t-LD6WknCNo2Kw

Dom操作在web开发中很强大，借助于Dom方法和属性，我们可以实现很多功能，本文分享6个强大的操作dom的方法。

## 1.事件只触发一次

有的时候，我们需要Dom事件只触发一次， 我们只需要在事件监听器上添加`{ once: true }`对象参数，就能达到此目的。示例代码如下:

```js
const elem = document.querySelector('button');
elem.addEventListener("click", ()=> {
    console.log("只执行一次");
}, { once: true } );
```

当用户多次点击按钮时，只会在第一次点击时，会打印出字符串。
另外，借助于`removeEventListener`方法，我们也能完成相同的功能，

```js
const handler = function (e) {
    e.target.removeEventListener(e.type, handler);
};

ele.addEventListener('event-name', handler);
```

## 2.检测元素之外的事件

有些时候，我们需要检测元素之外的事件从而来完成一些工作，比如模态框，点击模态框的外面的元素关闭模态框，就可以通过检测元素之外的点击完成。
我们可以通过`contains()`方法和`target`属性来完成检测。示例代码如下:

```js
const elem = document.querySelector('div');
elem.addEventListener('click', (e) => {
   const outsideClick = !elem.contains(e.target) ;
   console.log(outsideClick); //打印 true 或 fasle
});
```

## 3.让当前的元素滚动到浏览器窗口的可视区域内

借助于`scrollIntoView()`方法，我们可以使指定的元素滚动到浏览器窗口，应用场景有：聊天窗口滚动显示最新的消息、回到顶部等等。

该方法接受两种类型的参数，布尔类型和对象类型。
`alignToTop`(兼容性好):true(元素的顶部将对齐到可滚动祖先的可见区域的顶部。这是默认值),false(元素的底部将与可滚动祖先的可见区域的底部对齐)。

`scrollIntoViewOptions`(兼容性不好):此处不详细展开。

```js
const btn = document.querySelector("button");
const elem = document.querySelector(".container");btn.addEventListener('click', ()=>{
 elem.scrollIntoView({behavior: "smooth", block: "center"} );
});

var element = document.getElementById("box");
 
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});
```

TIPS：页面(容器)可滚动时该方法才有效！

## 4.获取元素实际显示的样式

由于诸如ele.style.display这样的操作只能获取DOM元素的行内样式，所以获取结果可能与实际显示效果不符。通过getComputedStyle方法可以用来获取DOM元素实际显示时的样式，具体：

```js
let style = window.getComputedStyle(element, [pseudoElt]);
```

可以传递两个参数，第一个参数指定一个用来获取计算样式的`DOM元素`，第二个参数（可选）指定一个要匹配的伪元素的字符串，普通元素可省略或传`null`。
getComputedStyle方法执行会返回一个对象，该对象在包含指定DOM元素（或伪类）计算样式之后（实际显示）的所有CSS属性的值，并且会随着元素的样式更改自动更新，通过使用CSS属性名称进行索引可以获取该CSS属性值。

## 5.克隆一个dom元素

借助于`cloneNode()`方法，我们可以克隆任何一个dom节点，该方法接受一个布尔值的参数deep,如果为`true`，则以递归方式克隆指定节点下的子树; 如果为`false`，则仅克隆节点本身(及其属性，如果它是元素)。

```js
const elem = document.querySelector(".container");
const clone = elem.cloneNode(true);
console.log(clone.outerHTML);
```

## 6.获取元素的大小及其相对于视口的位置

`getBoundingClientRect`方法返回元素的大小及其相对于视口的位置。该函数返回一个Object对象，该对象有6个属性：`top`, `left`, `bottom`, `right`, `width`, `height`

![](http://typecho.128x.cn/2022/08/202208159195_4032.png)

借助该方法，我们可以轻松判断一个元素是否处于视口内，代码如下：

```js
function isElView(el) {
    var top = el.getBoundingClientRect().top;
    var bottom = el.getBoundingClientRect().bottom;
    var se = document.documentElement.clientHeight;

if (top < se && bottom > 0) {
        return true;
    }

else if (top >= se || bottom <= 0) {
        return false;
    }
    return false;
}
```

## 7.总结
以上就是全部内容，在web开发中，我们可以通过操作Dom完成很多功能，需要反复理解和练习才能掌握。

扫描二维码推送至手机访问。

分享给朋友：

返回列表

上一篇：网页开发测试过程中将关键数据直接展示在网页

没有最新的文章了...

网页开发测试过程中将关键数据直接展示在网页

如何将数据直接写入网页 var now = new Date(); var date2 = now.getFullYear() + '/' + now.getMonth() + '/' + now.getDate(); var timestamp = new D...

6个好用的操作dom的方法

相关文章

网页开发测试过程中将关键数据直接展示在网页

发表评论

Copyright 一段神奇的代码 .Some Rights Reserved.鲁ICP备18001748号 | 站点地图

Powered By Z-BlogPHP. Theme by TOYEAN.

6个好用的操作dom的方法

相关文章

网页开发测试过程中将关键数据直接展示在网页

发表评论取消回复

Powered By Z-BlogPHP. Theme by TOYEAN.

发表评论