DOM操作案列

最新推荐文章于 2022-06-19 13:40:09 发布

APPTX4869

最新推荐文章于 2022-06-19 13:40:09 发布

阅读量72

点赞数

文章标签： html webview asp.net

本文链接：https://blog.csdn.net/APPTX4869/article/details/121926238

版权

DOM操作innerHTML

针对于非表单控件

// 3.1 支持标签，可以解析标签

// oDiv.innerHTML 获取内容

// oDiv.innerHTML = "" 设置内容

// 3.2 不支持标签，可以解析标签

// oDiv.innerText 获取内容

// oDiv.innerText = "" 设置内容

// 针对表单控件

// oDiv.value 获取内容

// oDiv.value = "" 设置内容

非表单

var oDiv = document.querySelector('div');

// oDiv.innerHTML = '我是新增的内容'

// oDiv.innerText = '我是新增的内容'

表单

var oIpt = document.querySelector('input')

// console.log(oIpt.value);//获取

oIpt.value = '我是新增的内容'

DOM操作inner案列

// 数组元素是对象

var arrjson = [{"name":"张三","age":18,"sex":"男"},{"name":"李四","age":18,"sex":"男"},{"name":"张三","age":18,"sex":"男"}]

需求：将对象渲染成表格，几个对象就让它展示几行（tr)，几个键值对就让他展示几个列（td）

1. 如何确定有几个对象：数组；里面有几个元素，就是几行

遍历数组，循环了多少次，代表有几行

2. 通过循环，可以确定有多少行和多少列，拼接出一个形如 <tr><td></td><td></td><td></td></tr>这样的字符串结构

3. 将拼接好的字符串设置给tbody的innerHTML 就会动态的产生表格

 <body>
        <table border="1px">
            <tbody>
                 
            </tbody>
        </table>
    </body>

var oBody = document.querySelector('tbody')

console.log(oBody.innerHTML); //获取内容：‘’

var trhtml = ''

for(var i = 0;i<arrjson.length;i++){

    // 循环了几次，就产生了几个tr。tr内部直接放上3个td

   trhtml+='<tr><td>'+arrjson[i].name+'</td><td>'+arrjson[i].age+'</td>

<td>'+arrjson[i].sex+'</td></tr>'

}

// 拼接了几对<tr></tr>？循环了几次就拼接了几对

// arrjson[0]:{"name":"张三","age":18,"sex":"男"}

// arrjson[1]:{"name":"李四","age":18,"sex":"男"}

console.log(trhtml);

oBody.innerHTML = trhtml;//設置内容

自定义属性

属性分为自定义属性和固有属性

自定义属性：自己定义的属性（定义的可以是自己命名的，也可以是有生具来的 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')

选项卡案例

    <style>
        div {
            width: 300px;
            height: 80px;
            background-color: pink;
        }

        .active {
            background-color: orange;
            font-size: 30px;
        }
    </style>


<body>
    <input type="button" value="教育" class="active">
    <input type="button" value="娱乐">
    <input type="button" value="体育">
    <div></div>
</body>

<script>

    /* 
    点击谁，div的内容就是点击那个下标对应的数组内容
    
    */
    var oBtns = document.querySelectorAll('input')

    var oArrs = ['教育内容', '娱乐内容', '体育内容'];

    var oDiv = document.querySelector('div')

   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')];
        }
    }



</script>

DOM操作固有属性

固有属性：src type，href checked

设置固有属性：oImg.src = '路径' oIpt.checked = true

获取固有属性：oImg.src oIpt.checked

checked:js控制复选框的选中

oIpt.checked = true

js控制复选框的取消选中

oIpt.checked = false

    var oIpts = document.querySelectorAll('input')

    for(var i = 0;i<oIpts.length;i++){

        oIpts[i].checked = true;//全部选中
    }

    var oImg = document.querySelector('img')

    oImg.src = './img/2.jpg';//设置固有属性

    console.log(oImg.src);

开关灯案列

<style>
        body {
            background-color: #000;
        }
    </style>
</head>

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

<script>
    /* 
    第一次点击按钮，
          背景变黄色
          按钮变成关灯
    第二次点击按钮，
          背景变嘿色
          按钮变成开灯

    通过flag 来控制
        点击一次，flag的值变成相反的状态
    */

    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 = '关灯'
        }
    }

跟换背景案例


<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>

<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+')'
        }
    }

全选和取消全选案例


<body>
    <button>全选</button>
    <button>取消全选</button>
    <button>全选</button>
    <input type="checkbox" name="" id="">
    <input type="checkbox" name="" id="">
    <input type="checkbox" name="" id="">
    <input type="checkbox" name="" id="">
    <input type="checkbox" name="" id="">
    <input type="checkbox" name="" id="">
</body>

<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>

APPTX4869

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM操作案列

DOM操作innerHTML针对于非表单控件// 3.1 支持标签，可以解析标签// oDiv.innerHTML 获取内容// oDiv.innerHTML = "" 设置内容// 3.2 不支持标签，可以解析标签// oDiv.innerText 获取内容// oDiv.innerText = "" 设置内容// 针对表单控件// ...
复制链接

扫一扫