DOM笔记(二)：排他思想，自定义属性、节点操作

最新推荐文章于 2022-07-19 07:01:29 发布

不务正业的前端学徒

最新推荐文章于 2022-07-19 07:01:29 发布

阅读量211

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45522704/article/details/104873419

版权

杂专栏收录该内容

18 篇文章 0 订阅

订阅专栏

排他思想

如果有同一组元素，我们想要某一个元素实现某一种样式，需要用到循环的排他思想
1、清除所有元素样式
2、给当前元素设置样式

鼠标点击按钮变色

<body>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <script>
        var btns = document.querySelectorAll('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = 'pink';

            }
        }
    </script>
</body>

自定义属性

获取属性值
element.属性可以获取属性值(元素自带的属性)
element.getAttribute(‘属性’)；(可以获得自定义的属性)

<div id="demo" index="1"></div>
<script>
    var div = document.querySelector('div');
    // 获取元素属性值
    console.log(div.id);
    console.log(div.getAttribute('id'));
    console.log(div.getAttribute('index'));
    // 设置元素属性值
    div.id = 'test';
    div.className = 'nav';
    div.setAttribute('index', 2);
    div.setAttribute('class', 'footer');
    // 移除属性
    div.removeAttribute('index');
</script>

H5自定义属性

<div data-index="1" data-list-name="5"></div>
<script>
    var div = document.querySelector('div');
    div.setAttribute('data-index', 2);
    console.log(div.getAttribute('data-index'));
    // h5新增的获取自定义属性的方法
    //dataset是一个集合里存放了所有以data开头的自定义属性
    console.log(div.dataset);
    console.log(div.dataset.index);
    console.log(div.dataset['index']);
    // 如果自定义属性里有多个-连接的单词，获取的时候采用驼峰命名法
    console.log(div.dataset.listName);
    console.log(div.dataset['listName']);
</script>

节点

一般，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）三个基本属性
元素节点nodeType为1
属性节点nodeType为2
文本节点nodeType为3

在DOM里可以把节点划分为不同的层级关系，常见的是父子兄层级关系

父子节点

<div class="father">
    <div class="son"></div>
    <div class="son1"></div>
</div>
<script>
    var son = document.querySelector('.son');
    console.log(son.parentNode);
    var father = document.querySelector('.father');
    // 子节点childNodes包括元素节点，文本节点等等
    console.log(father.childNodes);
    //如果想要获得里面的元素节点，需要专门的处理，所以不提倡childNodes
    // parentNode.childen它只能返回子元素节点，是一个只读属性
    console.log(father.children);
    //返回第一个子节点，找不到返回null
    console.log(father.firstElementChild);
    // 返回最后一个子节点，找不到返回null
    console.log(father.lastElementChild);
    console.log('=============================');

    //但上边的两种返回子节点有兼容IE9以上才支持
    // 实际开发的写法如下，兼容
    console.log(father.children[0]);
    console.log(father.children[father.children.length - 1]);
</script>

兄弟节点

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    var ul = document.querySelector('ul');
    var lis = document.querySelectorAll('li');
    // 返回当前元素的下一个兄弟节点，找不到返回null，包括所有节点
    console.log(lis[0].nextSibling);
    // 返回当前元素的上一个兄弟节点，找不到返回null，包括所有节点
    console.log(lis[1].previousSibling);
    // 返回当前元素的下一个兄弟元素节点，找不到返回null
    console.log(lis[0].nextElementSibling);
    console.log(lis[1].previousElementSibling);
</script>

<ul>
    <li>1</li>
</ul>
<script>
    // 创建元素
    var li = document.createElement('li');
    var ul = document.querySelector('ul');
    // 在后面添加元素
    ul.appendChild(li);
    // 在第一个元素前面添加元素  insertBefore(li,指定元素);
    ul.insertBefore(li, ul.children[0]);
</script>

删除节点

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var ul = document.querySelector('ul');
    // 删除一个节点，返回的是删除的节点
    ul.removeChild(ul.children[0]);
</script>

克隆节点

<ul>
    <li>1</li>
    <li>2</li>
</ul>
<script>
    var ul = document.querySelector('ul');
    console.log(ul.cloneNode());
    //括号里为空或者false，就是浅拷贝，不克隆里边的节点
    console.log(ul.cloneNode(true));
    //深拷贝，克隆里边的节点
</script>