【JavaScript-09】webAPI---DOM的增删改查

简单Janeee

于 2022-06-29 21:50:59 发布

阅读量223

点赞数

分类专栏： JavaScript基础文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/liqiannan8023/article/details/125530254

版权

JavaScript基础专栏收录该内容

44 篇文章 0 订阅

订阅专栏

一、DOM

一、DOM文档对象模型

一个网页其实就是个文档，文档是由一个一个节点组成的

节点：标签、属性、文本、注释

DOM主要用来：1。获取元素 2.动态创建元素 3.对元素进行操作 4.添加事件

二、获取节点

1.通过id来获取节点

getElementById(id的名字)[0];

<body>
	<p id="title">我是一个p标签</p>

	<script type="text/javascript">
		// 通过id来获取节点
		var title = document.getElementById('title');//和HTML标签名重名可以，括号里面输入id的名字
		console.log("title",title);//把整个p标签打印出来了，证明获取的是整个p标签，返回的是一个元素对象
		title.style.color = "red";//通过js来写入元素的行内样式

	</script>
	
</body>

2.通过标签名来获取节点

getElementsByTagName(‘标签的名字’)

注意：标签名的elements中有s

<body>
   <ul>
		<li>这是ul中的li标签1</li>
		<li>这是ul中的li标签2</li>
		<li>这是ul中的li标签3</li>
		<li>这是ul中的li标签4</li>
	</ul> 
    <script>
    //通过标签名获取节点
		var li = document.getElementsByTagName('li');
		//注意Elenments获取多个页面的标签，加上s
		console.log("li",li);
		// li[1].style.color = 'blue';//伪数组的第二个变成蓝色，如果页面只有一个li返回的还是伪数组的形式，页面如果没有元素，返回的是空的伪数组
		
		//js变化得到的就是变化的效果
		//奇数蓝色，偶数红色
		for(var i = 0; i<li.length;i++){
			if(i%2==0){
				li[i].style.color = 'bule';
			}else{
				li[i].style.color = 'red';
			}
		}
        </script>
</body>

3.通过类名获取节点

getElementsByClassName(‘类名’)

<body>
    <div class="demo">我是div，类名为demo</div>
	<span class="demo">我是span，类名为demo</span>
	<h1 class="demo">我是h1，类名为demo</h1>
    <script>
     //获取类名
		var demo = document.getElementsByClassName('demo');
		console.log('类名为demo的标签',demo);
		//改字体，没有杠—改成小驼峰
		demo[1].style.fontSize = '30px';
		demo[0].style.backgroundColor = '#0099ff';
    </script>
</body>

4、获取当前元素的父元素

获取本身的父级节点parentNote

<body>
	<div>
		<p><span>我是div标签下的p标签下的span</span></p>
	</div>
	<ol>
		<li>我是ol下面的li标签</li>
	</ol>
	<script>
		// parentNode 获取本身的父级节点
		var span = document.getElementsByTagName('span')[0];//加一个下标0，自动取这唯一的一个span
		console.log(span);
		//根据本身来获取节点
		console.log(span.parentNode);//拿到了自己父级的p
		span.parentNode.style.backgroundColor = 'blue';
		console.log(span.parentNode.parentNode);//获取父级的父级


		//指定父元素获取子元素
		//父元素必须是单个对象（必须指明是哪一个对象）获取的时候不包括父元素自己，不能让伪数组形式作为父元素
		//	第一个ol中的所有li
		var ol = document.getElementsByTagName('ol');
		console.log(ol[0].getElementsByTagName('li'));
	</script>	
</body>

5.获取兄弟节点

1.获取下一个兄弟节点nextElementSibling()

2.获取上一个兄弟节点previousElementSibling()

<body>
	<ul>
		<li>li为标签的兄弟1</li>
		<li>li为标签的兄弟2</li>
		<li class="three">标签的兄弟3</li>
		<li>li为标签的兄弟4</li>
		<li class="three">li为标签的兄弟5</li>
		
	</ul>

	<script>
		//获取下一个兄弟节点nextSibling
		//特点会把空格 文本 注释当成空格获取到，紧贴改标签的下一个兼容ie678，比较麻烦了解即可
		var three = document.getElementsByClassName('three')[0];//获取类名为three的标签，加[0]是返回伪数组
		console.log(three.nextSibling);//打印three类名的下一个兄弟
		console.log(three.nextElementSibling);
		//nextElementSibling只是获取下一个标签的节点
		

		//上一个兄弟节点两个方法
		//previousSibling 没有获取节点，会把文本空格等当做上一个节点获取
		//previousElementSibling只是获取下一个标签的节点
		console.log(three.previousSibling);
		console.log(three.previousElementSibling);
	</script>
	
</body>

6.子节点

1.获取第一个孩子节点lastElementChild

2.获取最后一个孩子节点firstElementChild

3.获取所有孩子节点childNodes/children，获取到的均是伪数组格式，需要加[0]

