day11:(DOM操作之innerHTML 、自定义属性 、固有属性)

DOM操作之innerHTML

针对于非表单控件
     支持标签,可以解析标签
      oDiv.innerHTML       获取内容
      oDiv.innerHTML = "<b></b>"  设置内容
     不支持标签,可以解析标签
      oDiv.innerText       获取内容
      oDiv.innerText = ""  设置内容
 针对表单控件
      oDiv.value       获取内容
      oDiv.value = ""  设置内容
课堂举例:
1. 先获取元素
var oDiv = document.querySelector('div');
// oDiv.innerHTML = '<b>我是新增的内容</b>'
// oDiv.innerText = '<b>我是新增的内容</b>'

var oIpt = document.querySelector('input')
console.log(oIpt.value);//获取
oIpt.value = '我是新增的内容'
例子:
 <table border="1px">
        <tbody>
            <!-- <tr>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>18</td>
                <td>男</td>
            </tr> -->
        </tbody>
    </table>
</body>
</html>
<script>
    // var arr =[12,2,4,23];//数组元素是数字
    // var arr =["张三","李四"];//数组元素是字符串
    // 数组元素是对象
    var arrjson = [{ "name": "张三", "age": 18, "sex": "男" }, { "name": "李四", "age": 18, "sex": "男" }, { "name": "王五", "age": 18, "sex": "男" }]
    var str = ''
// 有多少个对象(循环的次数),就产生多个tr
    for(var i = 0;i<arrjson.length;i++){
           str+='<tr><td>'+arrjson[i].name+'</td><td>'+arrjson[i].age+'</td><td>'+arrjson[i].sex+'</td></tr>'
    }
    // arrjosn[0]: { "name": "张三", "age": 18, "sex": "男" }
    // arrjosn[1]: { "name": "李四", "age": 18, "sex": "男" }
    // arrjosn[2]: { "name": "王五", "age": 18, "sex": "男" }
    var oBody = document.querySelector('tbody');
    oBody.innerHTML = str;
</script>

DOM操作之自定义属性

