9.13DOM笔记

复习{
  HTML 标记语言      CSS 层叠式演示表 脚本语言    
  javaScript基础:
    前端编程语言， 脚本语言:必须按照某种规则进行编写，不需要编译，直接运行的文件
    关键字，标识符，变量，条件语句， 循环，运算符，对象Object, 数组Array
    Date , 函数
    === 比较值 和 数据类型
    == 比较值
    
    var a = [322,1,12,3];
    var b = new Array(3,4,12);    
    
    for
    while
    do...while
    for(var a in b){
        arr[a];
    }
    
    function 函数名(){
    }
    function 函数名(a,b,c){    
    }
    var a = function(){
        return "haha";
    }
    var b = function(a){
        return 12;
    }
}
========================================================================
DOM编程:
    Document Object Model: 文档对象模型
        作用就是用来操作页面的 html标签的 ， 达到增删改查效果; 提高
        用户体验度;

 方法: 
  如何选中标签:
    返回当前标签对象:     var a = document.getElementById("id的值"); 根据id的值来获取对象
        
    返回值是数组: var b = document.getElementsByTagName("标签名"); 根据标签名来获取对象
    
    返回值是数组: var c = document.getElementsByName("name属性值");
        根据标签的name属性名进行选择;

 radio单选按钮 被被选中时，会自动的向标签中添加 checked 属性 值为true
 checkbox复选框 ,被选中时， 会自动向标签中添加 checked 属性 值为true

围绕着 标签的增删改查:

            1.createElement("标签名");
            借助了 appendChild(); 向指定标签中拼接子元素
        
            2.remove(); 删除标签 ， 可以删除一个标签，也可以删除很多标签
            
            3.对象.nodeName属性名 ;  查看当前标签的名字
            
            4.修改标签    
                 replaceChild(新节点, 老节点);
                 
       属性的增删改查
            1.var a = ipn.attributes;  a是一个集合
                 遍历  a[i].name; 属性名
                 a[i].value; 属性值
                 
            2.var a = document.createAttribute("属性名");     
              a.value="张三";给属性复制
              指定标签.setAttributeNode(a);
            
            3.删除属性: 
                 a.removeAttribute("value");
                 
            4.属性是固定的，不能改属性名， 只能改属性的值     
                 a.value="覆盖值";
                
       文本的增删改查
            var div =    document.getElementsByTagName("div")[0];
            div.innerHTML = "<h1>哈哈</h1>"; 识别字符串中的标签
            div.innerText = "<h1>哈哈</h1>"; 不识别字符串中的标签
             
    
拓展: 
     a.nextSibling 挨着的兄弟，
     a.previousSibling; 前一个兄弟标签
     a.parentNode; 
     a.children; 返回的是集合
     a.firstChild; 指定标签的第一个孩子
     a.lastChild; 指定标签的最后一个孩子
     

 事件: 
   鼠标点击事件: οnclick=""   button按钮，a 超链接
   鼠标悬停事件: οnmοuseοver=""
   鼠标移除事件: οnmοuseοut=""
   
          表单事件: 
     1.onblur: 鼠标失去焦点事件
     2.onfocus: 鼠标聚焦事件
     3.onchange: 一般用于 下拉别表
    
  时钟: 
  图片变大小:
  图片变淡: 

  下拉列表: 获取下拉列表的值

返回的是唯一对象:
 document.getElementById(); 一个

返回的是集合:  nodeList
 document.getElementsByName(); 根据name 属性选中
 document.getELementsByTagName(); 根据标签名选中

如果集合中有一个对象: 
     document.getElementsByName()[0];