Dom 节点操作
查找
如果要对页面上的一个元素进行操作,首先必须查找到该元素才可以。所以,我们首先需要掌握查找dom元素的方法。
在整个页面中查找dom元素
这种方法我们在项目中几乎不会使用,这里提一下,大家做了解即可,在项目开发过程中禁止这种用法。
通过id查找
document.getElementById('id');
document.getElementsByClassName('classNames');
document.getElementsByName('name');
document.getElementsByTagName('tagname');
document.querySelector('tagname');
document.querySelector<HTMLInputElement>('#id');
document.querySelector<HTMLSpanElement>('.class');
document.querySelector<HTMLTextAreaElement>('[attribute-name]');
document.querySelector<HTMLAnchorElement>('[attribute-name=attribute-value]');
查找子节点
-
单个节点查找
fd.data.node.querySelector('tagname'); fd.data.node.querySelector<HTMLInputElement>('#id'); fd.data.node.querySelector<HTMLSpanElement>('.class'); fd.data.node.querySelector<HTMLTextAreaElement>('[attribute-name]'); fd.data.node.querySelector<HTMLAnchorElement>('[attribute-name=attribute-value]');
-
多个节点查找
Array.from(fd.data.node.querySelectorAll('tagname')); Array.from(fd.data.node.querySelectorAll<HTMLInputElement>('.class')); Array.from(fd.data.node.querySelectorAll<HTMLSpanElement>('[attribute-name]')); Array.from(fd.data.node.querySelectorAll<HTMLAnchorElement>('[attribute-name=attribute-value]'));
查找父(祖先)节点
node.parentElement as HTMLDivElement;
node.closest('tagname');
node.closest('.class') as HTMLInputElement;
node.closest('[attribute-name]') as HTMLSpanElement;
node.closest('[attribute-name=attribute-value]') as HTMLAnchorElement;
判定节点位置关系
node1.contains(node2); // true or false
新增
追加子节点
const child = document.createElement('tagname');
node.appendChild(child);
或
const child = document.createElement('tagname');
node.insertAdjacentElement('beforeend', child);
或
node.insertAdjacentText('beforeend', 'text');
或
node.insertAdjacentHTML('beforeend', '<tagname></tagname>');
在第一个子节点前插入
const child = document.createElement('tagname');
node.insertAdjacentElement('afterbegin', child);
或
node.insertAdjacentText('afterbegin', 'text');
或
node.insertAdjacentHTML('afterbegin', '<tagname></tagname>');
在某个节点前插入
const new_node = document.createElement('tagname');
node.parentElement.insertBefore(new_node, node);
或
const new_node = document.createElement('tagname');
node.insertAdjacentElement('beforebegin', new_node);
或
node.insertAdjacentText('beforebegin', 'text');
或
node.insertAdjacentHTML('beforebegin', '<tagname></tagname>');
在某个节点后插入
const child = document.createElement('tagname');
node.insertAdjacentElement('afterend', new_node);
或
node.insertAdjacentText('afterend', 'text');
或
node.insertAdjacentHTML('afterend', '<tagname></tagname>');
修改
node.parentElement.replaceChild(new_node, node);
删除
node.remove();
或
node.parentElement.removeChild(node);
复制节点
const deep = true;
node.cloneNode(deep);