<body>
	<ul class="ulBox">
		<li>我是ul下面的li1</li>
		<li>我是ul下面的li2</li>
		<li>我是ul下面的li3</li>
		<li>我是ul下面的li4</li>
		<li>我是ul下面的li5</li>
	</ul>


	<script>
		var ulBox = document.getElementsByClassName("ulBox")[0];//取下标0 获取第一个
		// firstChild 获取第一个孩子节点，会把空格文本等当做节点，
		// 一直往下找则会报错，算没用
		// firstElementChild 获取第一个孩子节点
		console.log(ulBox.firstChild);
		console.log(ulBox.firstElementChild);

		//获取最后一个节点
		//lastChild会把空格文本等当做节点
		//lastElementChild
		console.log(ulBox.lastElementChild);

		//获取中间节点的方法
		//childNodes 获取所有子节点（ie678）,获取到的是数组
		console.log(ulBox.childNodes);
		//children 获取所有节点
		console.log(ulBox.children);//获取的全是孩子标签
	</script>
</body>

DOM的增删改查

（创建）三、创建节点和插入标签

1.document.write()

在页面中插入的位置很随便，不可控

<body>
	<div class="divBox">
		<p class="psty">我是div包裹的p标签</p>
	</div>
	<script>
		var divBox = document.getElementsByClassName("divBox")[0];//获取div中的第一个数组元素

		//创建节点
		document.write("<<div>123456</div>");不可控不够灵活
	</script>
	
</body>

2.document.createElement(要创建的标签的名字)常用！

变量名.innerHTML = “要插入的内容”;

类名.appendChild(变量名);

<body>
	<div class="divBox">
		<p class="psty">我是div包裹的p标签</p>
	</div>
	<script>
		var divBox = document.getElementsByClassName("divBox")[0];//获取div中的第一个数组元素

		// 2.document.createElement(要创建标签的名字);方式最好
		var h1 = document.createElement("h1");//创建类名为h1的标签h1
		//h1中插入内容
		h1.innerHTML = "我是使用js被插入h1标签的内容";
		//将内容添加到页面上div里面，变量的h1
		//将节点添加到类名为divBox，里面的最后面。类名.appendChild(所要添加的标签名);
		divBox.appendChild(h1);//变量的h1
	</script>
	
</body>

3.innerHTML和appendChid

innerHTML= “可以添加标签，可以添加文本”

但是不好，会覆盖掉已经有的内容

<body>
	<div class="divBox">
		<p class="psty">我是div包裹的p标签</p>
	</div>
	<script>
		var divBox = document.getElementsByClassName("divBox")[0];//获取div中的第一个数组元素
		//3.innerHTML
		divBox.innerHTML = "<p>我是inner添加的p2</p>";
		divBox.innerHTML = "<p>我是inner添加的p3</p>";
        //将左边的代码添加到类名为divBox的后面，innerHTML会解析字符串的标签和文本，问题把原来的内容都覆盖了，只剩下inner所添加的内容，只能覆盖没法添加
		//innerHTML会将父级原来的内容覆盖掉，因为它会对字符串解析，所以还需要避免在循环中使用
	
	</script>
	
</body>

（增）4.插入节点

appendChild往调用者的内部结尾添加标签,加在最后面见3
insertBefore (要添加的元素，添加位置的参考节点)

<div class="divBox">
		<p class="psty">我是div包裹的p标签</p>
</div>
<script>
		// appendChild往调用者的内部结尾添加标签,加在最后面
		// insertBefore (要添加的元素，添加位置的参考节点)
		var h = document.createElement("h1");
		var psty = document.getElementsByClassName('psty')[0];
		//获取类名为psty第0个元素，返回到psty
		h.innerHTML = "我是插入参考节点的元素";

		/*//将var psty注掉之后，还有那些方法能获取psty的值呢？通过父子级
		console.log(divBox.children);
		divBox.insertBefore(h,divBox.children[0]);*/

		//获取父节点的参考位置
		psty.parentNode.insertBefore(h,psty);

		//获取divBox的第一个元素
		// divBox.insertBefore(h,psty);
		//往divBox中类名为的psty元素前，添加新创建的h
</script>

四、删除节点

1.removeChild(子节点);可用数组表示

2.remove();删除调用者本身

<body>
	<ul class="ulBox">
		<li>我是ul包裹的li标签1</li>
		<li>我是ul包裹的li标签2</li>
		<li>我是ul包裹的li标签3</li>
		<li class="lis">我是ul包裹的li标签4</li>
		<li>我是ul包裹的li标签5</li>
	</ul>
	<script>
		var ulBox = document.getElementsByClassName('ulBox')[0];//获取dom节点
		var lis = document.getElementsByClassName('lis')[0];
		//删除节点
		//1.removeChild(子节点)
		//删除调用者的子节点，删除第二个
		ulBox.removeChild(ulBox.children[1]);

		//2.remove()删除调用者本身
		lis.remove();
	
	</script>

</body>

五、替换节点

replaceChild(要替换的值，被替换的值)

