首页与我联系

「短文」1 分钟学 6 个常见的 DOM 基础操作(九)

By 前端达人
Published in 1-JavaScript
September 19, 2022
1 min read
「短文」1 分钟学 6 个常见的 DOM 基础操作(九)

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

一、选择元素的子元素

获取ele元素的子节点

const childNodes = ele.childNodes;

通过索引的方式获取第一个或最后一个子元素

const first = childNodes[0];
const last = childNodes[childNodes.length - 1];

也可以通过属性的形式获取第一个或最后一个子元素

const first = ele.firstChild;
const last = ele.lastChild;

二、选择元素的文本内容

选择 ele 元素内的文本内容,示例代码如下

const selectText = function (ele) {
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(ele);
    selection.removeAllRanges();
    selection.addRange(range);
};

三、自动选择 **textarea 中**的文本

假设 ele 表示一个 textarea 元素,示例代码如下

ele.addEventListener('focus', function (e) {
    // Select the text
    e.target.select();
});

四、将表单数据序列化为查询字符串

以下函数序列化由其字段的名称和值组成的表单数据:

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('&');
};

请注意,我们将表单元素的集合转换为数组

const fields = [].slice.call(formEle.elements, 0);

五、为元素设置 CSS 样式

设置 CSS 样式

通过 style 属性设置样式:

ele.style.backgroundColor = 'red';
ele.style['backgroundColor'] = 'red';
ele.style['background-color'] = 'red';

通过覆盖或更新 cssText 属性可以同时设置多个样式:

// Add new style
el.style.cssText += 'background-color: red; color: white';

// Ignore previous styles
el.style.cssText = 'background-color: red; color: white';

删除 CSS 样式

ele.style.removeProperty('background-color');

// Does NOT work
ele.style.removeProperty('backgroundColor');

六、显示或隐藏元素

显示一个元素

ele.style.display = '';

隐藏一个元素

ele.style.display = 'none';

前端达人公众号.jpg

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


Tags

javascriptbasic
Previous Article
「短文」1 分钟学 6 个常见的 DOM 基础操作(八)
前端达人

前端达人

专注前端知识分享

Table Of Contents

1
一、选择元素的子元素
2
二、选择元素的文本内容
3
三、自动选择 **textarea 中**的文本
4
四、将表单数据序列化为查询字符串
5
五、为元素设置 CSS 样式
6
六、显示或隐藏元素

相关文章

「短文」如何在 JavaScript 中随机数组
November 03, 2022
1 min

前端站点

VUE官网React官网TypeScript官网

公众号:前端达人

前端达人公众号