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

一、从给定的HTML中获取文本内容

1、从虚拟元素中获取文本内容（不推荐）

const stripHtml = function (html) {
    // Create new element
    const ele = document.createElement('div');

    // Set its HTML
    ele.innerHTML = html;

    // Return the text only
    return ele.textContent || '';
};

不推荐使用这种方法，因为如果输入 html 包含特殊标签（例如 script ），它可能会导致安全问题。但是，我们可以通过将 div 标签替换为 textarea 来防止 html 被执行：

const stripHtml = function (html) {
    const ele = document.createElement('textarea');
    ele.innerHTML = html;
    return ele.textContent || '';
};

2、使用 DOMParser

const stripHtml = function (html) {
    const doc = new DOMParser().parseFromString(html, 'text/html');
    return doc.body.textContent || '';
};

3、使用 template

template 标记包含不会立即呈现的 HTML 内容。但是，IE 11 等旧版浏览器不支持此功能。

const stripHtml = function (html) {
    const ele = document.createElement('template');
    ele.innerHTML = html;
    return ele.content.textContent || '';
};

二、使用 Ajax 提交表单

下面的函数使用 ajax 请求将 formEle 的数据提交给后端：

const submit = function (formEle) {
    return new Promise(function (resolve, reject) {
        // Serialize form data
        // See https://htmldom.dev/serialize-form-data-into-a-query-string
        const params = serialize(formEle);

        // Create new Ajax request
        const req = new XMLHttpRequest();
        req.open('POST', formEle.action, true);
        req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

        // Handle the events
        req.onload = function () {
            if (req.status >= 200 && req.status < 400) {
                resolve(req.responseText);
            }
        };
        req.onerror = function () {
            reject();
        };

        // Send it
        req.send(params);
    });
};

1、serialize 函数

其中 serialize 函数将所有表单数据序列化为查询字符串。

const serialize = function (formEle) {
    // Get all fields
    const fields = [].slice.call(formEle.elements, 0);

    return fields
        .map(function (ele) {
            const name = ele.name;
            const type = ele.type;

            // We ignore
            // - field that doesn't have a name
            // - disabled field
            // - `file` input
            // - unselected checkbox/radio
            if (!name || ele.disabled || type === 'file' || (/(checkbox|radio)/.test(type) && !ele.checked)) {
                return '';
            }

            // Multiple select
            if (type === 'select-multiple') {
                return ele.options
                    .map(function (opt) {
                        return opt.selected ? `${encodeURIComponent(name)}=${encodeURIComponent(opt.value)}` : '';
                    })
                    .filter(function (item) {
                        return item;
                    })
                    .join('&');
            }

            return `${encodeURIComponent(name)}=${encodeURIComponent(ele.value)}`;
        })
        .filter(function (item) {
            return item;
        })
        .join('&');
};

2、使用方法

const formEle = document.getElementById(...);

submit(formEle).then(function(response) {
    // `response` is what we got from the back-end
    // We can parse it if the server returns a JSON
    const data = JSON.parse(response);
    ...
});

三、交换两个DOM节点

下面的函数交换两个给定的节点，nodeA 和 nodeB：

const swap = function (nodeA, nodeB) {
    const parentA = nodeA.parentNode;
    const siblingA = nodeA.nextSibling === nodeB ? nodeA : nodeA.nextSibling;

    // Move `nodeA` to before the `nodeB`
    nodeB.parentNode.insertBefore(nodeA, nodeB);

    // Move `nodeB` to before the sibling of `nodeA`
    parentA.insertBefore(nodeB, siblingA);
};

四、切换显示与隐藏元素

要切换显示与隐藏元素，我们更新 display 属性：

const toggle = function (ele) {
    const display = ele.style.display;
    ele.style.display = display === 'none' ? 'block' : 'none';
};

五、触发事件（Trigger an event）

1、输入表单相关的触发事件

有一些特殊事件可直接作为元素的方法，您可以直接调用它们，如下所示：

// For text box and textarea
ele.focus();
ele.blur();

// For form element
formEle.reset();
formEle.submit();

// For any element
ele.click();

2、触发原生事件

const trigger = function (ele, eventName) {
    const e = document.createEvent('HTMLEvents');
    e.initEvent(eventName, true, false);
    ele.dispatchEvent(e);
};

你可以通过以下方式进行调用，比如 change, keyup, mousedown 等

trigger(ele, 'mousedown');

3、触发自定义事件

下面的示例代码触发了一个名为hello的自定义事件，其数据为{ message: ‘Hello World’ }。

const e = document.createEvent('CustomEvent');
e.initCustomEvent('hello', true, true, { message: 'Hello World' });

// Trigger the event
ele.dispatchEvent(e);

六、展开一个元素（Unwrap an element）

只删除 ele 元素不删除其子元素，示例代码如下

// Get the parent node
const parent = ele.parentNode;

// Move all children node to the parent
while (ele.firstChild) {
    parent.insertBefore(ele.firstChild, ele);
}

// `ele` becomes an empty element
// Remove it from the parent
parent.removeChild(ele);

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