JavaScript WEBAip学习计划 -2021-3-21

最新推荐文章于 2022-11-16 15:41:23 发布

来世当猪

最新推荐文章于 2022-11-16 15:41:23 发布

阅读量158

点赞数

分类专栏：前端开发文章标签： css js

本文链接：https://blog.csdn.net/wuya_meiya/article/details/114270909

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了JavaScript中基于排他思想的DOM操作，包括清除所有元素样式、设置当前元素样式、获取和设置属性值、移除属性值、H5自定义属性的使用，以及创建、添加和删除节点的方法。重点讲解了如何在实际场景中应用这些API，如发布留言案例。

摘要由CSDN通过智能技术生成

1.1.1 排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 1. 获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btns得到的是伪数组  里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // (2) 然后才让当前的元素背景颜色为pink 留下我自己
                this.style.backgroundColor = 'pink';

            }
        }
    </script>

1.1.2 获取属性值

在这里插入图片描述

<div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        // 1. 获取元素的属性值
        // (1) element.属性
        console.log(div.id);
        //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
	</script>

getAttribute 可以获取自己添加的属性

1.1.3 设置属性值

在这里插入图片描述

 // 2. 设置元素属性值
        // (1) element.属性= '值'
        div.id = 'test';
        div.className = 'navs';
        // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是

1.1.4 移除属性值

1.1.5. H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute(‘属性’) 获取。

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

H5给我们新增了自定义属性：
在这里插入图片描述

1.1.6. 创建节点

在这里插入图片描述

 var li = document.createElement('li');

1.1.7. 添加节点

在这里插入图片描述

    <script>
        // 创建节点 元素节点
        var li = document.createElement('li');

        var ul = document.querySelector('ul');
        //appendChild 在后面添加 称为追加元素
        ul.appendChild(li);
    </script>

insertBefore 插入节点

 var lili = document.createElement('li');
        // children[0] 在前面插入  [1]在后面插入
        ul.insertBefore(lili, ul.children[3]);

案例：发布留言案例

1.1.8. 删除节点

node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。

  <button>删除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    <script>
        // 1.获取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        // 2. 删除元素  node.removeChild(child)
        // ul.removeChild(ul.children[0]);
        // 3. 点击按钮依次删除里面的孩子
        btn.onclick = function() {
            if (ul.children.length == 0) {
                this.disabled = true;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
    </script>

2021.3.21 学习js APIS