【js操作dom对象学习笔记一之div显示与隐藏】

DOM 文档对象模型
文档：把一个html文件看成是一个文档，由于万物皆对象，所以把这个文档看成一个对象。
      html文件看成一个文档，那么这个文档看成一个对象，文档中的所有的标签都可看成一个对象

页面中的每个标签，都是一个元素(element)，每个元素都可以看成一个对象

html页面中都有一个根标签---html--也叫根元素

文档：一个页面就算一个文档
元素(element):页面中的所有的标签都是元素，元素可以看成是对象
节点(node):页面中所有的内容都是节点：标签，属性，文本
root:根

1.根据id获取元素

document.getElementById("btn");

eg：document.getElementById("btn").οnclick=function(){
    alert("弹框了");
}
<input type="button" value="弹框" id="btn"/>

凡是成对的标签，中间的文本内容，设置的时候，都使用innerText这个属性的方式
eg:点击按钮，修改p标签的显示内容
 document.getElementById("btn").οnclick=function(){
    document.getElementById("p1").innerText="这是一个p";
}
<input type="button" value="设置p的内容" id="btn"/>
<p id="p1">我是一个p标签</p>

2.document.getElementsByTagName("标签的名字");  
 返回的是一个伪数组，无论是获取一个标签还是多个标签，最终都是在数组中存储的，返回的是一个数组

 在某个元素的事件中，自己的事件中的this就是当前的这个元素的对象

eg.案例，排他功能
   <input type="button" value="没怀孕"/>
  <input type="button" value="没怀孕"/>
  <input type="button" value="没怀孕"/>
  <input type="button" value="没怀孕"/>
  <input type="button" value="没怀孕"/>
  <input type="button" value="没怀孕"/>

   //获取所有按钮，分别注册点击事件
   var btnObj=document.getElementsByTagName("input");
   //循环遍历所有的按钮
   for(var i=0;i<btnObj.length;i++){
    //为每个按钮注册点击事件
    btnObj[i].οnclick=function(){
        //把所有按钮的value值设为默认值，需要在遍历一次
        for(var j=0;j<btnObj.length;j++){
           btnObj[j].value="没怀孕";
        }
        //当前被点击的按钮设置为:怀孕了
          this.value="怀孕了";
     
        }
  }
 

3.在表单标签中,如果属性和值只有一个,并且值是这个属性本身,那么
在写js代码,DOM操作的时候,这个属性值,是布尔类型就可以了
 eg：点击按钮修改性别
 <input type="button" value="修改性别" id="btn1"/>
<input type="radio" value="1" name="sex"/>男
<input type="radio" value="2" name="sex" id="rad1"/>女
<input type="radio" value="3" name="sex"/>保密

function my$(id) {
    return document.getElementById(id);
  }
  
  my$("btn1").onclick = function () {
    my$("rad1").checked = true;
  };

4.凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可
 eg：点击按钮修改div宽、高、背景颜色

 <input type="button" value="div" id="btn"/>
  <div id="dv"></div>

function my(id){
       return document.getElementById(id);
   }
       
       my("btn").οnclick=function(){
           my("dv").style.width="300px";
           my("dv").style.height="200px";
           my("dv").style.backgroundColor="pink";
       }

5.js控制div的显示或隐藏
  document.getElementById("div1").style.display="block";//显示
  document.getElementById("div2").style.display="none";//隐藏
eg:点击按钮显示和隐藏
   div{
            width:300px;
            height:200px;
            background-color:pink;
          }

   <input type="button" value="隐藏" id="btn"/>
  <div id="dv"></div>

  function my(id){
    return document.getElementById(id);
 }
  my("btn").οnclick=function(){
    if(my("btn").value=='显示'){
       my("dv").style.display="block";
    this.value="隐藏";
     }else if(my("btn").value=='隐藏'){
    my("dv").style.display="none";
    this.value="显示";
    }
 }
6.js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用,className
  document.getElementById("dv").className="cls";

  .cls{
    width:300px;
    height:200px;
    background-color:yellow;
    border:2px solid red;
  }