Web API 第2（操作元素）

最新推荐文章于 2022-11-22 13:44:47 发布

hvbv

最新推荐文章于 2022-11-22 13:44:47 发布

阅读量114

点赞数

本文链接：https://blog.csdn.net/qq_38830147/article/details/105507765

版权

操作元素

排他思想
如果有同一组元素，只想要某一个元素实现某种样式，需要用到循环的排他思想；
1，先清除所有元素的样式；
2，给当前元素设置样式；
3，顺序不能颠倒，先清除所有，在设置自己；
例子****获取所有（getElementsByTagName()）–>通用

<body>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <script>
        //获取所有按钮元素
        var btn = document.getElementsByTagName('button');
        //得到的是伪数组，里面的元素是btn[i]
        for (var i = 0; i < btn.length; i++) {
            btn[i].onclick = function() {
                //1,先去除其他按钮的颜色
                for (var i = 0; i < btn.length; i++) {
                    btn[i].style.backgroundColor = '';
                }
                //2,再让当前按钮获取颜色
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
</body>

获取属性值
1，element.属性：获取的是元素本身自带的属性；
2，element.getAttribute（ '属性' ）：获取自定义（程序员自己添加的属性）的属性；
设置属性值
1，element.属性=' 值 '
2，element.setAttribute（' 属性 '，' 值 '）：主要针对自定义属性；
移除属性： removeAttribute(' 属性 ')
H5自定义属性：
1，目的：保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中；通过getAttribute(' 属性 ')
2，设置H5自定义属性：规定自定义属性data-开头作为属性名并赋值例如：data-index；
3，获取H5自定义属性的值(兼容)：element.getAttribute(' data-index ')（常用）
4，获取H5自定义属性的值(H5新增)：element.dataset.index,dataset是一个集合里面存放了所有以data开头的自定义属性
节点操作
1，利用节点层级关系获取元素
2，节点至少有nodeType(节点类型)、nodeName（节点名称）、nodeValue（节点值）三个属性；
3，元素节点type为1、属性节点type为2、文本节点type为3（主要获取的是元素节点）；
4，得到父节点：parentNode、获取的是最近的一个父节点，没有则返回null；
5，得到子节点：parentNode.childNodes、获取的子节点包括文本节点（不提倡使用）；
6，获取所有的子元素节点：parentNode.children、获取第一个子节点（包括文本节点）：parentNode.firstChild、获取最后一个子节点（包括文本节点）：parentNode.lastChild、获取第一个子元素节点：parentNode.firstElementChild、获取最后一个子元素节点：parentNode.lastElementChild 、
最常用的写法：(获取第一个子元素节点)：parentNode.children[ 0 ]、获取最后一个子元素节点：parentNode.children[ parentNode.children.length-1 ]
7，获取下一个兄弟元素节点：nextElementSibling、获取上一个兄弟元素节点（没有则返回空）：previousElementSibling
8，创建节点：createElement（' 节点名称'）、添加节点（末尾）：node.appendChild（child）、添加节点（前面）：node.insertBefore（child，指定元素）；node是父级，child是子集；
9，添加一个新元素的步骤：先创建元素再添加元素；
10，删除节点：node.removechild（child）返回的是删除的节点
11，克隆节点：node.cloneNode（）如果括号中参数为空或者是false，则是浅拷贝：只复制节点本身，不复制里面的子节点、括号中为true，则是深拷贝：会复制节点和里面的内容
12，阻止链接跳转：<a href="javascript:;"></a>
例子：内容发布栏

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul>

    </ul>
    <script>
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        btn.onclick = function() {
            if (text.value == '') {
                alert('请输入内容');
                return false;
            } else {
                //创建元素
                var li = document.createElement('li');
                //先有li,才可以赋值
                li.innerHTML = text.value + "<a href='javascript:;' >删除</a>";
                //添加元素
                //ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
                //删除元素，删除的是当前链接的li
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>
</body>

例子：删除节点

<body>
    <button>点击删除</button>
    <ul>
        <li>小明</li>
        <li>小红</li>
        <li>小兰</li>
        <li>小王</li>
        <li>校长</li>
    </ul>
    <script>
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        btn.onclick = function() {
            if (ul.children.length == 0) {
                this.disabled = true;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
    </script>
</body>

例子：动态生成表格

<body>
    <table cellspacing='0' border='1'>
        <thead>
            <th>姓名</th>
            <th>科目</th>
            <th>成绩</th>
            <th>操作</th>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        var datas = [{
            name: '飞洒看',
            subject: 'js',
            score: 98
        }, {
            name: '发生大',
            subject: 'js',
            score: 99
        }, {
            name: '发萨达',
            subject: 'js',
            score: 95
        }, {
            name: '王德发',
            subject: 'js',
            score: 96
        }];
        //往tbody里面创建行，有几个人就创建几行，动态创建
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) {
            //创建tr行
            var tr = document.createElement('tr');
            //添加到tbody中
            tbody.appendChild(tr);
            //行里面创建单元格td(和数据有关系的),单元格的数量取决于每个对象的属性个数，用for循环遍历对象
            for (var k in datas[i]) {
                var td = document.createElement('td');
                td.innerHTML = datas[i][k];
                tr.appendChild(td);
            }
            //创建删除单元格
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除</a>';
            tr.appendChild(td);
        }
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
    </script>
</body>

动态创建元素
1，document.write（）：直接将内容写入页面的内容流，但是文档流执行完毕，则他会导致页面全部重绘；
2，element.innerHTML ：将内容写入某个DOM节点，不会导致页面重绘，创建多个元素效率更高（采用数组形式拼接）
3，document.createElement（）：创建多个元素的效率低一点，但是结构更加清晰

hvbv

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web API 第2（操作元素）

获取元素（1）排他思想如果有同一组元素，只想要某一个元素实现某种样式，需要用到循环的排他思想；1，先清除所有元素的样式；2，给当前元素设置样式；3，顺序不能颠倒，先清除所有，在设置自己；例子****获取所有（getElementsByTagName()）–>通用<body> <button>点击</button> <bu...
复制链接

扫一扫