JavaScript常见的DOM操作

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口

常见的操作分为

• 创建节点

• 查询节点

• 更新节点

• 添加节点

• 删除节点

创建节点

createElement

创建新元素，接受一个元素，即要创建元素的标签名

createTextNode

创建一个文本节点

获取节点

querySelector

传入任何有效的css选择器，即可选中单个dom元素

document.querySelector('.element')
document.querySelector('#element')
document.querySelector('div')
document.querySelector('[name="username"]') //匹配name属性为username的元素

querySelectorAll

返回一个包含节点子树内所有与之相匹配的Element节点列表，如果没有相匹配的，则返回一个空节点列表

const notLive = document.querySelectorAll("p");

以上两种很常用，几乎干掉了像是getElementById，getElementsByClassName等dom操作

更新节点

innerHTML

不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树

// 获取<p id="p">...</p >
var p = document.getElementById('p');
// 设置文本为abc:
p.innerHTML = 'ABC'; // <p id="p">ABC</p >
// 设置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p >的内部结构已修改

innerText，textContent

innerText不返回隐藏元素（display：none）的文本，textContent返回所有文本

style

DOM节点的style属性对应所有的CSS，可以直接获取或设置。遇到-需要转化为驼峰命名

// 获取<p id="p-id">...</p >
const p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px'; // 驼峰命名
p.style.paddingTop = '2em';

添加节点

innerHTML

如果这个DOM节点是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容，相当于添加了新的DOM节点

appendChild

const list = document.getElementById('list'),
const haskell = document.createElement('p');
haskell.id = 'haskell';//添加id选择器
haskell.innerText = 'Haskell';
list.appendChild(haskell);

删除节点

// 拿到待删除节点:
const self = document.getElementById('to-be-removed');
// 拿到父节点:
const parent = self.parentElement;
// 删除:
const removed = parent.removeChild(self);
removed === self; // true

删除后的节点虽然不在文档树中了，但其实它可能还在内存中（如果还保持对其的引用的话），