节点操作

1. 获取节点

1.1 直接获取节点

父子关系：

element.parentNode
element.firstChild/element.lastChild
element.firstElementChild/element.lastElementChild
element.childNodes/element.children

兄弟关系：

element.previousSibling/element.nextSibling
element.previousElementSibling/element.nextElementSibling

<body>
  <ul id="ul">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>
  <p>Hello</p>
</body>

var ulNode = document.getElementsByTagName("ul")[0];
console.log(ulNode.parentNode);             //<body></body>
console.log(ulNode.previousElementSibling); //null
console.log(ulNode.nextElementSibling);     //<p>Hello</p>
console.log(ulNode.firstElementChild);      //<li>First</li>
console.log(ulNode.lastElementChild);       //<li>Fourth</li>

1.2 通过接口获取节点

getElementById
getElementsByTagName
getElementsByClassName
querySelector
querySelectorAll

getElementById
获取文档中指定id的节点对象。getElementById只作用于document，返回唯一值。

var element = document.getElementById('id');

getElementsByTagName
获取指定标签元素节点的集合。此接口可直接通过元素而获取，不必直接作用于document之上。

  <ul id="ul">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>

var ul = document.getElementById('ul');
console.log(ul.getElementsByTagName('li')); // HTMLCollection(4) [li, li, li, li]
console.log(document.getElementsByTagName('li')); // HTMLCollection(4) [li, li, li, li]
// 取出第一个li元素
console.log(document.getElementsByTagName('li')[0]); // <li>First</li>

getElementsByClassName
获取指定元素中具有指定class的所有节点。多个class可的选择可使用空格分隔，与顺序无关。

  <ul id="ul">
    <li class="li first">First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>

var body = document.getElementsByTagName('body')[0];
console.log(body.getElementsByClassName('li first')); // HTMLCollection [li.li.first]
console.log(body.getElementsByClassName('first li')); // HTMLCollection [li.li.first]

console.log(document.getElementsByClassName('li first')); // HTMLCollection [li.li.first]
console.log(document.getElementsByClassName('first li')); // HTMLCollection [li.li.first]

querySelector / querySelectorAll

  <ul id="ul">
    <li class="aaa">First</li>
    <li class="aaa">Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>

var ul = document.getElementById('ul');
console.log(ul.querySelector('.aaa')); // <li class="aaa">First</li>
console.log(ul.querySelectorAll('.aaa')); // NodeList(2) [li.aaa, li.aaa]

console.log(document.querySelector('.aaa')); // <li class="aaa">First</li>
console.log(document.querySelectorAll('.aaa')); // NodeList(2) [li.aaa, li.aaa]

2. 创建节点

2.1 创建元素节点

document.createElement('tagName')

2.2 创建文本节点

document.createTextNode('text')

3. 修改节点

3.1 修改文本内容

获取或设置节点以及其后代节点的文本内容。

<p class="p">Hello</p>

var p = document.getElementsByTagName('p')[0];
console.log(p.textContent); // Hello
console.log(p.innerText); // Hello

textContent和innerText的作用是一样的。

3.2 innerHTML

获取或设置指定节点之中所有的HTML内容。

var elementsHTML = element.innerHTML;

4. 插入节点

appendChild
在指定的元素内追加一个元素节点。

<ul id="tea">
	<li>红茶</li>
	<li>绿茶</li>
	<li>普洱茶</li>
</ul>
<ul id="drink">
	<li>咖啡</li>
	<li>牛奶</li>
	<li>果汁</li>
</ul>

var drink = document.getElementById('drink');
var li = document.createElement('li');
li.innerText = '啤酒';
drink.appendChild(li);

insertBefore
在指定元素的指定节点前插入指定的元素。

var tea = document.getElementById('tea');
var li = document.createElement('li');
li.innerText = '凉茶';
tea.insertBefore(li, tea.firstChild);

5. 删除节点

<ul id="tea">
	<li>红茶</li>
	<li>绿茶</li>
	<li id="puer">普洱茶</li>
</ul>
<ul id="drink">
	<li>咖啡</li>
	<li>牛奶</li>
	<li>果汁</li>
</ul>

var tea = document.getElementById('tea');
tea.removeChild(document.getElementById('puer'));

参考：

节点操作 · 前端开发笔记本