js基础之Dom

发表于 分类于 阅读次数：

  文档对象模型 DOM 用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)。DOM的方法(methods)让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。

  1. 创建Dom
1
2
const dialog = document.createElement('div'); // 一个标签
const textNode = document.createTextNode('hello world!'); // 一个文本节点
  1. 查找元素
1
2
3
4
5
const ele = document.getElementById('id');
const eleArray = document.getElementsByTagName('div');
const eleArray = document.getElementsByClassName('id');
const ele = document.querySelector('#id');
const eleArray = document.querySelectorAll('.id');
  1. 关系型查找
1
2
3
4
5
6
7
8
9
10
11
12
13
// 父元素/父节点
const parent = ele.parentElement;
const parent = ele.parentNode;
// 当前元素的第一个/最后一个子元素节点
const el = ele.firstElementChild;
const el = ele.lastElementChild;
// 下一个/上一个兄弟元素节点
const el = ele.nextElementSibling;
const el = ele.previousElementSibling;
// 返回当前节点的前一个兄弟节点,没有则返回null.
previousNode = node.previousSibling
// 返回其父节点的 childNodes 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 null。
nextNode = node.nextSibling
  1. 属性操作
1
2
3
4
5
6
7
8
9
10
11
12
13
// 获取、设置属性
const eleClass = ele.getAttribute('class');
eleClass.setAttribute('id', 'myId');

// 判断、移除属性
ele.hasAttribute('class');
ele.removeAttribute('class');

// 是否有属性设置
el.hasAttributes();

// 获取一个{name, value}的数组
const attrs = el.attributes;