js增加、删除、替换DOM对象

当网页被加载时,浏览器会创建页面的文档对象模型DOM,即Document Object Model

整个文档为一个文档节点(document对象)

每个html元素为一个元素节点(element对象)

html元素内的文本为文本节点(textNode对象)

html元素的属性为属性节点(attribute对象)

html注释为注释节点(comment对象)

 

节点自身属性:

nodeType:节点类型

nodeName:节点名称

nodeValue:节点值

attributes:节点的属性节点

innerHTML:节点的所有内容,包含节点下的文本,子标签等

innerText:节点的文本内容,不包含子标签

 

导航属性:

parentElement / parentNode:父节点标签

children:所有子标签

firstElementChild:节点的第一个子元素标签

lastElementChild:节点的最后一个子元素标签

nextElementSibling:下一个兄弟元素标签

previousElementSibling:上一个兄弟元素标签

 

添加元素

parent.appendChild(child) :用于向parent父元素中添加新元素,添加到尾部

parent.insertBefore(newchild,oldchild):用于向parent父元素中添加新元素newchild,且添加到oldchild元素的前面。

<div id="div" style='background:pink'>  <!--一个div下包含两个段落-->
  <p id="p1">这是一个段落。</p>
  <p id="p2">这是另外一个段落。</p>
</div>
<script>
  var para1 = document.createElement("p");   //创建段落p元素
  var node1 = document.createTextNode("这是一个新的段落,添加到尾部。");  //创建文本节点
  para1.appendChild(node1);  //将文本节点添加到p元素,这两步可直接使用para1.innerHTML='这是一个新的段落,添加到尾部。'
  var para2 = document.createElement("p");
  var node2 = document.createTextNode("这是一个新的段落,添加到开头。");
  para2.appendChild(node2);
  var element1 = document.getElementById("div");  //获取父元素div
  var element2 = document.getElementById("p1");  //获取第一个段落元素
  element1.appendChild(para1);  //向父元素中添加创建的子元素,默认放在最后面
  element1.insertBefore(para2,element2);  //向父元素中添加创建的子元素,位置在element2元素前面
</script>

以上,document.createElement("p")为创建段落,document.createTextNode("*")为创建文本节点。

element1.appendChild(para1)为添加子元素到末尾,element1.insertBefore(para2,element2)为添加子元素到指定元素前面。

 

 

 删除元素parent.removeChild(child),删除元素必须知道其父元素

<div id="div1" style='background:pink'>
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另外一个段落。</p>
</div>
<script>
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.removeChild(child);
</script>

 

 

替换元素parent.replaceChild(newchild,oldchild),使用newchild元素替换oldchild元素

<div id="div1" style='background:pink'>
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另外一个段落。</p>
</div>
<script>
    var para = document.createElement("p");
    var node = document.createTextNode("这是一个新的段落。");
    para.appendChild(node);
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.replaceChild(para, child);
</script>

 

posted @ 2019-01-14 20:21  Forever77  阅读(4783)  评论(0编辑  收藏  举报