<div class="box">
		<p>我是div包裹的p1</p>
		<p>我是div包裹的p2</p>
	</div>

	<script>
		// 替换节点
			// replaceChild(要替换的值，被替换的值);替换调用者的子节点
		//创建一个新的节点
		var divs = document.createElement("div");
		divs.innerHTML = "我是被加入的新的div内容";
		var box = document.getElementsByClassName("box")[0];
		box.replaceChild(divs,box.children[1]);//直接进行获取，或者父级找子代，替换box里面中第二个元素，值为divs
	</script>

六、克隆节点

cloneNode(true/false);//深克隆和浅克隆

<body>
	<div class="box">
		<h1>我是标题h1<span>h1里面的span标签</span></h1>
		<p>我是文本p</p>
		
	</div>

	<script>
		// 克隆节点就是复制：cloneNode(true/false),true代表深克隆 false代表浅克隆
		var box = document.getElementsByClassName('box')[0];//注意不要掉[0]，取数组的第0个元素
		var clones = box.children[0].cloneNode(true);//h1中所有的内容都可以克隆，本身和子节点
		// var clones = box.children[0].cloneNode(false);//浅克隆克隆h1，只克隆了一层标签，类似于创建标签
		
		// console.log("clones",clones);
		box.appendChild(clones);
		//克隆完之后要添加

	</script>

七、写入内容

1.innerHTML:可以识别文本和标签，可以保留空格和换行，更标准，文本也会覆盖，但是=可以利用拼接的方法进行重复添加

注意：换行需要使用br

2.innerText：只能写入文本覆盖，能去除空格和换行

<body>
	<div class="box"></div>

	<script>
		// 写入内容
		// 	1.innerHTML 可以识别文本和标签
		var box = document.getElementsByClassName('box')[0];
		box.innerHTML = "<h1>innerHTML添加的h1的内容</h1>";
        //如box里面重复多个h1标签
        box.innerHTML += "<h1>innerHTML添加的h1的内容</h1>"

		//innerText 写入文本覆盖
		box.innerText = "<h1>这是innerText所插入的h1标签的内容</h1>";
	</script>
	
</body>

八、属性操作

1.获取属性getArribute

2.设置属性setArribute、img的src属性

3.删除属性removeArribute

4.新增类名的两种方式

1）class添加属性变量名.setArribute(“class”,“类名”)

2）变量名.className

<body>
	<img src="img/1.png" alt="我是失败显示的">

	<script>
		//1.获取属性 getAttribute(要查找的元素属性名)
		//先找节点，拿到标签的第0个节点
		var img = document.getElementsByTagName("img")[0];
		var src = img.getAttribute("src");//属性值的获取，获取之后才能修改
		// console.log('src',src);

		//2.设置属性 setAttribute(要修改的属性名，要修改的值);字符串类型
		img.setAttribute("src","img/2.png");
		//3.删除属性 removeAttribute(要删除的属性名);字符串类型
		// img.removeAttribute('src');

		//新增一个类名，用空格隔开可以添加多个类
		// img.setAttribute("class","imgSty sss");
		// 第二种添加类名的方式
		// className添加类名
		img.className = "imgSty sss";
	</script>

5.自定义属性

取自定义属性，存放暂时不知道放到哪里的数据

<body>
	<div>
		<p data-id='123'>我是div包裹的p</p>
		<!-- data-id是自定义的语法规范，中间有条小杠 -->
	</div>

	<script>
		var p = document.querySelector("p");
		var pData = p.getAttribute("data-id");//获取自定义属性，存放暂时不知道放到哪里的数据
		console.log("pData",pData);
	</script>
</body>

九、H5DOM选择器

querySelector 返回指定选择器的第一个元素，切记，里面的选择器名需要加符号，类名加. ，id名加#，
querySelectorAll() 返回选择器所有元素对象集合
//获取特殊元素
//获取body元素和html元素
//document.body //返回body元素对象
//document.documentElement返回html元素对象

<body>
	<div class="box">我是div</div>
	<p class="box">我是和div重名的p</p>
	
	<script>
		var box = document.querySelector(".box");//style样式表中（css选择器）怎么写类名，这里就怎么写类名，只找传入类名时的第一个，找到谁算谁

		//相同类名怎么解决？
		var box2 = document.querySelectorAll(".box");
		console.log("box2",box2);
		//querySelectorAll获取所有的相同类名的标签

		//标签选择器
		// var div = document.querySelector("div");
		// console.log("box",box);
		// console.log("div",div);
	</script>
</body>

简单Janeee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript-09】webAPI---DOM的增删改查

一个网页其实就是个文档，文档是由一个一个节点组成的节点：标签、属性、文本、注释DOM主要用来：1。获取元素 2.动态创建元素 3.对元素进行操作 4.添加事件getElementById(id的名字)[0];2.通过标签名来获取节点getElementsByTagName(‘标签的名字’)注意：标签名的elements中有s3.通过类名获取节点getElementsByClassName(‘类名’)4、获取当前元素的父元素获取本身的父级节点parentNote5.获取兄弟节点1.获取下一个兄
复制链接

扫一扫

专栏目录