3.属性节点

作者: 若愚同学 | 来源:发表于2018-06-12 22:11 被阅读0次

3.属性节点
3.节点的属性
DOM相关概念
Day23——jQuery
javaScript：DOM常用操作
JS/DOM节点操作
[Vue]createElement参数
DOM常用方法
扒一扒DOM
day03

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="index.js"></script>

<style type="text/css">
    
    .myclass{
        background-color: pink;
    }
    
    
    
</style>

</head>
<body>
    
    <!-- <form action="" method="get" name="form1" id="form" eat="吃"></form> -->
    
    <select multiple="multiple" size="5" id="sel">
        <option>西施</option>
        <option>貂蝉</option>
        <option>杨玉环</option>
        <option>王昭君</option>
    </select>
    
    
    <button class="myclass" id="btn">按钮</button>
    <button id="btn2" style="background-color: green">按钮</button>
    
    <input type="text" id="input" value="张三">
</body>
</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;
};