DOM对象

最新推荐文章于 2022-06-13 10:53:13 发布

小涛涛啊！

最新推荐文章于 2022-06-13 10:53:13 发布

阅读量2.5k

点赞数 2

分类专栏： js内容知识文章标签： js

本文链接：https://blog.csdn.net/t5555666/article/details/108738749

版权

js内容知识专栏收录该内容

21 篇文章 0 订阅

订阅专栏

DOM对象（dom的操作就是对标签的操作）

1.什么是dom对象
dom对象就是html页面，dom对象的全称叫document object model(文档对象模型)
2：dom对象的作用是什么呢？
dom对象就是通过一些方法和属性来操作标签，
怎么操作标签？
将标签元素进行添加、移动、改变或移除
3：标签= =标记= =元素==节点

4: dom节点的分类？
dom节点分为3种类型
1：标签节点

var op=document.getElementsByTagName('p')[0];
		alert(op.tagName);
		alert(op.nodeName);
		alert(op.nodeValue);//null
		alert(op.nodeType);//1

2：文本节点
	属于标签下面的子节点

<body>
		<p>哈哈哈 </p>
		<!--childNodes  查找子节点的属性-->
	</body>
	<script type="text/javascript">
		var op=document.getElementsByTagName('p')[0];
		alert(op.childNodes.length)//1
		alert(op.childNodes[0].nodeName)//#text
		alert(op.childNodes[0].nodeValue)//哈哈哈
		alert(op.childNodes[0].nodeType)//3
	</script>

3：属性节点

<body>
		<p id="op1" class="op2" name='op3'>哈哈哈 </p>
		<!--childNodes  查找子节点的属性
			attributes  查找属性节点	
		-->
	</body>
	<script type="text/javascript">
		var op=document.getElementsByTagName('p')[0];
//		alert(op.attributes)//[object Named  NodeMap ]  返回属性列表
//		alert(op.attributes.length)//3
		alert(op.attributes[1].nodeName)//属性  class
		alert(op.attributes[1].nodeValue)//属性名  op2
		alert(op.attributes[1].nodeType)//2
	</script>

5：返回节点类型值
nodeName 该节点的名字，和tagName方法一样
nodeValue 该节点的文本
nodeType 该节点的编码标签节点返回数字1,属性节点返回数字2，文本节点返回数字3

6:查找子节点
childNodes[0] 返回当前元素节点的所有子节点
firstChild 获取该节点的第一个子节点
lastChild 获取该节点的最后一个子节点
parentNode 获取该节点的父节点
previousSibling 获取该节点的前一个节点
nextSibling 获取该节点的下一个节点
children[0] 获取该节点的子标签节点
firstElementChild 第一个子标签属性
lastElementChild 最后一个子标签属性
nextElementSibling 下一个兄弟元素节点
previousElementSibling 前一个兄弟元素节点
childElementCount 子元素节点个数量

<body>
		
		<div>嘿嘿嘿<p>呵呵呵</p>羞羞羞<em>坎坎坷坷</em><span>哈哈哈</span>啦啦啦</div>
	</body>
	<script type="text/javascript">
		var odiv=document.getElementsByTagName('div')[0];
		alert(odiv.children[0].nodeName)
//		alert(odiv.childNodes.length)
//		alert(odiv.firstChild.nodeValue)
//		alert(odiv.lastChild.nodeValue)
//		alert(odiv.parentNode.nodeName)//BODY
//		alert(odiv.childNodes[4].previousSibling.nodeName)
//		alert(odiv.childNodes[0].nextSibling.nodeName)
//		alert(odiv.firstElementChild.nodeName)
//		alert(odiv.lastElementChild.nodeName)
//		alert(odiv.firstElementChild.nextElementSibling.nodeName)
//		alert(odiv.lastElementChild.previousElementSibling.previousElementSibling.nodeName)
//		alert(odiv.childElementCount)
		
	</script>

7:查找属性节点
attributes 属性
8:操作属性节点
document.getAttribute()//获取特定元素节点属性的值/通过属性获取到对应的属性值
document.setAttribute(要设置的属性，属性值)//设置特定元素节点属性的值/通过属性设置对应的属性值
document.removeAttribute()//移除特定元素节点属性的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.a{
				color: red;
				font-size: 100px;
			}
		</style>
	</head>
	<body>
		<p class="a" id="b" name='c'>坎坎坷坷扩</p>
	</body>
	<script type="text/javascript">
		var op=document.getElementById('b');
//		alert(op.getAttribute('id'))
//		alert(op.getAttribute('class'))

//		op.setAttribute('name','f')
//		op.setAttribute('id','w')
		
		op.removeAttribute('class')
		
	</script>
</html>

9:操作节点
createElement()//创建标签
createTextNode()//创建文本
appendChild(创建的标签名，当前的标签名)//把标签或者文本插入/添加到另一个节点里面不加引号
insertBefore()//在当前节点前面创建一个节点
用insertBefore方法创建节点必须先找到当前节点的父节点后，在创建方法里面不加引号
replaceChild(新节点，旧节点)//把节点替换成指定的节点
cloneNode(false/true)//克隆/复制节点 true克隆的是标签+文本如果是false 只会克隆标签
removeChild()//删除节点

		<ul></ul>
	</body>
	<script type="text/javascript">
		var oul=document.getElementsByTagName('ul')[0];
//		var oli=document.createElement('li');
//		var ot=document.createTextNode('卡卡卡');
//		oli.appendChild(ot);
//		oul.appendChild(oli);

	<ul>
			<li>斤斤计较军</li>
		</ul>
	</body>
	<script type="text/javascript">
		var oul=document.getElementsByTagName('ul')[0];
		var oli=document.getElementsByTagName('li')[0];
		var oh=document.createElement('h1');
		oli.parentNode.insertBefore(oh,oli)
		//我们要先找到li标签的父节点在来用到insertBefore这个方法


	</script>

div>
			<h1>我是标题</h1>
		</div>
	</body>
	<script type="text/javascript">
		var odiv=document.getElementsByTagName('div')[0];
		var oh1=document.getElementsByTagName('h1')[0];
//		odiv.removeChild(oh1);
		var oh1_t=oh1.childNodes[0];
		oh1.removeChild(oh1_t)
        odiv.appendChild(clo_oh)

		//		var op=document.createElement('p');
//		odiv.replaceChild(op,oh1)

//		var ot=document.createTextNode('我是老栗');
//		var oldt=oh1.childNodes[0];
//		oh1.replaceChild(ot,oldt)

	</script>

小涛涛啊！

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
DOM对象

DOM对象（dom的操作就是对标签的操作）1.什么是dom对象dom对象就是html页面，dom对象的全称叫document object model(文档对象模型)2：dom对象的作用是什么呢？dom对象就是通过一些方法和属性来操作标签，怎么操作标签？将标签元素进行添加、移动、改变或移除3：标签= =标记= =元素==节点4: dom节点的分类？dom节点分为3种类型1：标签节点var op=document.getElementsByTagName('p')[0]; alert
复制链接

扫一扫