DOM通过JS操作HTML

1.查找HTML的元素

  通常通过javascript ，需要操作HTML元素，可以通过id、类名、标签名来寻找要操作的HTML元素。

（1.）通过id查找html的元素

  <button id="btn">添加</button>

    <script>

        var btn = document.getElementById('btn');
     

    </script>

getElementByld(id)

     这个方法返回一个对象，这个对象对应着document对象里一个独一无二的元素。【实际上，document中的每个元素都是一个对象。利用DOM提供的方法能得到任何一个对象】 节点上设置id属性，id应该设置为独一无二的，但是你非得在html节点上加上两个相同的id，chrome上只会返回第一个。 一般说来，用不着为文档里的每个元素都定义一个独一无二的对象。DOM提供了另一个方法来获取那些没有id属性的对象。

 (2)通过标签来寻找HTML元素

 <div id="box">
        <p>hello world</p>
        <p>通过标签寻找HTML页面中的元素</p>
    </div>

    <script>
        var box=document.getElementById('box');
        var y=document.getElementsByTagName('p');
        document.write('通过标签p来寻找标签内容'+y[0].innerHTML);
    
    </script>

getElementsByTagName();

     getElementsByTagName方法会返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。参数p就是文档的标签，比如body、ul、ui等标签。调用可以参考demo里的getChildNodes()方法。 

    getElementsByTagName还可以传递通配符* ,它会返回文档里的所有元素节点，document.getElementsByTagName(“*”)。 

    getElementsByTagName还可以被其他元素节点调用

2.HTML DOM 允许 JavaScript 改变 HTML 元素的内容

（1）改变HTML输出流，可以创建动态的HTML内容

  <script>
        document.write(Date());
       // document.write可以直接向html输出内容
    
    </script>

（2）修改HTML的内容（最常用简单的方法是innerHTML)

语法：document.getElementById(id).innerHTML=new HTML

 <p id="box">hello world</p>

<script>
    document.getElementById('box').innerHTML='new hello world? 你好';
    通过innerHTML改变页面内容;
    
</script>

(3)改变HTML属性

语法：    document.getElementById(id).attribute=new value

  <a href="www.sougou.com" id="demo">修改标签属性</a> 
     
     <script>
         document.getElementById('demo').href='www.baidu.com';
     
     </script>

3.添加和删除节点（HTML 元素）

要添加HTML元素，必须创建元素节点，之后向已存在的元素追加该元素

 <div id="demo1">
          <p id="p1">创建先节点</p>
          <p id="p2">第二个段落</p>

      </div>

      <script>
          var a=document.createElement('p');
          var Node=document.createTextNode('新的节点创建');
          a.appendChild(Node);
          var c=document.getElementById('demo1');
          c.appendChild(a);
      
      
      </script>

要删除HTML元素，必须要找到父元素，再删除子元素

 <script>
          var x=document.getElementById('demo1');
          var child=document.getElementById('p1');
          x.removeChild(child);
      
      </script>