day11：（DOM操作之innerHTML 、自定义属性、固有属性）

最新推荐文章于 2024-02-28 17:14:41 发布

卢卢啊

最新推荐文章于 2024-02-28 17:14:41 发布

阅读量962

点赞数

文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/lst1164515273/article/details/121914720

版权

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>