JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作

javascript-对文档对象的内容、属性、样式的操作

一、操作内容
　　1.　　innerHTML 用来设置或获取对象起始和结束标签内的内容(识别html标签)
　　2.　　innerText 用来设置或获取对象起始和结束标签内的内容 (兼容IE，获取文本)
　　　　   textContent用来设置或获取对象起始和结束标签内的内容 (兼容FF，获取文本)

　　　　　　注意区别innerHTML和innerText，第一个会识别样式，第二个只会识别文本

　　　　　　　　但是在FF中不兼容，要使用textContent，以下是兼容函数　

　　　　　　　　支持document.all的是IE

function getContent (objs,val) {
     if(document.all){
       if(val){
         objs.innerText=val
       }else{
          return  objs.innerText
       }
     }else{
        if(val){
         objs.textContent=val
       }else{
          return  objs.textContent
       }
     
     }
  }
  window.onload=function  () {
    var div1=document.getElementById("div1");
    var div2=document.getElementById("div2");
    var but=document.getElementById("but");
     but.onclick=function  () {
        //var contents=div1.innerHTML;
        //div2.innerHTML=contents;
         var contents=getContent(div1)
        getContent(div2,contents);
     }
  }

<div  class="one" id="div1">
  <h3>
    欢迎收看后盾网视频教程，收看高清版请登录后盾网论坛！
  </h3>
</div>
<input type="button" value="↓↓" id="but" >
<div  class="two" id="div2">
</div>

　　3.　　outerHTML 用来设置或获取包括本对象在内起始和结束标签内的内容(识别html标签) 

　　　　   outerText 用来设置或获取包括本对象在内起始和结束标签内的内容

 

二、操作属性
　　1.直接操作
　　　　对象.属性
　　　　对象.属性=值 (设置、获取、添加属性(属性值))

　　2.获取和设置

　　　　getAttribute("属性") 获取给定的属性的值
　　　　setAttribute("属性","值") 设置或是添加属性

  window.onload=function  () {
    var links=document.getElementsByTagName("a")[0];
    //alert(links.href)
    //links.href="2.html";
    //alert(links.title)
    //links.title="后盾网";
    //links.title="后盾网";
     //getAttribute("属性")  获取给定的属性的值
     // setAttribute("属性","值")  设置或是添加属性

     alert(links.getAttribute("href"))
     links.setAttribute("href","2.html")
    
  }

 

三、操作样式

　　1.行内样式
　　　　对象.style.属性
　　　　对象.style.属性=值 (设置、获取、添加属性)

window.onload=function  () {
  var one=document.getElementById("one");
  one.onmouseover=function  () {
    //alert(one.style.color)
     one.style.color="blue";
     one.style.backgroundColor="red";
     one.style.fontSize="13px";
  }
  one.onmouseout=function  () {
     one.style.color="red";
     one.style.backgroundColor="blue";
     one.style.fontSize="11px";

  }
}

<a href="#" style="color:red;background-color:blue;padding:3px" id="one">链接</a>

　　　　****************************************************

　　　　遇到属性是"-"链接的，要将"-"去掉，后面的单词的首字母大写
　　　　****************************************************

　　

　　2.css层叠样式

　　　　1>通过更改ID来更改样式（一般不用，不更改ID）

<style>
   #one{
     width:200px;
     height:200px;
     border:1px solid red;
     color:red;
     font-size:14px;
     padding:24px;
   }
   #two{
     width:200px;
     height:200px;
     border:1px solid blue;
     color:blue;
     font-size:19px;
     padding:15px;
   }
</style>
<script>
   window.onload=function  () {
      var one=document.getElementById("one");
      var but=document.getElementById("but");
      but.onclick=function  () {
        one.id="two";
      }

   }
</script>

<div id="one" class="div1">
   欢迎收看后盾网视频教程，下载高清版请到后盾网论坛下载，bbs.houdunwang.con;
</div>
<input type="button" value="更改样式" id="but">

　　　　2>通过className更改样式

<style>
   .div1{
     
     height:200px;
     border:1px solid red;
     color:red;
     font-size:14px;
     padding:24px;
   }
   .div2{
     width:200px;
     height:200px;
     border:1px solid blue;
     color:blue;
     font-size:19px;
     padding:15px;
   }
</style>

   window.onload=function  () {
      var one=document.getElementById("one");
      var but=document.getElementById("but");
      but.onclick=function  () {
        one.className="div2";
      }
    }

<div id="one" class="div1" style="width:200px">
   欢迎收看后盾网视频教程，下载高清版请到后盾网论坛下载，bbs.houdunwang.con;
</div>
<input type="button" value="更改样式" id="but">

　　　　*******************************************

　　　　适合批量更改
　　　　*******************************************

　　　　3>更改或者获取或者设置某个属性的值

　　　　**************************************************************
　　　　document.styleSheets[下标].rules[下标].style.属性
　　　　document.styleSheets[下标].rules[下标].style.属性=值

　　　　document.styleSheets 样式表的集合，即是<style></style>的数量
　　　　document.styleSheets[0].rules 样式规则的列表，即其中的<div>等的个数
　　　　document.styleSheets[0].rules.style 样式规则的集合
　　　　document.styleSheets[下标].rules[下标].style.属性

alert(document.styleSheets[0].rules[0].style.width)

　　　　适用于IE

　　　　**************************************************************

 

　　　　**************************************************************
　　　　document.styleSheets[下标].cssRules[下标].style.属性
　　　　document.styleSheets[下标].cssRules[下标].style.属性=值
　　　　适用于FF
　　　　***************************************************************

 

　　　　4> 动态的添加删除css样式规则
　　　　document.styleSheets[下标].insertRule("选择器{属性:值}",位置) FF w3c
　　　　deleteRule(位置) FF w3c

　　　　document.styleSheets[下标].addRule("选择器","属性:值",位置) IE removeRule(位置) IE

 //document.styleSheets[0].addRule(".div1","margin:200px",0);
//document.styleSheets[0].removeRule(1);

 

　　3.行内样式和css层叠样式通用的方式
　　　　对象.currentStyle.属性 IE 用来获得实际的样式属性
　　　　getComputedStyle(对象,null) FF 用来获得实际的样式属性

       //对象.currentStyle.属性  IE   用来获得实际的样式属性
    //getComputedStyle(对象,null)   FF  用来获得实际的样式属性
       //alert(one.currentStyle.width)
       alert(getComputedStyle(one,null).width)

　　　　*******************************

　　　　只能获取不能设置
　　　　*******************************