举例:
    属性分为自定义属性和固有属性
             自定义属性:自己定义的属性(定义的可以是自己命名的,也可以是有生具来的 src,type,href)
             设置自定义属性: oDiv.setAttribute('xx','yy')
             设置获取属性: oDiv.getAttribute('xx')
             设置删除属性: oDiv.removeAttribute('xx')
             
             var oDiv = document.querySelector('div')
     oDiv.setAttribute('xx',"yy");//给div设置一个自定义的属性xx,值yy
     console.log(oDiv.getAttribute('xx'));//获取odiv自定义属性xx的值
     oDiv.removeAttribute('xx')
  例子:
  步骤:
      1. 点谁谁高亮(排他)
         1.1 获取所有的,遍历,每一个都添加点击事件,点击谁,谁是this。this设置一个class
      2. 点击谁把谁的下标获取出来
         2.1 先给所有的button按钮设置一个自定义属性index,在for循环里面写 oBtns[i].setAttribute('index', i);
         2.2 点击谁,获取谁的自定义属性index,this.getAttribute('index')
         2.3 可以通过oArrs[index]来获取点击元素对应的数组内容
             
 <style>
        div {
            width: 300px;
            height: 80px;
            background-color: pink;
        }
        .active {
            background-color: orange;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <input type="button" value="教育" class="active">
    <input type="button" value="娱乐">
    <input type="button" value="体育">
    <div></div>
</body>
</html>
<script>
    var oArrs = ['教育内容', '娱乐内容', '体育内容'];
    /* 
      1. 点谁谁高亮(排他)
         1.1 获取所有的,遍历,每一个都添加点击事件,点击谁,谁是this。this设置一个class
      2. 点击谁把谁的下标获取出来
         2.1 先给所有的button按钮设置一个自定义属性index,在for循环里面写 oBtns[i].setAttribute('index', i);
         2.2 点击谁,获取谁的自定义属性index,this.getAttribute('index')
         2.3 可以通过oArrs[index]来获取点击元素对应的数组内容
    */
    var oDiv = document.querySelector('div')
    var oBtns = document.querySelectorAll('input')
    for (var i = 0; i < oBtns.length; i++) {
        oBtns[i].setAttribute('index', i);//给每一个btn添加点击自定义属性
        oBtns[i].onclick = function () {
            for (var j = 0; j < oBtns.length; j++) {
                oBtns[j].removeAttribute('class')
            }
            // console.log(this.getAttribute('index'));//点谁拿谁的自定义属性index值    console.log(oArrs[this.getAttribute('index')]);
            this.setAttribute('class', 'active')
            oDiv.innerHTML = oArrs[this.getAttribute('index')];
        }
    }
    /*
       for循环里面如果有点击事件,for循环的下标获取不到
    */
</script>

DOM操作之固有属性

       概念:
              固有属性:src  type,href checked
              设置固有属性:oImg.src = '路径'   oIpt.checked = true
              获取固有属性:oImg.src            oIpt.checked 

              checked:
              		js控制复选框的选中
                           oIpt.checked = true
                    js控制复选框的取消选中
                           oIpt.checked = false
                           
                           

DOM操作之固有属性使用案例-开关灯

步骤要求:
第一次点击按钮, 背景变黄色 按钮变成关灯
第二次点击按钮, 背景变黑色 按钮变成开灯
 通过flag 来控制
点击一次,flag的值变成相反的状态
  
<style>
        body {
            background-color: #000;
        }
    </style>
</head>

<body>
    <button>
        开灯
    </button>
</body>

</html>
<script>
    
    var flag = true
    var oBtn = document.querySelector("button")
    oBtn.onclick = function () {
        flag = !flag;//第一次点击时,flag为false,走的else的程序。下一次点击的时候flag为true,走的是true的程序
        if (flag) {
            document.body.style.background = 'black'
            this.innerHTML = '开灯'
        } else {
            document.body.style.background = 'yellow'
            this.innerHTML = '关灯'
        }
    }
</script>

DOM操作之固有属性使用案例-网页换肤

<body>
    <img src="./img/1.jpg" alt="" width="100px">
    <img src="./img/2.jpg" alt="" width="100px">
    <img src="./img/3.jpg" alt="" width="100px">
</body>

</html>
<script>
全选和取消全选
    /* 
       点击谁,页面body的背景就是谁
    */
    var oImgs = document.querySelectorAll('img')
    for (var i = 0; i < oImgs.length; i++) {
        oImgs[i].onclick = function () {
            console.log(this.src);
            //   获取body
            document.body.style.background = 'url(' + this.src + ')'
        }
    }
</script>

DOM操作之固有属性使用案例-全选和取消全选

要求:
点击按     第一次全部选中 按钮变成取消全选
          第二次取消选中 按钮变成全选

<body>
    <button>全选</button>
    <button>取消全选</button>
    <button>全选</button>
    <input type="checkbox" name="" id="">
    <input type="checkbox" name="" id="">
    <input type="checkbox" name="" id="">
</body>
</html>
<script>
    var oBtns = document.querySelectorAll('button')
    var oIpts = document.querySelectorAll('input')
    oBtns[0].onclick = function () {
        for (var i = 0; i < oIpts.length; i++) {
            oIpts[i].checked = true
        }
    }
    oBtns[1].onclick = function () {
        for (var i = 0; i < oIpts.length; i++) {
            oIpts[i].checked = false
        }
    }
    
    var flag = true;
    oBtns[2].onclick = function () {
        flag = !flag;
        if (flag) {
            for (var i = 0; i < oIpts.length; i++) {
                oIpts[i].checked = false;
            }
            //  this 当前点击元素
            this.innerHTML = "全选"
        } else {
            for (var i = 0; i < oIpts.length; i++) {
                oIpts[i].checked = true;
            }
            //  this 当前点击元素
            this.innerHTML = "取消全选"
        }
    }
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值