大家好，今天我们来花 1 分钟来学习 DOM 相关的基础操作的第八部分，内容虽然简单，但是还是有必要归纳总结的，希望这些整理对大家有所帮助。

一、替换元素

ele 将从 DOM 树节点中移除，并替换为 newEle：

ele.parentNode.replaceChild(newEle, ele);

二、替换加载失败的图片

将加载失败的图片替换为加载失败提示的图片，示例代码如下：

// Assume that I want to replace all images on the page
const images = document.querySelectorAll('img');

// Loop over them
[].forEach.call(images, function (ele) {
    ele.addEventListener('error', function (e) {
        e.target.src = '/path/to/404/image.png';
    });
});

三、调整 iframe 的大小以适应其内容

假设 frame 代表 iframe 元素。

frame.addEventListener('load', function () {
    // Get the height of the content
    const height = frame.contentDocument.body.scrollHeight;

    // Set the height of iframe
    frame.setAttribute('height', `${height}px`);
});

四、将元素滚动到浏览器窗口的可视区域内

将 ele 元素滚动到可视区域

ele.scrollIntoView();

平滑滚动

ele.scrollIntoView({ behavior: 'smooth' });

CSS 属性也能提供类似的平滑滚动

scroll-behavior: smooth;
``

It [is not supported](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#Browser_compatibility) in IE and Safari.

五、滚动到页面顶部

一般来说，您可以滚动到一个点，其坐标表示从它到文档顶部和左侧的距离：

window.scrollTo(pageX, pageY);

因此，以下代码滚动到页面顶部：

window.scrollTo(0, 0);

在 React 的应用

import { useLocation } from 'react-router-dom';

export default ({ children }) => {
    const { pathname } = useLocation();

    React.useEffect(() => {
        window.scrollTo(0, 0);
    }, [pathname]);

    return (
        ...
    );
};

六、选择一个元素或一组元素

按给定 ID 选择元素

<div id="hello" />;

document.getElementById('hello');

按类名选择元素

返回具有 hello 类的元素列表：

ele.getElementsByClassName('hello');

按标签名称选择元素

返回包含 span 标签列表

ele.getElementsByTagName('span');

通过 CSS 选择器选择元素

返回匹配给定选择器的元素列表：

ele.querySelectorAll('div.hello');

返回匹配给定选择器的第一个元素：

ele.querySelector('div.hello');

注：本文属于原创文章，版权属于「前端达人」公众号及 qianduandaren.com 所有，未经授权，谢绝一切形式的转载