Web APIs 学习笔记(二)--- 操作元素自定义属性和操作节点

Web APIs 学习笔记(二)— 操作元素自定义属性和操作节点

一、排他思想

​ 我们首先来学习一种在网页设计中常用的设计思想——排他思想。当网页中有一组相同的元素我们想要让其中的一个元素实现某种样式,此时就需要用到排他思想算法,其核心算法在于循环嵌套。概括来说排他思想一共分为两步(顺序不可颠倒):

​ ① 清除组中所有元素的这种样式(干掉所有人)

​ ② 给特定元素设置这种样式 (留下特定的人)

//案例代码  实现被点击的按钮背景颜色发生改变

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

二、操作元素的自定义属性

1、自定义属性概念

​ 在页面中,元素的属性分为两种: 一种是元素自带的的属性,我们称为内置属性。另一种是我们程序员给元素添加的属性,我们称为自定义属性。自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。在我们实际开发中,我们一般是将自定义属性作为判断条件,来做出选择。

2、获取自定义属性

​ 我们之前学习的是通过 element.属性 的形式来获取属性值,但这种方式只适用于获取元素的内置属性值,并不能获取元素的自定义属性。 此时我们来学习一个新的方法: element.getAttribute(‘属性’) ,这种方法既可以获取元素的内置属性,又可以获取元素的自定义属性。

//案例代码

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

​ 我们之前是通过 element.属性 = ‘值’ 的方法来设置给元素属性的值,这种方法是针对于元素的内置属性的,我们现在学习一个新方法: element.setAttribute(‘属性’,‘值’) 这种方法主要针对于自定义属性,但是内置属性也可以通过这种方法来设置。

// 案例代码

<div id="demo" index="1" class="nav"></div>
<script>
    var div = document.querySelector('div');
	// 设置元素属性值
	// (1) element.属性= '值'
	div.id = 'test';
	div.className = 'navs';  // class是特殊情况 
	// (2) element.setAttribute('属性', '值');  主要针对于自定义属性
	div.setAttribute('index', 2);
	div.setAttribute('class', 'footer'); // class在这里可以直接写
</script>
4、移除元素的属性

​ 在实际开发中,我们可能需要在某些情况下移除元素的某些属性,那此时就需要用到:element.removeAttribute(‘属性’); 既可以移除元素的自定义属性也可以移除元素的内置属性。

// 案例代码

<div id="demo" index="1" class="nav"></div>
<script>
    var div = document.querySelector('div');
	// 移除元素属性值
	div.removeAttribute('index');
</script>

5、HTML5 自定义属性

​ 由于自定义属性和内置属性的操作方法不相同,我们在操作元素的属性时,需要分辨出这个属性是自定义属性还是内置属性,但是有些属性不容易被分辨出来,所以在 html5 中新增加了一条标准:规定自定义属性的名字必须以 “data-” 为开头。而且还新增了获取元素属性的方法:element.datasetelement.dataset.属性 或者 element.dataset[‘属性’],但是这些方法只能获取以 data- 开头的自定义属性。element.dataset 获取的是一个集合,里面存放了所有以data开头的自定义属性。 既然是 html5 新增的方法,我们就需要考虑一个问题,那就是兼容性,这两个方法要在 IE11 版本以上才支持。

//案例代码 

	<div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.getTime);  // 20
        console.log(div.getAttribute('getTime'));  // 20
        div.setAttribute('data-time', 20);  
        console.log(div.getAttribute('data-index'));  // 2
        console.log(div.getAttribute('data-list-name'));  // andy
        // h5新增的获取自定义属性的方法 它只能获取data-开头的
        // 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>

三、操作节点

1、节点概述

​ 一个网页中的标签、属性、文本等所有内容都是节点,在DOM中,节点使用 node 表示。我们之前学习过 DOM 树,DOM树上的所有节点都可以 通过 JavaScript 来进行访问,也可以创建、修改和删除节点。

​ 一个节点拥有三个最基本的属性:nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)。nodeType(节点类型)分为三种:元素节点–nodeType 值为 1 (标签元素) 、属性节点–nodeType 值为 2 (元素的属性) 、文本节点–nodeType 值为 3 (包括换行、空格、文本等) 。我们主要是对元素结点进行操作。

2、节点的层级关系

​ 根据 DOM 树层级,我们可以把节点划分成不同的层级关系,常见的有: 父子关系兄弟关系

3、获取父级节点

​ 我们可以通过 node.parentNode 来返回某个节点最近的那个父亲节点,如果没有父亲节点则返回null。

// 案例代码

    <div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>
    <script>
        // 1. 父节点 parentNode
        var erweima = document.querySelector('.erweima');  //  <div class="box">...</div>
        // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
        console.log(erweima.parentNode);
    </script>
4、获取子节点

​ 在DOM中我们想要获取一个节点的子节点方法很多,下面我们来一一介绍:

① node.childNodes 所有子节点

