DOM节点中元素节点与文本节点操作方法

// 文本节点使用
// nodeValue

// 元素节点使用
// createTextNode() 由document创建
// createElement()
// appendChild
// firstElementChild
// lastElementChild
// firstChild
// lastChild
// insertBefore

// 文本+元素节点
// childNodes
// nodeName
// replaceChild
// nextSibling
// previousSibling
// nextElementSibling
// previousElementSibling
// textContent

1. nodeValue在元素节点的值为null

<div>
  文本节点1
  <div>a</div>
  文本节点2
  <div>b</div>
  文本节点3
  <div>c</div>
  文本节点4
</div>
<script>

  var oDiv = document.getElementsByTagName('div')[0];

  console.log(oDiv.nodeValue); //null
  console.log(oDiv.childNodes[0].nodeValue); //文本节点1

</script>

2.  appendChild 只能由元素节点使用

<div>
  文本节点1
  <div>a</div>
  文本节点2
  <div>b</div>
  文本节点3
  <div>c</div>
  文本节点4
</div>
<script>
var oP = document.createElement('p');
oP.innerHTML = '111';

  try{
        oDiv.childNodes[0].appendChild(oP);
    }catch (err){
        console.log('err');//err
    } 

oDiv.childNodes[1].appendChild(oP);
console.log(oDiv.childNodes[1]) //<div>b<p>111</p></div>
</script>

3. replaceChild 只能由元素节点使用 但 createTextNode 可替换文本或元素节点 另外元素节点也可替换文本节点

<div>
  文本节点1
  <div>a</div>
  文本节点2
  <div>b</div>
  文本节点3
  <div>c</div>
  文本节点4
</div>
<script>

var oP2 = document.createElement('p');
  oP2.innerHTML = '222';

  try{
    oDiv.childNodes[0].replaceChild(document.createTextNode('更改后的内容'),oDiv.childNodes[0]);
  }
  catch (err){console.log('err');} //err
  
  oDiv.replaceChild(document.createTextNode('更改后的内容'),oDiv.childNodes[0]);//替换文本
  console.log(oDiv.childNodes[0]);// 更改后的内容
  
  oDiv.replaceChild(document.createTextNode('更改后的内容'),oDiv.childNodes[3]);//替换元素
  console.log(oDiv.childNodes[3]);// 更改后的内容

  oDiv.replaceChild(oP2,oDiv.childNodes[0]);//元素节点替换文本节点
  console.log(oDiv.childNodes[0]);// <p>222</p>
</script>

4. firstElementChild lastElementChild 供元素节点使用 也只能找出元素节点

<div>
  文本节点1
  <div>a</div>
  文本节点2
  <div>b</div>
  文本节点3
  <div><p>ppp</p></div>
  文本节点4
</div>
<script> 

 // 元素节点调用
  console.log(oDiv.firstElementChild); //<div>a</div>
  console.log(oDiv.lastElementChild); //<div><p>ppp</p></div>

  // 文本节点调用
  console.log(oDiv.childNodes[2].firstElementChild); //undefined
  console.log(oDiv.childNodes[2].lastElementChild); //undefined

</script> 

5. nextElementSibling previousElementSibling textContent nextSibling previousSibling 都可供文本或元素节点调用, 但nextElementSibling previousElementSibling 只能找到元素; textContent 只能找到文本

<div>
  文本节点1
  <div>a</div>
  文本节点2
  <div>b</div>
  文本节点3
  <div><p>ppp</p></div>
  文本节点4
</div>
<script> 

  // 元素节点调用
  console.log(oDiv.childNodes[3].nextElementSibling); //<div><p>ppp</p></div>
  console.log(oDiv.childNodes[3].previousElementSibling); //<div>a</div>
  console.log(oDiv.childNodes[3].textContent); //b
  console.log(oDiv.childNodes[3].nextSibling); //文本节点3
  console.log(oDiv.childNodes[3].previousSibling); //文本节点2
  
  // 文本节点调用
  console.log(oDiv.childNodes[2].nextElementSibling); // <div>b</div>
  console.log(oDiv.childNodes[2].previousElementSibling); // <div>a</div>
  console.log(oDiv.childNodes[2].textContent); // 文本节点2
  console.log(oDiv.childNodes[2].nextSibling); // <div>b</div>
  console.log(oDiv.childNodes[2].previousSibling); // <div>a</div>

</script>

6. firstChild lastChild 虽然只能由元素调用才有效，但可以找出文本+元素节点 另外 insertBefore 也是如此

  <div>
  文本节点1
  <div>a</div>
  文本节点2
  <div>b</div>
  文本节点3
  <div><p>ppp</p></div>
  文本节点4
</div>
<script> 

  //找出元素节点
  console.log(oDiv.childNodes[5].firstChild); //<p>ppp</p>
  //找到文本节点
  console.log(oDiv.firstChild); // 文本节点1
  //文本节点调用为null
  console.log(oDiv.childNodes[2].firstChild); // null

  // 插入 oP3
  var oP3 = document.createElement('p');
  oP3.innerHTML = '333';
  console.log(oDiv.insertBefore(oP3,oDiv.childNodes[3])); //元素节点前插入
  console.log(oDiv.insertBefore(oP3,oDiv.childNodes[2])); //文本节点前插入

</script>