3.属性节点

HTML:

    
    
    
    
        西施
        貂蝉
        杨玉环
        王昭君
    
    
    
    按钮
    按钮
    
    

JS:

window.onload = function(){
    //var ele = document.getElementById("form");

    //原始属性
    //获取属性值
/*  var name1 = ele.name;
    console.log(name1);
    var name2 = ele.getAttribute("name");
    console.log(name2);*/

    //设置属性值
/*  ele.name = "哈哈哈";
    console.log(ele.name);
    ele.setAttribute("name","hahah");
    console.log(ele.name);*/

    //自定义属性
/*  console.log(ele.eat);
    console.log(ele.getAttribute("eat"));
    
    ele.eat = "喝";
    console.log(ele.getAttribute("eat"));
    ele.setAttribute("eat","喝");
    console.log(ele.getAttribute("eat"));*/
    
    /*
     *操作属性名和默认属性值相同的属性. 如:checked,selected
     *在Dom操作 checked 或者 selected 对应属性值是true false
     *不用true,随便用一些字符也能有选中效果,因为在js中,为fasle的一共有6个常量,前一天的内容
     */
    var ele = document.getElementById("sel");
    //ele.firstChild.nextSibling.selected = "2";结果也能选中
    ele.firstChild.nextSibling.selected = true;
    
    //操作class属性-->属性名为:className
    var btn = document.getElementById("btn");
    //获取属性名
    console.log(btn.className);
    
    //获取btn2中style的background-color
    /*
     操作style的属性.如:background-color  ---> style[“background-color”]
     style对象.backgroundColor 
     */
    var btn2 = document.getElementById("btn2");
    console.log(btn2.style["background-color"]);
    console.log(btn2.style.backgroundColor);
    
    
    //只读操作操作readonly属性:readonly--->readOnly
    var input = document.getElementById("input");
    input.readOnly=true;
};