DOM操作

最新推荐文章于 2024-08-11 00:22:53 发布

小梦新靓

最新推荐文章于 2024-08-11 00:22:53 发布

阅读量1.6k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_43712187/article/details/90212530

版权

JS 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

一、DOM（document object model）简介

什么是DOM操作？

通俗来讲dom是来操作html的一个手段，利用DOM可完成HTML文档中所有元素的获取，访问，标签属性和样式的设置的操作.

标签和元素的区别？
我当时看到这个以为标签结束元素，元素就是标签，但发现在dom操作对这两者是分开说明的，就查了一下
—标签：话说在html中用<>就是标签
—元素：<p>这里是内容</p>这就是一个元素，也就是说元素由一个开始的标签和结束的标签组成，用来包含某些内容；
—节点：

后来又查了一下说（标签）（元素）（节点）他们是一样的只是分别在html，css和js的三种不同叫法

二、查找元素的方法
1、通过id
document.getElementById("id名")；
2、通过name–返回的是为name的集合
document.getElementsByName("name名")；
3、通过标签名–返回的是此标签的集合
document.getElementsByTagName("标签")；
4、通过class来获取—也是返回集合
document.getElementsByClassName("类选择器的名字")；
document.getElementsByName("*")//获取全部元素
5、[]来获取指定的节点

var Div=document.getElementsByTagName("div")[1];
 console.log(Div);

获取节点后通过./[]来对获取的标签进行操作
eg：

1、操作属性
Div.style.background="red";
DIV.style[background]="red";
2、操作里面文本内容
Div.innerHTML="更改的内容"；

三、Dom节点

html中任意标签都是节点
节点：父节点，子节点，根节点（html只有一个），兄弟节点
ggg：
–单纯的文字没有标签称为文本节点
–<>skkl元素节点</>
–什么都没有称为空节点
1、如何获取子节点:只算第一辈分的
—1.1父亲.childNodes
—特点：获取的既有文本节点，又有元素节点
—1.2父亲.children;
—特点：只有元素节点,不用处理nodeType

var oUl=document.getElementById("ul1");
//获取子节点1:
             	var  node1=oUl.childNodes;
             2:	var  node1=oUl.children;
             	alert(node1.length);    
             	for(var i=0;i<node1.length;i++)
             	{
             		1；alert(node1[i].nodeType);
             		2:alert(node1[i]);
             	} 
             }
	</script>
</head>
<body>
    <ul id="ul1">
	<li></li><li></li><li></li><li></li><li></li>
	<li></li>
</ul>
</body>
</html>

问题：它空格也为节点所有在一些浏览器有问题
文本节点没有样式
解决：
每个节点有一个nodeType属性用来判断节点的类型

元素节点 nodeType 值是1
属性节点 nodeType 值是2
文本节点 nodeType 值是3
注释节点 nodeType 值是8
文档节点 nodeType 值是9

2、如何获取父节点：

格式：parentNode

    var ul1=document.getElementById("ul1");
           alert(ul1.parentNode);
             }

—小案例：点击子元素让他的父元素消失

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
              window.onload=function()
              {
               var aA=document.getElementsByTagName("a");
                for(var i=0;i<aA.length;i++)
                {
                	aA[i].onclick=function()
                	{
                this.parentNode.style.display="none";
                	};
                }

              }
	</script>
<body>
	<ul>
		<li> sndmsn1<a href="#">隐藏</a></li>
		<li> sndmsn2<a href="#">隐藏</a></li>
		<li> sndmsn3<a href="#">隐藏</a></li>
		<li> sndmsn4<a href="#">隐藏</a></li>
	</ul>
</body>
</html>

2、offsetParent:获取元素在页面的实际位置–它根据样式不确定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- offsetparent 寻找-->
   	<style>
		#div1{
			width: 200px;
			height: 200px;
			background: #ccc;
			position: relative;
			margin: 100px;
		}
		#div2{
			width:100px;
			height: 100px;
			background: red;
			position: absolute;
			left:50px;
			top:50px;
		}
   	</style>
   	<script>
   	window.onload=function()
   	{var Div2=document.getElementById("div2");
   	alert(Div2.offsetParent);//获取元素的父元素定位
   	}
   	</script>
</head>
<body>
	<div id="div1">
		<div id="div2"></div>
	</div>
</body>
</html>

3、首节点：
firstChild:和childNodes一样算文本节点
高版本的获取首结点用：firstElementChild获取元素的首结点不是全部浏览器·兼容

解决用if解决兼容问题

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
	window.onload=function()
	{
		var uL=document.getElementById("Ul");
		if(uL.firstElementChild)
		{
			uL.firstElementChild.style.background="red";
		}
		else{
			uL.firstChild.style.background="red";
		}
	}
	</script>
</head>
<body>
	<ul id="Ul">
		<li></li>
		<li></li>
	</ul>
</body>
</html>

同理：lastChild和lastElementChild
4、获取兄弟节点
—有兼容问题

nextSibling nextElementSibling(获取下一个兄弟)
previousSibling和previousElementSibling（获取上一个兄弟）
四、元素属性操作
1、用" . "
2、用[]
3、Attributes:返回一个元素的属性集合
方法：
设置：setAttribute(name,value)；
获取：getAttribute（name）；
删除：romveAttribute（名称）；
eg：
五、元素的创建
1、创建元素：Document.createElement(“标签名”)；
2、在指定位置插入元素：
element（父元素·）.appendChild(element1)–插到最后面·、element（父元素·）.insertBefore(element1)–插到最前面·
3、给创建地元素添加属性： element.setAttribute(“属性名”，”值“)；
4、给添加地元素添加文本：element.innerHTML=“内容·”；