我的前端入门笔记（8）--js--DOM

1.innerText和innerHTML的区别

document.getElementByTagName(" ").innerText = "元素中显示的文本内容"；
document.getElementByTagName(" ").innerHTML = "如果含有元素标签，则标签进入dom树"；
具体如下：

  <p>我是段落</p>

  <script>
     var el = document.getElementByTagName("p");
     el.innerText = "<span>我是innerText</span>"；//el：<p><span>我是innerText</span></p>   //文本内容：<span>我是innerText</span>
     el.innerHTML= "<span>我是innerHTML</span>"；//el：<p><span>我是innerText</span></p>   //为文本增加了p标签，文本内容：我是innerHTML
  </script>

2.节点访问及Dom操作

以下面小段html为例：

<div id = "mydiv">
      <p id= "p1">我是第一个段落</p>
      <p class = "p2">我是第二个段落</p>
</div>  

节点访问

（1）getElementById() 方法返回带有指定 ID 的元素：

var element = document.getElementById("mydiv");

（2）getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点（以数组形式输出）：

var element = getElementsByTagName("p");

（3）getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表:

var element = getElementsByClassName("p1") ;

DOM操作

（1）修改html的内容

<script type = "text/javascript">
    var el = document.getElementById("p1");//获取id为p1的元素
      el.innerHTML="New text!";；//将该元素的内容改为New text!
</script>

（2）修改html的属性

 <img id="image" src="smiley.gif">

 <script>
      document.getElementById("image").src="landscape.jpg";//改变图片地址
      document.getElementById("image").setAttribute('class','pic');//增加class="pic"
 </script>

（3）添加新元素
在父元素末尾添加孩子节点（appendChild）

  <div class="d1">
  </div>
  
  <script>
       var para=document.createElement("p");
       para.innerHtml="我是新添加的段落";
       var element=document.getElementsByClassName("d1");
       element.appendChild(para);//增加为最后一个子孩子
 </script>

 //增加之后DOM元素如下
 <div class = "dl">
    <p>我是新添加的段落</p>
 </div>

在兄弟节点前添加节点（insertBefore）

<script> 
    var para2=document.createElement("div"); 
          para2.innerHtml="我是新添加的div"; 
    var element=document.document.getElementsByTagName("p") ,
         parent=document.getElementsByClassName("d1");
    parent.insertBefore(para2,element);//在p元素前增加一个div
    parent.removeChild("p");//删除元素p
</script>

//增加之后DOM元素如下
  <div class = "dl"> 
     <div>我是新添加的div</div>
     <p>我是新添加的段落</p> 
 </div>

//删除之后
 <div class = "dl"> 
     <div>我是新添加的div</div>
     <p>我是新添加的段落</p> 
 </div>

（4）改变元素样式

<p id="p1">我是段落，要变色</p>
<button>变色</button>

<script>
    document.getElementsByTagName('button')[0].onclick=function(){
       document.getElementById('p1').style.color="red";
    }
</script>

（5）替换元素
replaceChild

var btn1 = document.getElementById("btn1");//获取旧按钮
var btn3 = document.createElement("button");//创建新按钮
btn3.id = "btn3";              //<button id="btn3">新按钮</button>
btn3.innerText = "新按钮";
c1.replaceChild(btn3, btn1);