元素节点的增加、删除、修改、查找

2024-01-24 16:31:40

一、增加节点

（1）创建元素节点

let div=document.createElement("div")
console.log( div )
//创建的元素在内存中不在页面上

（2）克隆元素节点

let ul=document.querySelector("ul");
//cloneNode 参数可选值为true 或false,规定的是对当前节点的子级要不要一起克隆
let myul=ul.cloneNode(true);
console.log(ul,myul,ul==myul)

（3）添加元素节点（把元素节点往页面上放）

// 1、往父级最后的位置新增一个
document.body.append(input)
document.body.appendChild(div)

// 2、指定一个位置新增节点
// document.body.appendChild( myul )
document.body.insertBefore( myul,ul.nextElementSibling )
PS：参数1：创建的新节点
参数2：节点放置位置（插入后参数1在参数2的前面）

    //案例：创建一个li 节点对象，放在12 代码的后边去显示
        var myli=document.createElement("li");
        myli.innerHTML="新增的一个li 标签";
        ul=document.querySelector("ul");
        ul.appendChild(myli);

        var oldli=document.getElementsByTagName("li")[0]
        var myli=oldli.cloneNode(true);
        myli.innerHTML="新增的一个li 标签";
        ul=document.querySelector("ul");
        ul.insertBefore(myli,oldli.nextSibling)

注意：只有在文档树中的节点才会显示出来

二、删除节点

（1）直接删除节点

// 1、自己删除自己
box.remove();
// 2、父级调用方法删除自己
box.parentNode.removeChild(son);

（2）替换节点

// 调用方法的节点必须是父节点，该方法上镜率不高，origin被“剪切”出来
parent.replaceChild(new,origin);

三、修改与查找节点

（1）修改（获取）内容

console.log( ul.innerHTML );//所有内容，包括子级+后代标签
console.log( ul.outerHTML );//所有内容，包括子级+后代标签+自己
console.log( ul.innerText );//只获取文本内容，把内部所有标签全部去掉

注意：console.log( typeof(ul.innerHTML) ); //获取的内容为String类型

（2）修改（获取）类名

console.log( a.className ); //字符串

console.log( a.classList ); //类数组，对象

a.className += " (新的)类名";  //增加新的类  在已有的样式上追加样式前面要有空格
// a.classList.add("(新的)类名");  //增加新的类样式全变
a.classList.remove("类名")  //删除
a.classList.replace("类名", "(新的)类名")  //修改

（3）修改（获取）属性

A.所有属性

setAttribute(‘属性名’，‘属性值’) //设置指定的属性名的值
getAttribute() //获取指定的属性名的值
hasAttribute() //检查一个属性是否存在
removeAttribute() //删除指定的属性

B.标准属性

// 标准属性可以直接操作：node.attr = ‘新值’;比如：
input.value="请输入关键词"
img.src="./img/logo.png"
a.href="http://www.hqyj.com"

注意：class属性不能直接ca

C.自定义属性

//获取自定义属性的值,例如标签的data-myattr = ‘value’
el.dataset.myattr

（4）修改样式

A.修改样式

//通过元素的style属性间接操作css样式
el.style.property="value"

PS：1.写入的值必须是字符串格式；
2.复合属性必须拆解，组合单词碧玺变成小驼峰式写法；
3.property碰到float这样的保留字属性，前面应加"css",eg:float--》cssFloat
4.如果改的属性比较多，推荐使用class进行样式修改；或通过改变引用的CSS文件改变样式。

B.获取最终绘制样式

let styleobj=window.getComputedStyle(ele);
//styleobj对象是一个最终绘制的样式结果对象,有with height等270多个样式值
//只能获取样式,要设置使用el.style.xx

码农公寓