​ node.childNodes 可以以集合的形式返回指定节点的所有子节点,注意是所有子节点,包括元素结点、文本节点。如果想要只获得里面的元素结点 则需要进行遍历判断类型,十分不便,所以我们不提倡使用这个方法。

  <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <script>
        // DOM 提供的方法(API)获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);  // 3 此时代表换行符
        console.log(ul.childNodes[1].nodeType);  // 1  此时代表第一个li
    </script>
② node.children 所有元素子节点

​ node.children 可以以集合的形式返回指定节点的所有元素子节点,这也是我们实际开发中常用的方法。

  <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <script>
        // DOM 提供的方法(API)获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
         console.log(ul.children);
        console.log(ul.children[0].nodeType);  // 1 此时代表第一个li
        console.log(ul.children[1].nodeType);  // 1  此时代表第二个li
    </script>
③ node.firstChild 第一个子节点

​ node.firstChild 可以返回指定节点的第一个子节点,包含文本节点和元素节点,找不到则返回 null。

④ node.lastChild 最后一个子节点

​ node.lastChild 可以返回指定节点的最后一个子节点,包含文本节点和元素节点,找不到则返回 null。

⑤ node.firstElementChild 第一个元素子节点

​ node.firstElementChild 可以返回指定节点的第一个元素子节点,找不到则返回 null。 有兼容性问题,IE 9以上才支持。

⑥ node.lastElementChild 第一个子节点

​ node.lastElementChild 可以返回指定节点的第一个元素子节点,找不到则返回 null。有兼容性问题,IE 9以上才支持。

// 案例代码

 <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        // 1. firstChild 第一个子节点 不管是文本节点还是元素节点
        console.log(ol.firstChild);  // 回车 #text
        console.log(ol.lastChild);   // 回车 #text
        // 2. firstElementChild 返回第一个子元素节点 ie9才支持
        console.log(ol.firstElementChild);  // 第一个li
        console.log(ol.lastElementChild);   // 最后一个li
        // 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素
        console.log(ol.children[0]);    // 第一个li
        console.log(ol.children[ol.children.length - 1]);   // 最后一个li
    </script>
5、获取兄弟节点
① node.nextSibling 下一个兄弟节点

​ node.nextSibling 可以返回指定元素的下一个兄弟节点,包括文本节点和元素节点。找不到则返回 null。

② node.previousSibling 上一个兄弟节点

​ node.previousSibling 可以返回指定元素的上一个兄弟节点,包括文本节点和元素节点。找不到则返回 null。

③ node.nextElementSibling 下一个元素兄弟节点

​ node.nextElementSibling 可以返回指定元素的下一个元素兄弟节点。找不到则返回 null。

④ node.previousElementSibling 上一个元素兄弟节点

​ node.previousElementSibling 可以返回指定元素的上一个元素兄弟节点。找不到则返回 null。

// 案例代码
<body>
	<div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');
        // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
        console.log(div.nextSibling);  // 回车
		// 2.previousSibling 上一个兄弟节点 包含元素节点或者 文本节点等等
        console.log(div.previousSibling);  // 回车
        // 3. nextElementSibling 得到下一个兄弟元素节点
        console.log(div.nextElementSibling);  // span
		// 4. previousElementSibling 得到上一个兄弟元素节点
        console.log(div.previousElementSibling);  // null
    </script>
</body>
6、创建节点

​ 在网页文档中,我们可以通过 document.createElement(‘tagName’) 方法来创建节点,即创建由 tagName 指定的 HTML标签,但此时仅仅是创建了元素节点,并没有把它添加到页面上去。

7、添加节点
① node.appendChild(child)

​ 此方法用来将一个节点添加到指定父节点的子节点的末尾,类似于 css 的 after 伪元素。

② node.insertBefore(child,指定子元素)

​ 此方法用来将一个节点添加到指定父节点的的指定子节点的前面,类似于 css 的 before 伪元素。

// 案例代码

// 我们想要页面添加一个新的元素,需要两个步骤 : 1. 创建元素节点 2. 添加元素节点

    <ul>
        <li>123</li>
    </ul>
    <script>
        // 1. 创建节点元素节点
        var li = document.createElement('li');
        // 2. 添加节点 node.appendChild(child)  node 父级  child 是被添加的节点
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3. 添加节点 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        
    </script>
8、删除节点

​ 我们可以通过 node.removeChild(children) 来删除 node 节点的任意一个(children)子节点,返回值为被删除的节点。

  // 案例代码
  
  <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>
9、复制(克隆)节点

​ 我们可以通过 node.cloneNode(参数) 来获得节点 node 的一个完全一样的副本。该方法的参数用来控制复制的程度,如果参数为空或者false,则为浅复制,即只复制该节点本身,不复制该节点内的子节点。如果参数为 true ,则为深度复制,即为复制节点以及结点的所有子节点。

// 案例代码

    <ul>
        <li>1111</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
        // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力的小朱同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值