基于DOM对象-------1

JavaScript分为三个部分：

      1.ECMAScript标准：JS的基本语法
      2.DOM：Document Object Model---文档对象模型----操作页面的元素
      3.BOM：Browser Object Model---浏览器对象模型----操作的是浏览器

1. DOM对象-------通过DOM方式获取的元素得到的对象

2.  * 元素：element：页面中的标签
    * 节点：Node:页面中所有的内容，标签，属性，文本
    * 根元素：html标签
    * 页面中的顶级对象----document
   

3.  * 操作基本标签的属性：src title alt href id
    * 操作表单标签的属性：name checked selected disabled readonly
    * 
    * 元素的样式操作：
    * 对象.style.属性=值；
    * 对象.className=值；
   

4. this关键字-----如果是在当前的元素的事件中使用this，那么this就是当前的对象

5.  * 点击操作是一个事件
    * 为元素添加事件的操作：
    * 事件：就是一件事，有事件源，触发和响应
    * 案例：
    //案例——点击按钮显示图片:点击按钮的时候设置img标签的src属性给一个图片的属性
    //根据id获取按钮，为按钮注册点击事件，添加事件处理函数
    document.getElementById("photo").onclick=function (){
       //根据id获取图片的标签，设置图片的src属性
       var imobj=document.getElementById("im");
       imobj.src="image/1.jpg";
       //设置图片大小
       imobj.width="300";
       imobj.height="400";
     };
   

6. 凡是成对的标签，中间的文本内容，设置的时候，都使用innerText这个属性

7. 排他功能--------只有被点击的按钮显示“怀孕了”，其他按钮都是“没怀孕”

    //获取所有的按钮，分别注册点击事件
    var objs=document.getElementsByTagName("input");
    //循环遍历所以的按钮
    for(var i=0;i<objs.length;i++){
        objs[i].onclick=function (){
            //把所有的按钮的value值设置为默认的值：没怀孕
            for(var j=0;j<objs.length;j++){
                objs[j].value="没怀孕";
            }
            //当前被点击的按钮设置为：怀孕了
            this.value="怀孕了";
        };
    }

8. 在表单标签中，如果属性和值相同，则，DOM操作时这个属性值是布尔类型就可以

    //disabled="disabled"------>这个属性是禁用的意思
    //html中属性和值相等，并且只有一个，其实可以只写这个属性，不用赋值
    //readonly---只读
<input type="radio"  value="2" name="sex" id="rad"/>女
<script>
    //规律：在表单标签中，如果属性和值相同，则，DOM操作时这个属性值是布尔类型就可以
    function my$(id){
        return document.getElementById(id);
    }
    my$("btn").onclick=function (){
        my$("rad").checked=true;
    };
</script>

9.获取元素的方法

 //总结获取元素的方法
 /**
 * 1.根据id属性的值获取元素，返回的是一个元素对象
 * document.getElementById("id属性的值");
 *
 * 2.根据标签名字获取元素，返回的是一个伪数组，里面存了多个DOM对象
 * document.getElementsByTagName("标签的名字");
 *
 * 下面几个有的浏览器不支持
 * 3.根据name属性的值获取元素，返回的是一个伪数组，里面存了多个DOM对象
 * document.getElementsByName("name属性的值");
 *
 * 4.根据类样式的的名字来获取元素，返回的是一个伪数组，里面存了多个DOM对象
 * document.getElementsByClassName("类样式的名字");
 *
 * 5.根据选择器获取元素，返回的是一个元素对象
 * document.querySelector("选择器的名字");
 */