飞道科技

飞道科技文档总汇

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]');

查找子节点

  1. 单个节点查找

     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]');
    
  2. 多个节点查找

     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);