JS基本功系列-DOM记录03

DOM节点操作

创建:

//创建
var div = document.createElement('div');
div.innerHTML = 123;
document.body.appendChild(div);

var text = document.createTextNode('Hello world')
document.body.appendChild(text)

增加子节点:

<a href="">我是超链接</a>

 var a = document.getElementsByTagName('a')[0];
var div = document.createElement('div');
div.innerHTML = '<p>我是段落标志</p>'
document.body.appendChild(div);//增加子节点--->总是在父级元素的最下边增加节点

减少节点:

 var a = document.getElementsByTagName('a')[0];
var div = document.createElement('div');
div.innerHTML = '<p>我是段落标志</p>'
document.body.appendChild(div);
div.appendChild(a);//除了增加，还有剪切节点的功能,这里就是体现
//a标签从上面移到了下面

插入节点

插入前：

<div>
  <p>我是段落标签</p>
</div>

插入操作:

//插入: 在父级c节点下的子节点b之前插入a节点
  var div = document.getElementsByTagName('div')[0];
  var p = document.getElementsByTagName('p')[0];
  var a = document.createElement('a');
  a.href = 'www.baidu.com';
  //插入: 在父级div节点下的子节点p之前插入a节点
  div.insertBefore(a,p)

插入后:

<div>
  <a href="www.baidu.com"></a>
  <p>我是段落标签</p>
</div>

删除

<div>
  <h1>我是标题</h1>
  <p>我是段落标签</p>
</div>

 // //removeChild(子节点)--->删除子节点
  // var div = document.createElement('div');
  // document.body.appendChild(div);
  // body.removeChild(div)//这一步其实只是将上一步的div从文档中抽离了(就是说你在视图中看不了了)
  // //但是其实还是在内存里面的!!!

  //节点:
  //元素  文本  注释  属性  document  documentFragment

  //  <p>我是段落标签</p>  //--->这是一个元素
  //元素--->元素节点具有下面的若干属性:
  //nodeName nodeValue nodeType attributes  hasChildNOdes
  //元素  -> 构造函数实例化             -->    div节点
  //div       new HTMLDivElement()            removeChild(div)
  //          div对象存到了内存当中             只是删除了节点


  //那么真正能够销毁的操作又是什么
  var div = document.getElementsByTagName('div')[0];
  var p = document.getElementsByTagName('p')[0];
  p.remove()