JavaScript神奇操作HTML DOM，轻松实现增删改查

咱俩来说说呗，你到底懂不懂JavaScript怎么用HTML DOM（文档对象模型）来处理那些诸如添加啊、删除啊、修改啊、查询之类的事情？是不是感觉这一套挺神奇的？

JavaScript真是个超级神奇的东西，让你随心所欲地改变HTML的样子，或者捉弄CSS，更厉害的是它能时刻看着网页变化，应对各种意外状况～这次我要教你们几个基础技能，跟着我学起来吧～首先，我们来试试看DOM（文档对象模型）都有哪些好办法吧～

  


  
你能找到我么？
  点击改变文本

{{--js--}}

  function changeText(){
    document.getElementById("demo").innerHTML = "ok";
  }

咱们平时都是用ID来找东西的对？不过记住，HTML里面ID不能重复！还有个办法就是用标签名，就像之前找到那个叫demo的div那样。但是有些p元素没有给ID的话，那也只能用tagname了。

  


  

    
hi man
  
  点击改变文本

{{--js--}}

  function changeText(){
    var element = document.getElementById("demo");
    var p = element.getElementsByTagName("p");
    p[0].innerHTML = "yo";
  }

其实，你也可以试试看直接用`class`这个东西来找你想处理的那部分DOM元素，这样子会方便得多哟~

别忘了，要怎么彻底消灭DOM元素得学起来！没错，就是这个高级招式让那些没用的部分在网页里消失无踪。

  


  

    
hi man
  
  点击改变文本

{{--js--}}

  function changeText(){
    var element = document.getElementsByClassName("demo")[0];
    var p = element.getElementsByTagName("p");
    p[0].innerHTML = "yo";
  }

今天换个话题，说说我们都能用到的 HTML DOM 的新特性。当你想要在网上搞点新花样时，记得用 DOM 的新增功能！

  


  

    
hi man
    
hello
  
  点击改变文本

{{--js--}}

  function changeText(){
    var div1 = document.getElementById("div1");
    var p2 = document.getElementById("p2");
    div1.removeChild(p2);
  }

别看只是一个网页，咱不仅能够改动其中的DOM元素，还能随心所欲地调整属性和CSS。这可就给了咱们无限开阔的创作天地，想怎样给网页元素变脸就怎么来！

听说你对Javascript感兴趣？太好了，它能帮忙快速修改网页元素，非常厉害！不要犹豫，快来试试这个在线工具，保证会让你惊喜不已！现在我来跟大家分享几个好用的Javascript HTML DOM处理小窍门，以后可能用得到！想要深入学习Javascript的话，那就去看看这些文章吧：《JS操作DOM技巧大全》、《JS页面元素操作妙招》、《JS大事记要》、《JS查找算法技巧全解》、《JS数据结构和算法宝典》、《JS穷尽算法析》、《JS调试高级技术》。记得分享给朋友们

  


  

    
hi man
    
hello
  
  点击改变文本

{{--js--}}

  function changeText(){
    // 创建P标签
    var p = document.createElement("p");
    // 创建文本节点
    var node = document.createTextNode("新的P标签");
    // 创建属性
    var attr = document.createAttribute("class");
    attr.value = "class p";
    // p标签中添加文本节点
    p.appendChild(node);
    // p标签中添加属性
    p.setAttributeNode(attr);
    var div = document.getElementById("div1");
    // 添加p标签
    div.appendChild(p);
  }

  


  

    
hi man
    
hello
  
  点击改变文本

{{--js--}}

  function changeText(){
    var element = document.getElementById("p1");
    element.innerHTML = "更改内容";
  }