「短文」如何在 JavaScript 中随机数组
November 03, 2022
1 min
大家好,今天我们来花 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); };
假设 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);
通过 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';
ele.style.removeProperty('background-color'); // Does NOT work ele.style.removeProperty('backgroundColor');
ele.style.display = '';
ele.style.display = 'none';
注:本文属于原创文章,版权属于「前端达人」公众号及 qianduandaren.com 所有,未经授权,谢绝一切形式的转载