JavaScript之元素对象的“增删改查”

文章目录

一、增加元素
二、删除元素
三、更改元素
四、元素查找
五、练习代码

一、增加元素

先创建一个空标签对象：

var ele=document.createElement("p");  //创建一个空的p标签对象

再添加上内容，并且修改样式：

ele.innerHTML="<h2>P标签</h2>";
ele.style.color="red";
ele.style.fontSize="20px";

最后就可以加到你需要的位置了，这里就加到这里就放到一个div1盒子里面：

 var fa=document.getElementsByClassName("div1")[0];  //获取对象fa.appendChild(ele);  //将ele添加进入fa盒子里

二、删除元素

先获取要删元素的所在位置：

var fa=document.getElementsByClassName("div1")[0];  //获取整个大的div1

再在所在位置里选中要删的元素：

var son=fa.getElementsByTagName("p")[0];

最后就可以进行删除操作了：

fa.removeChild(son);

三、更改元素

就是一个元素换成另外一个元素，比如这里将p标签换成img标签
先创建img标签：

var imgg=document.createElement("img");  //创建一个空的img标签

再将img指向一张图片，并设定样式：

imgg.setAttribute("src","jietu.jpg");
imgg.width=160;  //修改一下大小，默认单位px
imgg.height=130;

之后就分别获取要被替换的元素及其所在盒子：

var ele=document.getElementsByTagName("p")[0];
var fa=document.getElementsByClassName("div3")[0];

最后就可以执行替换操作了：

fa.replaceChild(imgg,ele);  //表示在div3标签内用img标签替换ele标签

四、元素查找

全局查找标签

document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
document.getElementsByName()

标签内查找标签

element.getElementsByTagName()
element.getElementsByClassName()

这个方面的内容在前面的文章有详细分析，请参见文章JavaScript之DOM对象（Node结点属性、导航属性、页面查找）目录中的“页面查找”一栏。

五、练习代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.div1, .div2, .div3, .div4{width:200px;height: 150px;}.div1{background-color: blue;}.div2{background-color: #00b0e8;}.div3{background-color: green;}.div4{background-color: yellow;}</style>
</head>
<body>
<div class="div1"><button onclick="add()">添加p标签</button>DIV1标签
</div>
<div class="div2"><button onclick="del()">删除p标签</button>DIV2标签</div>
<div class="div3"><button onclick="change()">更改标签</button><p>P下的DIV3标签</p>
</div>
<div class="div4">DIV4标签</div><script>function add(){var ele=document.createElement("p");  //创建一个空的p标签对象//修改html的内容：会更改样式ele.innerHTML="<h2>P标签</h2>";//不同的修改文本内容：不会更改样式// ele.innerText="<h2>P标签</h2>"//添加的时候可以对其进行CSS渲染ele.style.color="red";ele.style.fontSize="20px";//把新添加的标签放进大的div1盒子里var fa=document.getElementsByClassName("div1")[0];fa.appendChild(ele);}function del(){var fa=document.getElementsByClassName("div1")[0];  //获取整个大的div1//再找div1下的p标签var son=fa.getElementsByTagName("p")[0];fa.removeChild(son);}function change(){var imgg=document.createElement("img");  //创建一个空的img标签// imgg.src="jietu.jpg";  //指向一张图片的路径// imgg.width=160;  //修改一下大小，默认单位px// imgg.height=130;//也可以用setattribute来添加imgg.setAttribute("src","jietu.jpg");//分别获得p标签和div标签var ele=document.getElementsByTagName("p")[0];var fa=document.getElementsByClassName("div3")[0];fa.replaceChild(imgg,ele);  //表示在div3标签内用img标签替换ele标签}</script>
</body>
</html>

JavaScript之元素对象的“增删改查”相关推荐

JavaScript学习（四十八）—原型对象的增删改查
JavaScript学习(四十八)-原型对象的增删改查一.构造方法与原型对象的图解二.型对象的增删改查 (一).什么是原型每个函数都会有一个属性--prototype属性,这个属性都会有一个对象 ...
Django中数据对象的增删改查常用方法,自定义管理器类,过滤器及F和Q对象等知识点总结
Django对象的增删改查我们为了对django对象的增删改查进行总结,先在model.py文件中创建类便于举例定义学生: class Students(models.Model):sname=m ...
javascript基础学习_数组增删改查......_ZHOU125disorder_
数组的增删改查...... 1. new Array() (增) 定义一个空格数组之后在把元素添加到数组里面 var arr = new Array() arr[0]="卡卡西"; ...
YUDBModel【绿色插件】-对象序列化、反序列化、对象一键增删改查
2019独角兽企业重金招聘Python工程师标准>>> 一.YUDBModel 介绍架构: 使用runtime和Sqlite实现NSObject扩展类YUDBModel,直接实现( ...
微信小程序——数组对象的增删改查
微信小程序--数组对象的增.删.改.查 1.模拟数据的初始化定义 data: {type_name: '项目分类',name_name: '项目名称',type_sId: "",n ...
节点操作-创建createElement||appendChild-/追加-/插入insertBefore-/替换replaceChild-/删除remove-克隆元素 cloneNode（增删改查）
01-节点操作-创建元素·createElement||appendChild <body><div class="box"><span>我是前 ...
ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
1.WebApi是什么webApi实现增删改查操作
1.WebApi是什么 ASP.NET Web API 是一种框架,用于轻松构建可以由多种客户端(包括浏览器和移动设备)访问的 HTTP 服务.ASP.NET Web API 是一种用于在 .NET ...
JavaScript 对象增删改查 + 遍历对象+内置函数 + 随机对象
red red 1.什么是对象? 对象是JavaScript 里的一种数据类型:可以理解为是一种无序的数据集合:用来描述某个事物,例如描述一个人信息 2.对象怎么声明? let 对象名 = {} 例如 ...