AJAX入门---DOM操作HTML

前端之家收集整理的这篇文章主要介绍了AJAX入门---DOM操作HTML前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
一边学习AJAX一边坐着总结加深印象,上次写的是如何简单的使用XMLHttpRequest对象,今天写的是DOM(文档对象模型(Document Object Model))操作HTML,希望我的博客对大家的学习能够起到帮助作用。

一.什么是DOM

文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XML文档的常用方法

二.简单的操作HTML

今天的例子实现前我们先需要了解DOM的常用节点和常用API,例子中通过动态的向HTML中添加元素节点达到学习的目的。

最终效果

添加节点实现

  1. //添加节点
  2. varindex=0;
  3. functionappendnode(){
  4. //找到body对应节点
  5. varhtmlNode=document.documentElement;
  6. varbodyNode=htmlNode.lastChild;
  7. //新建节点
  8. vardivNode=document.createElement("div");
  9. vartextNode=document.createTextNode("我是一个新加入的节点"+index++);
  10. //建立节点之间的关系
  11. divNode.appendChild(textNode);
  12. bodyNode.appendChild(divNode);
  13. }

插入节点实现

  1. //插入节点
  2. functioninsertnode(){
  3. varremovenode=document.getElementById("remove");
  4. varfirstdivnode=removenode.nextSibling;
  5. while(firstdivnode){
  6. if(firstdivnode&&firstdivnode.nodeName=="DIV"){
  7. varnewnode=document.createElement("div");
  8. vartextnode=document.createTextNode("我是一个新加入的节点"+index++);
  9. newnode.appendChild(textnode);
  10. document.documentElement.childNodes[2].insertBefore(newnode,firstdivnode);
  11. break;
  12. }
  13. firstdivnode=firstdivnode.nextSibling;
  14. }
  15. }

移除节点实现

  1. functionremovenode(){
  2. //1.找到body
  3. //2.找到需要被移除的那个div
  4. //3.调用remove方法移除节点
  5. varbodynode=document.getElementById("remove").parentNode;
  6. varremovenode=document.getElementById("remove");
  7. varfirstdivnode=removenode.nextSibling;
  8. while(firstdivnode){
  9. if(firstdivnode&&firstdivnode.nodeName=="DIV"){
  10. bodynode.removeChild(firstdivnode);
  11. break;
  12. }
  13. firstdivnode=firstdivnode.nextSibling;
  14. }
  15. }
原文链接:https://www.f2er.com/ajax/164579.html

猜你在找的Ajax相关文章