web-api-节点操作_document.createelement参数加引号吗-CSDN博客

本文链接：https://blog.csdn.net/weixin_49077562/article/details/123646559

节点操作

什么是节点？

dom树中的所有内容都是节点  内容可以分类成以下：
	内容：
			元素节点
			属性节点：元素中的属性 如href  class id
			文本节点：字面文本
			其他

节点关系有三类：父子兄

-找父节点：子元素.parentNode  找最近一级的亲爸爸 找不到返回null 
-找子节点： childNodes:获得所有子节点，包括文本节点（空格换行），注释节点等
				children（重点）：仅获得所有元素节点 得到的是一个伪数组
				父元素.children
-查找兄弟节点：
					上一个兄弟：perviousElementSibling属性
					下一个兄弟：nextElementSibling属性

增加节点

步骤：先创建一个新的节点–然后把新的节点放到指定的元素的内部
创建新的元素：document.createElement(‘标签名’);--------------------带引号的字符串
　　　　 document.createElement(‘p’);
　　　　 ｌｅｔ　ｐ　＝document.createElement(‘p’);

一般将新创建的节点插入到父元素中
　　　插入到父元素的最后一个子元素：
　　　父元素.appendChild（接收元素的变量名）---------不加引号
　　　不加引号解释：
　　　ｌｅｔ　ｌｉ　＝ｄｏｃｕｍｅｎｔ．ｑｕｅｒｙＳｅｌｅｃｔｏｒ（＇ｌｉ＇）；
　　　变量li接收到的元素标签本身是字符串的　所以不用加
　　　
　　　插入到父元素中某个子元素的前面：
　　　父元素.insertBefore(要插入的元素，在哪个元素前面 );

特殊情况下我们新增一个节点按照如下操作
先：复制一个原有的节点

      <!-- <li>
                    <img src="./images/course01.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • <span> 1125</span>人在学习
                    </div>
                </li> -->

	再：把复制的节点放入指定的元素内部

// 获取父元素ul
        let ul = document.querySelector('ul');
        // 由数据的长度 通过遍历创建元素li 的个数
        for (let i = 0; i < data.length; i++) {
            let li = document.createElement('li');

            //先将li渲染好再追加到父元素里面
            li.innerHTML = `      
                    <img src=${data[i].src} alt="">
                    <h4>
                        ${data[i].title}
                    </h4>
                    <div class="info">
                        <span>高级</span> • <span> ${data[i].num}</span>人在学习
                    </div>`;
            //将新创建的每个li都追加到父元素ul中
            ul.appendChild(li);
            // li.children[i].
        }

克隆节点

克隆一个已有的元素节点
元素.cloneNode(布尔值);

在这里插入图片描述
元素.cloneNode();
参数为空–默认为false：只克隆该元素，但不克隆元素里面的子元素
参数为true：克隆该元素并且该元素的后代都将被克隆

删除节点
在这里插入图片描述

时间对象

在这里插入图片描述

时间对象方法

在这里插入图片描述
时间对象方法的使用之前必须先实例化对象：
let date=new Date();
date.方法

**注意点：**星期0 星期1 星期2 如何变为星期天星期一
通过创建数组引用数组下标
let arry= [ ’ 星期天’，’ 星期一’，’ 星期二’，’ 星期三’，’ 星期四’ ]
0 1 2 3 4
date.getDay();//返回0-6
let weekend = date.getDay();
${ arry [ weekend ] }

实例化时间要写在定时器的里面：因为定时器每隔一段时间就调用函数，函数每被调用一次，函数内部实例化时间就会重新获取最新时间